The HTML aria-level attribute
The aria-level attribute defines the hierarchical level of an element — a heading level, or the depth of a tree item or nested list. Value: an integer of 1 or more. Prefer native <h1>–<h6> for headings.
Overview
The aria-level attribute defines the hierarchical level of an element within a structure.
It describes an element's place in a larger set or hierarchy. This matters when not all items are present in the DOM at once — a virtualized list or a lazy-loaded tree — so assistive technology cannot count them itself. For fully-rendered native lists, the browser computes position and size for you.
Like all ARIA, aria-level changes only the accessibility tree — what assistive technology perceives — never the element's behavior or appearance. The first rule of ARIA applies: if a native HTML element or attribute conveys this, use that instead, and only reach for ARIA when nothing native fits.
Syntax
<div role="heading" aria-level="2">Section title</div>Values
| Value |
|---|
| An integer greater than or equal to 1. |
Example
<div role="heading" aria-level="3">Custom heading</div>Best practices
- Follow the first rule of ARIA — use a native HTML element or attribute that conveys this where one exists, rather than adding ARIA.
- Use these when the full set is not in the DOM (virtualized lists, lazy-loaded trees).
- Set aria-posinset and aria-setsize together for each item.
- For fully-rendered native lists, let the browser compute position and size instead.