User Tools

Site Tools


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.


accessibility/aria/roles.txt · Last modified: 2023/07/19 11:50 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.