Authoring accessible Web content

This began as a post for the JAG internal wiki. After I’d gone to all the trouble of looking everything up and spelling it right, I thought it would be worthwhile to mirror the post here.

Here are a couple of basic pointers for building Acessible Web sites. I generally am interested in Accessibility, because it’s part of the Semantic Web vision. When I come across a relevant article, I tag it with accessibility. But I became especially interested after the National Federation for the Blind sued Target, basically because Target refused to add ALT tags to their images.

In no particular order, here’s list of core techniques:

  • Add descriptive ALT attributes to all images.
  • Don’t use any more images than you have to, don’t use spacer images.
  • Provide alternate navigation for image maps and Flash.
  • Provide “skip this content” links at the beginning of each logical block of content.
  • Use h1, h2 etc tags to clearly label logical blocks of content.
  • Hide any accessibility elements that are not part of the layout by giving them absolute positioning and a left and top attribute of -500px. Do not use display: none or visibility: hidden to hide accessibility content. No compliant browser, including a text browser, will display elements hidden in that way.
  • Remember that the Google spider sees almost exactly the same thing as a text2speech browser, so any SEO best practices you can apply, will also help with accessibility.
  • For DHTML and Ajax, provide “control keys” for all functionality; in order to support users that can see the page in a regular browser, but who cannot use a mouse.
  • use color combinations that are distinguishable to color blind individuals. This is especially necessary when using a colored font on a colored background, or when using colors to indicate application state, login status, etc. Remember that there are two other types of color-blindness in addition to the most common, red-green colorblindness.
  • Use the TITLE attribute, and use it liberally. TITLE can be applied to any HTML tag.

If you haven’t already, you will want to install the Fangs extension for Firefox, which emulates a text2speech browser. Be sure to read the install documentation completely, and remember to make the specified configuration changes to Firefox via about:config.

Leave a Reply

You must be logged in to post a comment.