Yahoo! User Interface Blog (YUIBlog)

ARIA Plugins for YUI Widgets

For YUI 2.6, a handful of widgets have examples illustrating how to use new YUI ARIA plugins. These plugins make it easy to use the WAI-ARIA Roles and States to make each widget more interoperable with assistive technologies (AT), such as screen readers, and in turn, more accessible to users with disabilities. For example, the following video illustrates how the YUI ARIA Plugin for Carousel improves the user experience of the new Carousel widget for users of screen readers:

Using the ARIA Plugins

Using the YUI ARIA Plugins is easy. Simply include the source file(s) for the ARIA plugin after the widget source file(s) as indicated on the widget’s landing page. That’s it. Currently, the source files for each plugin are available in the YUI 2.6 package on SourceForge, and can also be downloaded from the YUI blog sandbox. In a future release of YUI, the plugins will be served from our CDN.

Browser Support

All YUI ARIA Plugins require the user’s browser and AT support the WAI-ARIA Roles and States. Currently only Firefox 3 and Internet Explorer 8 have support for ARIA and are supported by several screen readers for Windows that also offer ARIA support. Opera also has support for ARIA as of version 9.5, but unfortunately isn’t supported by any screen readers. For this reason the YUI ARIA Plugins are only enabled by default for Firefox 3 and IE 8. To enable the ARIA plugin for other browsers, simply the set the usearia configuration property to true. For example:

var oMenu = new YAHOO.widget.Menu("menu-1", { usearia: true });

Why Plugins?

Rather than integrate ARIA directly into a widget, we chose to deliver this functionality as a plugin for two main reasons:

• Performance: We’ve got many extremely byte-conscious users. And while we certainly don’t want users opting out of a more accessible interface, we need to be respectful of those developers that need to make tough choices on KB weight.
• The right fit: For most widgets (like Menu) there is an ARIA role that is a perfect match. For some, like Carousel, or AccordionView, there either isn’t a clear match, or there are several different roles that could work depending on the circumstances. For widgets that fall into this category we can offer several different ARIA plugins that meet the desired use case.

Widgets with ARIA Plugin Support

The following table illustrates which YUI widgets currently have an ARIA plugin, along with their corresponding WAI-ARIA Roles.

Screen Reader Testing

We’d love the community to help us test these plugins, find bugs and suggest enhancements. As mentioned above, each plugin requires AT that supports ARIA. Two of the leading screen readers for Windows, JAWS and Window-Eyes, support ARIA. Free, trial versions of both are available for download, but require Windows be restarted every 40 minutes. For that reason, the open-source NVDA Screen Reader is the best option for developers looking to test the YUI ARIA Plugins as it is both free and provides excellent support for ARIA.

Find conversations: bloglines | technorati

Share and extend: Bookmark with del.icio.us | digg it! | reddit!