aria-level attribute defines the hierarchical level of an element within a structure.
Levels of hierarchy appear in headings, trees, nested grid, nested tablists, and more. If the DOM ancestry does not accurately represent the level, the
aria-level attribute should be used to define the hierarchical level elements within their hierarchical structures. Levels increase with depth. The value for aria-level is an integer greater than or equal to
When it comes to the headings in a document structure, you can have first-level headings, second-level headings, third-level headings, etc. In trees, you have the root element, its children, the children's children (or grandchildren), and so on.
aria-level attribute exposes hierarchy to assistive technologies so it can be communicated to the users. Like all ARIA attributes, it has no impact on the user agent and therefore no impact on the user agent's determination of the document structure.
If the DOM ancestry accurately represents the level, the user agent can calculate the level of an item from the document structure, making
aria-level not only redundant but a risk of creating misinformation.
aria-level should really only be used to provide an explicit indication of level when it is not possible to calculate from the document structure. Test to see if this attribute is needed. If the user agent can calculate the level, it is best to omit the
aria-level attribute is a required attribute of the
heading role which indicates to assistive technologies that the element should be treated as a heading.
<div role="heading" aria-level="1"> defines the
<div> as being the main heading of the page. A level 2 heading, defined with
aria-level="2" would be the first subsection, a level 3 is a subsection of that, and so on.
<div role="heading" aria-level="3">Heading for this sub section</div>
In the case of a
aria-level is supported on elements with the role
row, not elements with role
gridcell. Rows act as leaf nodes within the vertical orientation of the grid. Gridcells are leaf nodes within the horizontal orientation of each row.
Aria-level is not supported on cells within rows. So, in treegrids, the
aria-level attribute is applied to the element with the role
If a complete set of available nodes is not present in the DOM due to dynamic loading as the user moves focus in or scrolls the tree, each node has
An integer greater than or equal to 1
|Accessible Rich Internet Applications (WAI-ARIA) |