By: Trenton Moss

October 18th, 2004

Reader Rating: 8.5

Web accessibility has so many benefits [1] that I really do wonder why such a large number of Websites have such diabolically bad accessibility. One of the main benefits is increased usability, which, according to usability guru, Jakob Nielsen, can increase the sales/conversion rate of a Website [2] by 100%, and traffic by 150%.

At this point, you must surely be asking, "So if I make my Website accessible, its usability will increase and I'll make more money out of it?" Well, not quite. An accessible Website is not automatically more usable, but there are many areas of overlap. Let's take a look at them now.

1. Descriptive Link Text

Visually impaired Web users can scan Web pages by tabbing from link to link and listening to the content of the link text. As such, the link text in an accessible Website must always be descriptive of its destination.

Equally, regularly sighted Web users don't read Web pages word-for-word, but scan them looking for the information they're after. Read this paragraph:

How do you think it compares with this one?

The first paragraph has poor accessibility and usability as neither regularly sighted and visually impaired Web users who scan the paragraph will gain any meaning from the words 'click here'. The second paragraph, with link text that effectively describes its destination, is far easier to scan -- users can understand the destination of the link without having to read the surrounding words.

2. Descriptive Form Labels

Have a look at these two checkboxes [5]. They may appear similar but the first one isn't accessible because the prompt text isn't assigned to the box. To make it accessible, we can use the <label for> tag, as we've done with the second checkbox:

<input type="checkbox" id="good" /><label for="good">This is good</label>

Making it accessible in this way has one really big usability advantage: the text becomes clickable too. In the example, click the words, 'This is bad'. Nothing happens, right? Now try clicking, 'This is good'. Its checkbox becomes selected. Checkboxes are small and pernickety for even the steadiest of hands. Increase the clickable region and everyone benefits!

3. Divide Large Chunks of Information

Numerous techniques can be applied to increase a site's usability for a visually impaired user. Visually impaired users have to listen to the information on each page and try to remember it. By structuring information into small, manageable groups, faster comprehension and easier recall can be achieved.

Methods to accomplish this include:

• Use sub-headings to break up body content
• Group form items with the fieldset command
• Use lists

It doesn't take a genius to realise that these tactics increase the usability for sighted Web users too!

4. Provide a Site Map

Site maps can be a useful accessibility tool for visually impaired users as they provide a straightforward list of links to the main pages on the site without any of the fluff in between. Site maps are, of course, useful for everyone, as they provide a means to find pages quickly and help users visualise the structure of a Website.

5. Simple, Easy Language

From an accessibility point of view, this one's important for people with reading and/or cognitive disabilities and for site visitors whose first language isn't the one you write in. From a usability point of view, it helps everyone.

Reading from computer screens tires the eyes [6] and is about 25% slower than reading from paper. As such, the easier the style of writing, the easier it is for site visitors to absorb your words of wisdom. Wherever possible, shorten your sentences. For example, use, 'apply' instead of 'make an application' or 'use' instead of 'make use of'.

6. Consistent Navigation

Consistent navigation across pages is also an important way to maximise a site's accessibility to those with reading and/or cognitive disabilities, but again, everyone benefits. Each time you visit a new Website, it takes you a few seconds to adjust to the unique layout and user interface of that page. Imagine if you had to do that every time you followed a link to a new page!

In reality, most sites do have consistent navigation across most pages. The main culprit for falling foul of this guideline is the homepage, which some Websites structure quite differently to the rest of the site. By having a consistent interface across the entire Website, we can instantly locate the page content without having to look around for it.

As you know, navigation consistency is a basic principle of Web design that's no more or less important on accessibility-focused sites. It's an essential that underpins Web design in general.

Regardless of whether you client is interested in accessibility or usability, these tenets still stand. So if you're ever in doubt, refer to those principles! They're usually fairly accessibility-minded.

7. No Unannounced Pop-Ups

For those of us who use screen readers, pop-ups can be a real accessibility nuisance. Screen readers read out the content of whichever window is located on the "top" -- above all the others.

Pop-ups that display over the top of the main Website will always be read out first, before the content of the actual site. For visually impaired users, this can be frustrating -- they may not realise that what they're hearing isn't the 'real' Website.

Pop-ups are bad for accessibility. As for usability, I'm sure you hate pop-ups as much as I do! Many toolbars, such as the Google toolbar [7], now come packaged with a pop-up blocker to allow you to surf the Web without the irritation of new windows popping up.

8. Use CSS for Layout

CSS-based sites generally have a greater ratio of content to HTML code, so they're more accessible to screen readers and search engines alike. Websites that use CSS for layout can also be made accessible to in-car browsers, WebTV and PDAs. Don't underestimate the importance of this! In the year 2008, it's estimated that 58 million PDAs will be sold worldwide [8].

As well as improved accessibility, CSS-based Websites have one large usability benefit: increased download speed. Broadband isn't as widespread as you may think. In the UK, for example, just one in four Web users is hooked up to broadband [9]. Improve the download speed of your Web pages and you could gain a great usability advantage over your competitors.

9. Make Transcripts Available for Audio

One group of Web users with special accessibility needs is the hearing-impaired. These users need written equivalents for audio content. The provision of transcripts is in fact highly beneficial for all users. Many of your site visitors probably can't be bothered to wait for your 3Mb audio file to download and start to play. They may prefer a quick outline of what's contained in the audio content.

By providing a transcript that's broken up by sub-headings, with the key terms highlighted, non-disabled site visitors can skim to quickly get a general idea of the content. They can then make a more informed decision about waiting for that audio file download.

10. Screen Flickering and Movement Avoided

Some epileptic Web users must be careful to avoid screen flicker of between 2 and 55 Hz. Web users with reading and/or cognitive disabilities and those using screen magnifiers will struggle to keep up with scrolling text (if you do have scrolling text, be sure to provide a mechanism to stop it).

In addition to being a bad idea for accessibility, neither flickering nor scrolling text is good for usability. The former can be distracting when you're trying to read and you see something flash out of the corner of your eye; the latter isn't ideal as you have to wait for content to slowly appear.

Think about it: when you see scrolling text, do you drop everything so you can read it as it gradually materialises? Or do you just ignore it?

The other disadvantage of scrolling or changing text is that you might see something you want to click on, but before you know it, it's gone. Then you have to wait 30 seconds for it to re-appear again!

Conclusion

With all this overlap between Web usability and accessibility, there's no excuse for not implementing basic accessibility on your Website. Outside the ethical arguments, there are many reasons to make your Website accessible, one of the main ones being that its usability will be improved. No one can argue with that!

Stay tuned! Tomorrow, Part 2 of this series reveals the second hidden benefit of improved accessibility.

[1] http://www.sitepoint.com/article/1313
[2] http://www.useit.com/alertbox/20030107.html
[3] click here
[4] about our widgets
[5] http://www.sitepoint.com/examples/accessibilitybenefits/checkboxes.html
[6] http://www.useit.com/alertbox/whyscanning.html
[7] http://toolbar.google.com/
[8] http://www.etforecasts.com/pr/pr0603.htm
[9] http://www.statistics.gov.uk/pdfdir/intc0504.pdf