ARIA - Accessible Rich Internet Applications

ARIA is a complement to HTML. It confers an additional semantic meaning.

Basic rules for ARIA

When faced with the choice between native HTML and ARIA, you should always prefer HTML.

ARIA should only be used if you know what you are doing and fully understand the function. Bad ARIA is worse than no ARIA. The ARIA role Application for example can make a website unusable for the blind.

A website does not become accessible alone with ARIA

ARIA does not add any functionality to the website. In particular, if you use Javascript, you have to program additional functionalities such as keyboard usability.

The tasks of ARIA

ARIA fulfills various functions within websites.

It adds additional semantics to the HTML. The Navigation role can be added to navigation to make navigation more accessible with assistive technologies. These are the so-called landmarks.

ARIA is particularly important for programmed elements such as buttons, sliders and so on. ARIA can also be added there to add semantics for assistive technologies. These are the so-called widget roles.

If you add ARIA to an existing HTML element, the role of the HTML element is overwritten. Let's say you designate a link as a button, then it will behave like a button for assistive technology. So it doesn't appear in the list of links or can't be opened in a new window.

Name - Role - Value

The triad of accessibility is name - role value or name - role - value.

Name is the designation of an element or its content.
Role is the task of the element, for example Headline.
Value, if present, is the status of an item such as selected, unselected, expanded, and so on.

Native HTML elements bring this information with them. With Javascript, they must also be communicated.

ARIA can communicate not only the semantics but also the status of an element. This is interesting for form elements such as radio buttons, accordions and other elements.

The status can be "expanded", "selected" and so on.

ARIA is also interesting for marking mandatory fields in forms. Corresponding fields are then communicated by the assistive technology as mandatory fields.

Properties

ARIA can also communicate that elements have sub-elements. Or other properties.

A navigation point can have a dynamically foldable sub-navigation. ARIA can communicate that. But keep in mind that ARIA does not automatically make the sub-navigation accessible as well via keyboard.

Relations can also be communicated by ARIA. For example, it may be important to know that an element is a child element and what the parent element is.

Dynamic Events

Single-page applications are becoming increasingly important. Since dynamic changes often take place, it is important to communicate these to the assistive technology.