So, you want your Drupal website to be accessible?

I have been asked to present a small demo of how I test a Drupal site for accessibility at the Drupal Sydney meet up on the 18th of April.

I thought I might pre-empt that demo with a small post about how to give a site a quick 'once over' to check the basics of accessibility.

Its a bit surprising how many developers and front-enders that have never used a screen reader. During a course I did late last year on web accessibility, we were asked to navigate our company websites using a screen reader while the screen was covered or turned off. Its such a simple exercise but not one that I had personally done before. Once you take away a sense that you rely on and then attempt to perform a regular task (such as reading or navigating a web site) it can really be tricky. Particularly if the site was not built to accommodate people who do not have that sense to start with.

Web Anywhere is a web based screen reader that allows you to do this exercise without installing anything (besides Flash, I think.) I highly recommend you give it a go. For the Mac users, if you want something a little bit more powerful, your OS X install already has a copy of Voice Over on it (as does your iPhone if you wish to test mobile accessibility) and the Windows people can check out NVDA which is a free open source screen reader. So, you don't need to spend a cent to do some pretty interesting research on your sites.

I'm not sure of a Linux screen reader, please let me know in the comments if you recommend any.

EDIT: Bill Fitzgerald in in the comments says

ChromeVox is a Chrome-based screen reader that works with Linux: https://code.google.com/p/google-axs-chrome/

For me, the screen reading is one of the final parts of an accessibility test. I test it last because there are so many simple improvements that can be identified before you even put your headphones on.

Run the site through an automated tester

I have used aChecker, but these days I use a few browser-based tools such as the Juicy Studio Toolbar or the WebAIM Toolbar, I'm also a big fan of the Squiz Code Sniffer which is just a bookmarklet. It is super dooper easy to run these tests over your site. The toolbars or the code-pasting in aChecker mean you can test your local sites also before deployment.

A note on testing tools though, these tools have no context, they do not know how the site is being used and will just scan the code for anything that may cause issues. Sometimes this raises false positives and using them is by no means a definitive accessibility test. They should be used to provide insight into any potential problems only.

Try to navigate without your mouse or trackpad

Another simple test, this goes beyond accessibility and nudges usability also. See if you can perform your normal, daily, web browsing tasks with only the tab key and enter/space.

• How well does that cool javascript drop menu work?
• Can you pause that slideshow?
• How long does it take you to get to the main content?
• Does anything change (or do you get redirected) on focus?

What is different when using the keyboard? It doesn't stop at navigation, it needs to be usable.

Remember that you are not only concerned with disabled people

This is a big one, accessibility doesn't mean that you need to only worried about screen readers and tab navigation. What about that IE user? What about the older man who doesn't really 'get' the internet. Things need to work, properly, for these guys too. Even if they don't get the 'full' experience, it should still work and be easy to use.

Read the site using a screen reader

Now we can use our assistive technology. Go over the homepage using your screen reader and think about whether you could understand what was being read out, if you couldn't see it. Ensure that there is context for everything and that the images are announced correctly, they may be missing alternative text or may have misleading or non descriptive alternative text. Do all the links make sense? How many times did you hear a link announced as 'Read More'?
Using your screen reader, see if you can navigate around the site without too many problems. Most installed screen readers will let you browse using ARIA landmarks. How easily can you navigate, and listen to, the footer of the site? Are you able to understand the contact form?

This is by no means a definitive test for any website, but it will give you a basic understanding of what needs to be considered for people who may not be as abled as you. Putting yourself in the shoes of the people you build sites for (however small a percentage these people represent) is the most empowering ability you have as a developer.

Resources

Webaim.org - Good articles and resources
The Paciello Group - Fantastic blog
Vision Austrlia - Blog and forum for accessibility issues
W3C WAI - The Web Accessibility Initiative