ARIA document-structure roles are used to provide a structural description for a section of content.
Structural ARIA roles were originally created as a bridge to inform assistive technologies of HTML5 elements that were not yet fully supported in browsers. Some roles, like presentation
, toolbar
and tooltip
, provide information on the document structure to assistive technologies in cases where equivalent native HTML elements don't exist. Other roles, including those listed in the table below, are not needed, as there are semantic HTML elements with the same meanings. In many cases, these equivalent HTML elements have always been supported.
Warning: These structural roles all have semantic HTML equivalents. They are included here for completeness of documentation. Preferably, they should not be used by web authors. Opt for HTML semantic elements instead.
Some structural roles, like suggestion
, don't have HTML equivalents, and therefore have separate documentation. Some structural roles with HTML equivalents, like heading
, have ARIA-attribute requirements. They are listed below with links to their individual role documentation.
Most of the following roles were never needed but were added to ARIA for completeness. We've included them here for completeness as well.
Structural roles with HTML equivalentsThe structure roles with HTML equivalents are listed below:
ARIA role & description HTML Equivalentassociationlist
associationlistitemkey
children and their sibling associationlistitemvalue
. <dl>
associationlistitemkey
associationlist
. <dt>
associationlistitemvalue
associationlistitemkey
. <dd>
blockquote
<blockquote>
caption
figure
, table
, grid
, or treegrid
.
id
is generally referenced by a figure
, grid
, table
, or treegrid
's aria-labelledby
attribute.
aria-label
and aria-labelledby
. <caption>
<figcaption>
code
aria-label
and aria-labelledby
. <code>
deletion
aria-label
and aria-labelledby
. <del>
emphasis
aria-label
and aria-labelledby
. <em>
figure
<figure>
heading
aria-level
attribute is required to indicate the nesting level.
heading
role for more information. h1, h2, h3, h4, h5, and h6 image
img
role. <img>
img
img
role for more information. <img>
insertion
aria-label
and aria-labelledby
. <ins>
list
listitem
elements.
list
role for more information <ol>
<ul>
listitem
list
or directory
.
list
(like <li>
).
listitem
role for more information. <li>
mark
mark
role for more information. <mark>
meter
aria-valuenow
required.
meter
role for more information. <meter>
paragraph
aria-label
and aria-labelledby
. <p>
strong
aria-label
and aria-labelledby
. <strong>
subscript
aria-label
and aria-labelledby
. <sub>
superscript
aria-label
and aria-labelledby
. <sup>
term
aria-label
and aria-labelledby
.
term
role for more information. <dfn>
time
aria-label
and aria-labelledby
. <time>
Note: The aria-label
and aria-labelledby
attributes are prohibited on code
, caption
, deletion
, emphasis
, generic
, insertion
, mark
, paragraph
, presentation
, none
, strong
, subscript
, superscript
, suggestion
, term
, and time
, and should only be used on interactive content.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3