Contents
Cal Poly Pomona

Easy 508: Simple guide to web accessibility

Making web pages accessible to people with disabilities can sometimes be challenging, especially when existing, inaccessible sites must be fixed. But if you're making a site from scratch, there are a few simple rules that will help you avoid 99% of all accessibility issues.

Text is versatile

Text, in a web page, PDF, or Word document, is almost always accessible. It can be seen, it can be magnified for people with vision problems, and it can be read aloud (by a program called a screen reader) for people who can't see it at all. The text parts of a web page are already accessible.

Keep your pages navigable

Don't use fancy Javascript drop-down or roll-out navigation

First, drop-down menus aren't as useful as they seem; studies show that most users find what they are looking for faster with ordinary hyperlinks. Second, if a menu doesn't work without Javascript, there will be users who will be unable to navigate your site. Third, although many screen readers support Javascript, many of these menus are linearized in a confusing fashion. Fourth, many of these systems don't work in some browsers even with Javascript turned on.

There are a few drop-down menu systems that are accessible, but most sites really don't need them.

Don't use Flash for navigation

Although Flash can be made accessible, it's harder to test than a regular web page, and more important, if someone doesn't have the Flash plugin, they can't navigate the site.

Use image links with care

Back in the 20th Century, many sites used images of text, rather than actual text, as navigation links. There is nothing wrong with that, as long as the alt is the same as the text in the image, so that this link would have alt="this link" rather than alt="Click here to go to this link", or worse, alt="Click here".

Provide alternate text for every image

Images with content important to the site

If the image conveys content, so should the alternate text, in a brief style similar to how you might describe an image over the telephone. The same image might have different alternative text in different contexts, depending on the role it plays on the page:

Mare with foal     This foal is one of a many born each year at the Arabian Horse Center     Good postnatal nutrition is important for both the mare and her foal

The alt of the image on the left is "Mare with foal", in the middle is "This foal is one of a many born each year at the Arabian Horse Center", and on the right is "Good postnatal nutrition is important for both the mare and her foal."

Images of text

With very few exceptions, the alternate text of an image of text should be the same text as the image.

Images that are visual decoration only

If an image has no meaning except as visual decoration or as an invisible spacer, there is no point to giving it "meaningful" alternative text: Users will not want to hear "border graphic" or "transparent image" over and over again. Every image must have an alt, but in this case the alt should be empty (alt="" in the HTML). It is even better if visual decoration can reside in the background, either of the page or of its individual parts.

Pay attention to color and contrast

Never use color as the only way of conveying information

For example, if a word is set off in color, the emphasis will not be apparent to users who can't see the color, either through visual problems, perceptual problems, or monochrome monitors. If the word is also italicized or bolded, that information is even conveyed to users of most screen readers. There's no harm in using color, and for people with adequate color vision it can provide additional information, but never rely on it by itself.

Keep adequate contrast between your text and background

Low contrast pages cause problems for some users. If you're not sure whether your text has enough contrast against the background, it probably doesn't, although there are tools that will tell you precisely.

Provide alternate content for all multimedia

It is possible to add captions and description to video, and to make Flash accessible, but these techniques are often difficult. The technique that always works is to provide alternate content, often a link to a text file that describes what happens in the multimedia.

  Did you find what you were looking for?