Defines the hierarchical level of an element within a structure.

This can be applied inside trees to tree items, to headings inside a document, to nested grids, nested tablists and to other structural items that may appear inside a container or participate in an ownership hierarchy. The value for aria-level is an integer greater than or equal to 1.

This property indicates the level of an element within a structure. The level value is 1 or greater.

Levels increase with depth. If the DOM ancestry does not accurately represent the level, authors should explicitly define the aria-level attribute.

This attribute is applied to elements that act as leaf nodes within the orientation of the set, for example, on elements with role treeitem rather than elements with role group. This means that multiple elements in a set may have the same value for this attribute. Although it would be less repetitive to provide a single value on the container, restricting this to leaf nodes ensures that there is a single way for assistive technologies to use the attribute.

If the DOM ancestry accurately represents the level, the user agent can calculate the level of an item from the document structure. This attribute can be used to provide an explicit indication of the level when that is not possible to calculate from the document structure or the aria-owns attribute. User agent support for automatic calculation of level may vary; authors should test with user agents and assistive technologies to determine whether this attribute is needed. If the author intends for the user agent to calculate the level, the author should omit this attribute.

Note: In the case of a treegrid, aria-level is supported on elements with the role row, not elements with role gridcell. At first glance, this may seem inconsistent with the application of aria-level on treeitem elements, but it is consistent in that the row acts as the leaf node within the vertical orientation of the grid, whereas the gridcell is a leaf node within the horizontal orientation of each row. Level is not supported on sets of cells within rows, so the aria-level attribute is applied to the element with the role row.

Note  For cross-browser compatibility, always use the WAI-ARIA attribute syntax to access and modify ARIA properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-level="p" ... >
JavaScript
object.setAttribute("aria-level",value);var value = object.getAttribute("aria-level");