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.
- “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.”