Accessibility Matters

I’ve long been a fan of making websites accessible (Section 508 -accessibility to people with disabilities) and if any of you have seen my business card, you might also know I am a big fan of the checklist, but Derek Featherstone’s talk at the Web App Summit explained why it’s critical to do more than just what is required for compliance.

Here’s a few great ways to make your site accessible:

1. Order your code for screen readers. The screen below shows a example where someone using a screen reader might not know they are on the “Advanced Search” page. This page layout is fine, but the code needs to be ordered so the screen reader reads the “Advanced Search” title first.

*

2. Choose your copy carefully. People accessing the page below using a screen reader thought that the heading “News for September 22, 2007″ is a link to the news archive, but it’s not. The word “Highlights” is much better than the word “News” for the news summary page below.

*

3. Use buttons or custom controls for map navigation. There are no accessibility standards for maps. So put your map controls in a logical order and make them work with a keyboard. When voice recognition systems cannot recognize spatial input, they use a grid system as backup. If a user wants to select San Diego on a map of the U.S., for example, a 3×3 grid is displayed and the user says “3″, “click that”, then another 3×3 grid is displayed in that area etc… This grid method is time consuming for users. A better solution is Derek’s buttons on the page below:

*

4. Create Accessible Rich Internet Applications. (WAI-ARIA) http://www.w3.org/TR/wai-aria/ This site lists roles and includes information and examples for creating accessible components.

I also learned that vision impaired people are using raised lettering in addition to or instead of Braille. Some people navigate the web with Head or Mouse Wands, which could slow typing to 1 key every 5 seconds. Thanks to Derek Featherstone of furtherahead.com for all this great information!

P.S. Don’t forget to also use a 508 checklist like this one: http://web508.gsfc.nasa.gov/developing/checklist/index.cfm