By: Trenton Moss

August 7th, 2006

Reader Rating: 9

When creating accessible web sites, most web developers and web managers follow the W3C's Web Content Accessibility Guidelines [1], or WCAG for short. And rightly so -- after all, these guidelines are the most comprehensive accessibility resource on the Web today.

The first version of these guidelines was released in 1999. The upcoming release of version two is somewhat dubious, sparking discussion as to whether this new version is an improvement or, in fact, a step backwards. The very concern over this new release is a stark reminder that the guidelines are just that: guidelines, and should not always be taken literally.

To ensure that your web site provides advanced accessibility features, you'll need to venture further than these recommendations. In this article, we'll look at some of the techniques you can implement to achieve advanced accessibility, beyond the guidelines.

Hidden Text

Hidden text can be very useful for screen reader users. If these users are unable to understand a particular section because there is not enough text describing the section, then you can fix this very simply by creating the extra information and hiding it from sighted users. While there are those who insist that text delivered to visual and non-visual browsers should always be identical, my experience is that providing additional context to visually-impaired readers benefits them greatly.

Of course, while this additional text might be extremely useful for screen reader users, it may not be visually favored by sighted users. For this reason, we hide the text.

There are several ways in which you can hide text, each with differing levels of support. The following simple CSS rule is the one I've had the most success with.

.hidden {
position: absolute;
left: -9000px;
top: 0;
}

This rule positions the text off the screen, hiding it from visual users. You can then apply it by assigning an attribute class="hidden" to any text that you want to hide from visual browsers. Easy!

If you're tempted to use display: none or display: hidden to hide additional text, be wary of the myth that screen readers ignore style sheets completely -- they don't, and most screen readers won't read text that's hidden using display: none or display: hidden.

You may wish to add hidden text to provide additional information for:

• Headings - Every single section on each page should have a heading placed immediately before it. This way, screen reader users always know that the preceding section has finished, and a new section has begun. For example, before the main navigation begins, insert a heading labeled "Site navigation".
• Form labels - Every form item must have a label immediately preceding it, otherwise screen reader users won't know what the form item is about.
• Date of birth fields - DOB fields with separate fields for date, month and year, are common culprits for omitting field labels. To make these fields more accessible, place the Visible "Date of birth" label before the three form fields, and then insert an invisible label before each of the other two fields, "Month of birth" and "Year of birth".
• Skip links - A skip link is an invisible link placed at the top of an HTML file that allows users to "skip" to different content areas within that page. Skip links are extremely useful to both screen reader and keyboard-only users, allowing them to jump straight to the content they need without having to work through the navigation and other superflous items on the page.

Succinct, Front-loaded and Conventional Link Text

As a method of browsing through a page, screen reader users usually have the ability to call up a list of links on a page, and jump directly to the link in which they're most interested.


Links for a site as viewed in the JAWS screen reader

It's common knowledge that the link text you use should make sense out of context, and this is indeed a W3C guideline. Link text such as "Click here" would, obviously, make no sense in a list like the one shown above. It's also crucial that link text is:

• Succinct - Keep link descriptors to-the-point so that it's quick and easy for screen reader users to work through this list.
• Front-loaded - Place the most relevant words in the link text at the beginning of the phrase, so that screen reader users can understand the meaning of the link immediately. If they're not interested in it, they can skip to the next one. "Click here to find out more about our services" is a good example of bad front-loading. "Services" is a much more useful as a link text phrase in this instance.
• Conventional - Avoid using buzz-words or obscure alternatives to commonly understood terms. This will allow screen reader users to alphabetise the list and jump to the link they're looking for. For example, if you labelled your "Contact us" link "Enquiries," it would be more difficult for screen reader users to find your company's contact details.

Link text is additionally important for users who find it difficult to read online, such as screen magnifier users, and those with learning difficulties and dyslexia. When these users scan through web pages, they often won't be able to make out speficic words, seeing shapes and colours instead. Anything that's in a high contrast colour is obvious as a link, so they'll often stop and read it simply because it stands out.

Checking link text using the freeware screen magnifier ZoomPlus [2]

Succint, front-loaded links that are conventionally worded make it far easier for those with difficulties to immediately comprehend the meaning and destination of a link.

Visible Font Resizer

It's crucial that text is resizable for web users with poor or limited vision -- or so the theory goes. In actual fact, user testing has shown time and time again that few web users actually know how to resize text, or that this functionality even exists.

By providing a visible font resizer, all users are made aware that they can resize the text, should they need to. To find out how to include a font resizer on to your web site, read this article about stylesheet switching [3].

Incidentally, if you don't know how to resize text, simply select View > Text Size in either Internet Explorer or Firefox. Alternatively, scroll with the wheel of your mouse whilst holding down the Control key (Command on a Mac).

Place Instructions First

If you're providing instructions for any functionality that your site offers, make sure that the instructions are placed before the functionality that you're describing. I know it sounds obvious, but it's amazing the number of times instructions are misplaced. Screen reader users listen to pages in the order they're written, so any instructions that come after the subject to which they refer are placed out of context.

Placing instructions first is also crucial for screen magnifier users, who can only see a small section of the screen at any given time, so any obscurely placed instructions are likely to be overlooked.

Web forms are perhaps the most common type of functionality that contain instructions. Be sure that any instructions are placed above the form, and not below it, as these instructions usually include important information explaining which fields are required, and error messages.

Large Headings

Headings are crucial as they help users quickly and efficiently find what they're looking for. Headings are particularly useful for any user who finds it difficult to read online, such as a screen magnifier user or someone with learning difficulties or dyslexia.

When these users scan through web pages, they'll often see shapes and colours instead of words. Using a large font size for headings will enable these users to easily spot important headings.

Focus State for Links

Keyboard-only web users can navigate through web pages by tabbing from link to link (and from form item to form item). However, when you're using this tabbing method it's sometimes difficult to determine your exact position on the page. By assigning a background colour to the focus state of each link, it becomes much easier for users to orientate themselves. This is very simple to achieve with CSS:

a:active, a:focus {
background: yellow;
}

Large Link Target

Many web users with dexterity problems will only use the keyboard to browse through a web site. Some will persevere with a mouse, but with rather limited control. To make it easier for these users to navigate try to increase the area of the link target wherever possible. For example, with vertical based navigation lists, it's easy to extend the clickable area to the full width of the column by assigning the style display: block to each link. See this tutorial on styling lists for more information on accessible link targets [4].

Conclusion

While the W3C accessibility guidelines are important, if you want your web site to be truly accessible then you'll need to venture beyond the guidelines. Following the advice in this article is, of course, a great start!

To really test the accessibility of your site, you should run it through some tests using with both a screen reader and a screen magnifier. You can download free trials of both the JAWS screen reader [5] and the MAGic screen magnifier [6], or try out any number of freeware and shareware alternative tools [7].

[1] http://www.w3.org/TR/WAI-WEBCONTENT/
[2] http://www.gipsysoft.com/zoomplus/
[3] http://www.alistapart.com/stories/alternate/
[4] http://css.maxdesign.com.au/listamatic/
[5] http://www.freedomsci.com/fs_downloads/jaws.asp
[6] http://www.freedomscientific.com/fs_downloads/magic.asp
[7] http://www.magnifiers.org/links/Download_Software/