Making sure your website is accessible is both an important business and legal issue. In 2006 Target was sued because their website was inaccessible to the the blind. With an ever increasing number of featuring javascript to create dynamic pages, the issue of how to to keep the websites accessible must be considered.
On any dynamic website that is driven by javascript there are two levels of accessibility that need to be considered before making the site live for the world to see and use. The first is people who have javascript disabled, will your site work for them? The next is people who have disabilities, what will their experience be when they use the site?
The first one can be handled by what is know as progressive enhance or graceful degradation. There are essentially two separate viewpoints of the same solution. With progressive enhancement the idea is to make sure your site works without javascript and then slowly start adding the interactive features unobtrusively. Graceful degradation, on the other hand, looks at the problem in reverse by making sure that when javascript is disabled the site still falls back to the basic functionality. Christian Heilmann has a great guide to developing with progressive enhancement where he outlines seven rules for progressive enhancement. The rules can be summed up as:
- Separate as much as possible
- Build on things that work
- Generate dependent markup
- Test for everything before you apply it
- Explore the environment
- Load on demand
- Modularize code
The second level is handling users with disabilities. This can be accomplished by using what is know as the ARIA specification. This basically consists of adding specific attributes to html elements that will have interactivity. The team behind Google Reader recently went about implementing this specification to their product. They then took what they learned and created a library that will automatically inject accessibility enhancements called AxsJAX. John Resig, creator of the jQuery library, also gives a quick overview of how to use ARIA attributes to specify that a certain region of the page will be dynamically updated. John gives the following example code for a section of code updated by an ajax request:
<p id="users-desc">A list of the currently-connected users.</p>
<ol aria-live="polite" aria-relevant="additions removals"
aria-describedby="users-desc" id="users">
<li>John</li>
<li>Mary</li>
<li>Ted</li>
<li>Jane</li>
</ol>
The Filament Group has a few more guides for using the ARIA specification to develop interactive components that are accessible as well. The first one with developing accessible graphs using the canvas tags. The are based off tabular data so that if javascript is disabled they will degrade nicely. The next one details how to create a very attractive accessible slider control using javascript. This one uses data from a select element to build the slider so that control will still work and have similar functionality without javascript. Both components will automatically add the appropriate aria attributes to the inserted html. Another blogger, Marco Zehe shows just how easy it is to start using the ARIA specification on your site in his two articles on easy ARIA tips. The first is on using aria required to denote a required field. The next covers using aria-labelledby and aria-describedby in order to have form fields complete a sentence such as "Delete History after X days".