WAI-ARIA (Accessible Rich Internet Applications)

More and more complex web applications with custom controls keep appearing in the web and in intranets. WAI-ARIA (Accessible Rich Internet Applications) is a standard to ensure that these applications can be made accessible for screenreader users.

Web developers and designers often build custom controls for interfaces that cannot be easily built (or appropriately styled) using native HTML elements alone. Examples are tabpanels, comboboxes (i.e., text inputs with a drop-down menu), hierarchical trees, or slider controls.

Such custom controls often create problems especially for blind users. While standard HTML links, buttons or text inputs are easily recognised and put out by screen readers, information on the role, name and state is absent in custom controls that have been built from unspecific elements like div and span, some Javascript, and a clever use of background images.

For these cases, WAI-ARIA comes to the rescue. ARIA is a draft W3C standard and stands for Accessible Rich Internet Applications. ARIA offers a number of roles and properties that can be added as mark-up to custom controls in order to pass their intended semantics to users of assistive technologies. A div element with role="button" will be put out by a screen reader in the same way as a native HTML button. (It is important to note that apart from adding suitable WAI-ARIA roles and properties to the custom contrl, the developer must also implement the correct element behaviour in JavaScript and ensure that the element will receive keyboard focus.)