10 Ways to Design Your Site for Accessibility

I'm frustrated with modern web design. And I'm certainly frustrated with most theme and template designers who sell their work without checking for global accessibility.

Many designers actually take good, accessible CMSs and then create designs with big accessibility problems.

I'm a lawyer, website designer and accessibility / diversity consultant in Australia. Having advised the corporate, government and education sectors, I find a lot of sites are not accessible and offer many users a bad experience.

Why is accessibility important?

In 2010, 10% of people in the developed world had a print disability. That figure was 15% in non-developed countries.

In Australia, accessibility is considered important enough that I could take you to Court if your site is not accessible. Shocked?

No, I would never recommend a client focus on "sites for the blind", but sites that are accessible for all. That includes people with a print disability, physical disability, hearing disability - even the older generations. In short, a large percentage of your entire audience just can't access your site the way you do.

Expensive? No, in fact it comes back to design standards, because this is real basic stuff.

Here are ten steps that you can make to ensure your site is accessible.

#1. Design

I don't need to tell you guys how to design. But these three key principles will help users with disabilities:

1. Make sites easy to read and understand
2. Make sites easy to navigate
3. Make sites easy to use on mobile devices

This will get you close to accessibility, and they will also help search engines love your site as well!

The screen readers I test my sites with are just like the Google robots (except blind tech was around first).

#2. Navigation

Did you know PC's have accessibility software to assist navigate and read the screen? You probably did, but did you also know mobile devices have accessibility software built into the core? This software can read to people, including those with vision impairment:

• Apple (IOS) uses VoiceOver;
• Android uses Talkback;
• Windows uses Narrator.

Near all website designers include a menu in the template, but 95% can't be read with any of the above technology! Most of these accessibility services can't recognize a menu exists, because it is coded incorrectly. Most often, the problem is that the menu is poorly coded or not clearly tagged.

It's worth loading some sites into your phone and turning on the accessibility features. See whether or not your site's menu works.

#3. Don't write all in caps

This is probably the most basic change anyone can make to their site: don't write in all caps.

This is scientifically tested and proven BECAUSE ALL CAPS IS HARD FOR ANYONE TO READ!

The most overused capitalization is found in menu items and buttons. You are helping get your message out if you write normally with regular capitalization, unless you have a specific design purpose - like a brand or logo.

#4. Explain your links clearly

"Read more" or "Click here" buttons don't tell Google (or those using screen readers) what is behind the link. Simply take your link out of context to see if it makes sense. Does 'Read more" in the middle of a page make any sense to you? Read more what?

#5. Use good contrasting styles

That doesn't mean killing your content - it means making it easy for the vision impaired. Here's a tip ... turn your mobile screen onto half power and try to read a site. How does it look in the light and the dark?

#6. Use 'skip to content' links

Imagine nodding your head 30 times before you read the main content! People with a print disability have to do this if you don't allow them to skip the menu. Actually, that's the same for using heading tags, H1 to H4 help search engines and people with a print disability navigate your site.

Oh, and don't hide the link off screen! Vision impaired people often use magnifiers and look for those links manually (not via keyboard).

#7. Stop using popups

At least, stop using those that we can't press 'esc' to get rid of. Did you know our software basically can't get into those popup boxes? And usually we end up reading what is behind the box - it looks greyed out to you, but not to us.

If you're going to use pop-ups:

• Make them so they can be dismissed with the 'esc' button.
• Make them so our software can read the box, not the text behind.
• Give details of an alternative way to find the content or fill in the form - 'or go to our xxxx page for more details'.

#8. Text resizers

Personally, text resizers are far less important than skip to content links. This is because a person with a print disability (including the older generation) will use either windows magnifier or some specialist product - like zoom text, magic eyes or other free software. In my experience text  resizers generally destroy mobile content - and are even less responsive than pinching or using core mobile accessibility features.

Also, with adaptive technology resizing the text, the user can turn it off and on so they can find themselves on the screen (some zoom so they can only see 1/8 of the screen at a time). That said, text resizers may still be relevant and worth putting in for government sites - just not a top 10 priority for me.

#9. Font icons vs image icons

Those who use magnification may only see around 1/8 of a site at a time, and those using mobile phones will usually load the image free versions - by hitting the 'reader' button. I could write a post on the fact that most 'image icons' pixelate to the extreme at max zoom, but font icons don't (well, not as much anyway).

#10. Video transcripts

There is no point putting a YouTube video on a website if it is totally silent, nor is there any point putting one on that doesn't have a transcript or way for the hearing impaired to follow it. That would be like having a global audience or client base, but only providing information in Japanese.

Just for kicks, get a technical YouTube video with no speech then close your eyes. Note - closing your eyes does not replicate blindness because you can just open them again, but it's a fun exercise.

Conclusion

Like anything, there is a balance between functional and strict adherence to the rules. Like my website, my clients sites are not 100% accessible / W3C compliant. They are accessible - and search engine friendly. They are logical and well-contrasted, but also have style and features for impact. 

Please remember, this list isn't a comprehensive list, just a starting point.

Resources

These sites provide guidelines and tools to check your site:

These sites provide screen-readers you can use to test your desktop site with:

I don't recommend Sitecues: it's not what I would call easy to install or effective for those with a print disability

How many millions of people have a print disability in the world? How many potential clients? Whether you build sites in Joomla, Drupal, WordPress, pure HTML or any other platform, I hope I've convinced you that this problem and is worth taking seriously.

About the author

Jason is based in Melbourne, Australia . He is a lawyer, Australian registered migration agent and also provides website services with a focus on practical accessibility for the broadest possible global audience.