Accessible Rich Internet Applications

WAI-ARIA ( W eb A ccessibility I nitiative - A ccessible R ich I nternet A pplications ) is an initiative to improve websites and web applications to make them more accessible for people with disabilities, especially for blind users who use reading programs.

ARIA is a technical specification that was developed by members of the Web Accessibility Initiative . ARIA has been a recommended web standard of the World Wide Web Consortium (W3C) since March 2014 .

Concept and functionality

ARIA uses the JavaScript and Ajax techniques . ARIA is a purely semantic extension for HTML that does not change the layout of a website . The accessibility of dynamic pages like in Web 2.0 with its Rich Internet Applications and the general usability can be improved.

ARIA allows web pages (or parts of a page) to refer to themselves as applications rather than static pages. To do this, information on roles, properties and states is added in dynamic web applications. ARIA is intended for use by developers of web applications, browsers , assistive technologies and programs for verifying accessibility .

WAI-ARIA consists of four components:

Landmark roles

allow the semantic assignment of a role to HTML constructs. This allows screen readers to identify the task of a UI element that cannot be derived from the HTML elements themselves. Examples are sliders or trees . For some of these roles there have been dedicated HTML elements since HTML 5 .

ARIA attributes

ARIA defines some additional attributes such as aria-requiredor aria-invalidthat can be used for all HTML elements. They can be used, for example, to mark the content of an input field as invalid, for example if there is no @ sign in an email address or two passwords entered (for confirmation) do not match.

Live regions

are parts of a page that are updated at irregular intervals. When ARIA is implemented, these changes can be automatically recognized and spoken by screen readers.

States and Properties

are used for proper JavaScript widgets (such as a divlist of options consisting of elements) to mark out semantically significant properties of the current state. For example, the keyboard navigation including the highlighting of the currently active element must be implemented in your own JavaScript widgets . So that the information about which element is currently active is not only available optically through highlighting, but also navigational aids for the visually impaired, activedescendantthe currently focused element can be shown with. As a semantic extension, ARIA provides a standard for marking such information.

See also

• Universal design
• Web Content Accessibility Guidelines

Web links

• W3C overview of WAI ARIA
• Aaron Leventhal from IBM / Mozilla about ARIA (German translation)
• Introduction to WAI ARIA by Gez Lemon in the Opera developer blog (German translation)
• Articles about ARIA in Marco's Accessibility Blog
• Posts about ARIA on the Paciello Group's blog

Individual evidence

1. ↑ http://www.w3.org/TR/2014/REC-wai-aria-20140320/ accessed on June 14, 2014
2. ↑ about aria-invalid and role alerts , Marco Zehe