ARIA Roles

An HTML element’s role is what makes it fundamentally different from other elements. In most cases, the role is implicit in the tag; <li> has a role of list item, and <a> has a role of link. An exception is the search role, which does not have a corresponding HTML element and should be placed on a text input.

ARIA provides a way to override tags’ implicit roles by setting the role attribute. However, doing so may cause unexpected behavior in the browser and/or assistive technologies:

• The screen reader will announce the element with a different prefix, possibly implying that different interactions are supported
• Support for keyboard shortcuts might change
• Child elements’ roles might become invalid, causing further interoperability issues

The role attribute is most useful when there is no native HTML element corresponding to an interactive control, like a tablist or a combobox. ARIA roles for complex interactive controls–those consisting of several nested HTML elements–include precise rules about valid parent/child relationships. When it is necessary to insert another element in between the parent and child in order to achieve a visual layout, use role="presentation" to signal that the interstitial elements are not relevant to the ARIA control.

In general, use native HTML elements instead of custom components that rely on CSS or JavaScript and lack semantic meaning.

References

• You Don't Need ARIA For That, Dennis E. Lembrée
• ARIA Authoring Practices Guide
• “Fixing” lists, Scott O’Hara – “CSS can have some damaging affects on the way HTML elements are exposed to the browser’s accessibility API, and developers can be none the wiser to them.”