There are a number of times where I may be called upon to test the accessibility of a website. If I’m asked to do it as part of my role as one of the Accessites team, then I will follow the publicly available Accessites Grading Checklist. If I’m asked to do it in my role as a web developer for a Local Authority, then I will use the rules and methods that are agreed to be appropriate for that task. I can’t speak about either of those sorts of testing here. Another thing I’m not talking about here is how I would ensure a site complies with the WCAG checkpoints. If that’s what you want to know, I suggest you follow the link and learn more about the checkpoints themselves.

So, what am I talking about then?

I’m talking about simple, small scale tests which can be done relatively quickly on a page by page basis and will show up most of the major accessibility problems. Doing this won’t catch every possible accessibility issue, but adhering to every WCAG checkpoint wouldn’t necessarily solve everything either.

What do I need?

You need more than one browser. At home I’m limited to one platform, but I can test with multiple browsers. Download Opera 8.5, download Mozilla Firefox 1.5 and download Internet Explorer 6.0. Some people will argue that Internet Explorer (IE) isn’t the most standards compliant browser. They’re probably right, but it’s also by far the most widely used browser so you need to test how your sites will look in it. The more browsers the better, but this is what I use. If you have the facility (at home, I haven’t) it is also advantageous to test on a different platform – for example use the Safari browser on a Mac.

Next, you need to download various add-ons for the browsers and other little applications to make your life easier. Download the Web Accessibility Toolbar for IE. Download Chris Pederick’s Web Developer Toolbar for Mozilla Firefox, download the HTML Validator Firefox Extension. Take a deep breath, you’re nearly there. Now, go into Opera and select Voice from the main bar (if the main bar is not shown, you can make it visible from the View / Toolbars menu). It will probably tell you it needs to download another big file. Do what it says.

Okay, I’ve got the software, now what do I do?

Use it. Navigate to the page you want to test. I’m going to assume it’s on the Internet somewhere. For the sake of argument, let’s use this page.

Testing styles

Using one of your web developer toolbars, disable css. The site will look different. In fact, it will probably look crap. That’s to be expected. The point is, is the site still usable? Is all of the information still there? Could you still carry out whatever functions you had to?

Testing images

This is more difficult because you’ve got to consider whether or not the alt text is an appropriate equivalent to the image.

First, switch off all images in one browser. On the firefox toolbar, this is Images / Disable All images; on the Internet Explorer toolbar, this is IE Options / Toggle Image. If you use the IE one, make sure to toggle them back on when you’ve finished.

Okay, now you’re looking at the page without images. CSS background images will have disappeared altogether, and only the alt text of any images found in the web page will remain. Now, compare the site without images to the site with images in a different browser. Has any meaningful information been lost? Does the alt text adequately describe the image?

Note that when an image is a logo, as my Badly Drawn Cat logo is, the consensus appears to be that there’s no real need to repeat the word ‘logo’. Just indicate the company name or whatever.

Validation

Does your site validate? Go to the W3C‘s markup validator and enter the URL you wish to validate. If it doesn’t validate, make sure you’ve got a DOCTYPE, and try again. If you don’t know what a DOCTYPE is, then why not see what that standards guy has to say about document type definitions. If you do have a DOCTYPE and you still don’t validate, then go fix it.

Can I use the site without a mouse?

Well, can you? Try using TAB to move around the page. Does it all follow in a logical order? Does it make sense? Can you do everything you need to be able to do without using the mouse?

Note that if something is only available with a mouse, you’re preventing a lot of people from mobility impairments from accessing it. If that’s something important to the site, then it’s critical you fix it.

On the other hand, if it’s just something like colouring hyperlinks on mouse hover, then this is fine – users can still acess all the functions of the site without it (although it’s perfectly possible to style links to change colour when selected by the keyboard – you just have to use the right pseudo classes).

Resizing Text

We’ll only use the built in function of Internet Explorer for testing this, as method of adjusting text size is probably the most limiting – but also the most widely known. Use View / Text Size and change the text size selected. Does the text size on your page change? If it does, then your users have some degree of being able to scale text sizes to suit their vision (although specifying font-size in the css in either em or % units is ideal).

Scripting

Not all browsers and not all assistive technology support the use of scripting. For this reason you should always check users can still carry out the functions of your page even with scripting disabled (untoggle javascript and activeX using the Web Developer toolbar for IE or use the disable java and disable javascript options from the disable menu on Chris Pederick’s toolbar for Firefox. In other browsers, these options are normally found somewhere within the settings.

It is important to note that javascript can be used to offer additional functionality (e.g. the facility to find an address by simply typing in a postcode) provided that the function of the page can still be carried out (e.g. the entire address could be typed in).

Popups

Does anything on your site cause a popup to appear or a new window to open without informing the user first? If so, take it off now. Not only is it bad for accessibility, but it really annoys the majority of users.

Multimedia

Do you have audio files available? Do you have video files available? If so, you should supply text transcripts of any audio files, otherwise this information is simply unavailable to someone who is deaf. Similarly, any information available only visually is not available to someone who is blind – if you can, provide audio captioning. If not, ensure that a text equivalent of the same information is available.

Sound and Skip Navigation

Now it’s time to use that fancy voice thing in Opera. Go to your page, choose Select All from the Edit menu and press V. How many pages on any website would you have to visit before you really don’t want to have the header and navigation menu read out to you again? I reach my limit at around one page.

Bear in mind that this doesn’t have the functionality of a full screen reader, for example, it will not tend to read out title attributes. Also a user of screenreader software can follow a link as soon as they reach one. In the case of this site, this means they could follow my first skip navigation link and end up directly at the page content. My site isn’t perfect: currently you’d have to sit through the ‘Mates’ and ‘Sites’ being read out to you every time, but that’s on my long list of things that need doing. I will fix it eventually, I promise.

Also remember that a screen reader can simply extract the links from the page and read them out to the user out of context. This is particularly helpful when a user can guess the page they’re about to land on won’t have the information they want (you wouldn’t expect to find a particular book on the front page of Amazon), but they expect a link on that page (e.g. search) to move them in the right direction, and they have no particular desire to listen to the rest of the page. It speeds up their browsing experience.

Of course, this only works if links are coded properly. If you use something like click here to go to whatever it is, and you do that for every link, the screenreader user would just hear “click here. click here. click here”. Which, let’s face it, isn’t very helpful. Users of the internet know what links are, and how to follow them. Don’t tell them how to make the link work, tell them where it’s going to take them instead.

Showing Off

Does your site have fancy bits? Do you have graphics that shoot all over the page? Do you need them? Do they really serve a purpose beyond showing people how clever you are for being able to get it to do that? If you can’t produce a justification that says the whole purpose of the page can’t be achieved without it, then get rid of it. I don’t care if it does look nice.

And there you have it.

Your site will not necessarily be accessible to every user, but you’ve at least considered the needs of most users and have made a good start.