March 24, 2009

WAI-ARIA: a high level summary

Making sites accessible for disabled users has always been an afterthought. Right now, making sites usable for low-vision and blind users is a cobbled together assortment of best practices and hacks. Image alt tags, semantic markup, and “skip to content” links are a few of the techniques we use to address the problem.

The problem is that these were added after the fact–and that they were designed for the static Web. It comes with it a number of problems.

• Custom components are common. You can make a thumb-slider out of a set of DIVs and some images, for example. But the only elements that are natively navigable through the keyboard are links and form elements.
• In-page state changes, such as AJAX updates are also common. To assistive technology users, however, it can be difficult or impossible to determine what has changed on a page.

Enter WAI-ARIA

Web Accessibility Initiative’s Accessible Rich Internet Applications (WAI-ARIA) is a specification designed to provide better hooks for assistive technology devices. To Web developers, it’s a set of attributes that bolt on to the HTML elements you know and love.

These attributes help you provide instructions to AT devices, such as:

• Describe what objects are, using Roles. For example, you can define how one set of DIVs is a section vs. another set of DIVs, which represents a progress bar. This helps navigability of the page by providing much-needed context.
• Describe the States of objects, like “this progress bar is at 34%.”
• Make any element keyboard focusable — or not. This overrides the tabindex attribute and allows it to be applied to any visible element. Users can tab more effectively though the areas of your page.
• Designate places on a page to receive updates and changes with Live Regions. This is kind of analogous to the yellow fade technique, which is commonly used to visually indicate a state change on an AJAX-y page.

Support Today

Support for ARIA is strong and building, with Firefox 3, Opera, WebKit / Safari, and IE 8 actively implementing this spec. Freedom Scientific’s JAWS screenreader is also building in support.

Adding ARIA attributes won’t break current pages , or obsolete old browsers from your site. It only makes inaccessible widgets more accessible. It will, however, make your pages invalid XHTML or HTML. This is because those namespaces do not acknowledge these new attributes. HTML 5 is expected to include these, whenever it comes out. Nonetheless, the idea of avoiding ARIA because it doesn’t validate is a weak argument.

If you’re designing a site that you expect will receive traffic from visually impaired users, it makes sense to check out ARIA.