Accessibility of Custom User Interface Components using WAI-ARIA

Web markup languages provide toolboxes of user interface components to be used to enable the development of web applications. However, there are many cases when design specifications require the use of custom components that are not available natively in the toolbox. Developers must then build custom components.

Custom components are built using markup for structure, Javascript to enable behavior and CSS to communicate look and feel, and meaning to users and user agents. Using style alone to communicate the meaning (role and purpose) of a user interface component is one of the biggest barriers to building accessible web applications.

The WAI-ARIA recommendation "provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications" (http://www.w3.org/TR/wai-aria/).

Participants in this session will learn:

1. What accessibility problems are caused by custom user interface components designed without WAI-ARIA?
2. What is WAI-ARIA and what accessibility problems was it designed to solve?
3. What are the benefits and drawbacks of using WAI-ARIA to build accessible custom user interface components?
4. How can Drupal Core's autocomplete and progress widgets be made accessible using WAI-ARIA?
5. Why was Drupal Core's Overlay module not made accessible using WAI-ARIA?