Structural Roles
Introduction
ARIA provides a set of roles that convey the accessibility semantics of structures on a page. These roles express the meaning that is conveyed by the layout and appearance of elements that organize and structure content, such as headings, lists, and tables.
some host languages, such as HTML, include elements that express the same semantics as an ARIA role.
For instance, the HTML <p>
element is mapped to accessibility APIs in exactly the same way as <div role="paragraph">
.
The ARIA and HTML specifications refer to this mapping of HTML elements to ARIA attributes as implied semantics, i.e., the implied ARIA role of the HTML <p>
element is paragraph
.
When developing HTML, it is important to use native HTML elements where ever possible. Do not use an ARIA role or property if it is possible to use an HTML element that has equivalent semantics. Circumstances where it is appropriate to use ARIA attributes instead of equivalent HTML are:
- When the HTML element cannot be styled in a way that meets visual design requirements.
- When testing reveals that browsers or assistive technologies provide better support for the ARIA equivalent.
- When remediating or retrofitting legacy content and altering the underlying DOM to use the HTML would be cost prohibitive.
- When building a web component to compose a custom element and the element being extended does not convey the appropriate or sufficient accessibility semantics.
The following table lists all structural roles defined in ARIA 1.2.
All Structural Roles
ARIA Role | HTML Equivalent |
---|---|
application | No equivalent element |
article | article |
blockquote | blockquote |
caption | caption |
cell | td |
code | code |
columnheader | th |
definition | dd |
deletion | del |
directory | No equivalent element |
document | No equivalent element |
emphasis | em |
feed | No equivalent element |
figure | figure |
generic | div, span |
group | No equivalent element |
heading with aria-level="N" where N is 1, 2, 3, 4, 5, or 6 | h1, h2, h3, h4, h5, h6 |
insertion | ins |
img | img |
list | ul, ol |
listitem | li |
math | No equivalent element |
none | No equivalent element |
note | No equivalent element |
presentation | No equivalent element |
paragraph | p |
row | tr |
rowgroup | tbody, thead, tfoot |
rowheader | th |
separator (when not focusable) | hr |
strong | strong |
subscript | sub |
superscript | sup |
table | table |
term | dfn |
time | time |
toolbar | No equivalent element |
tooltip | No equivalent element |