HTML: the `aria-level` attribute

The aria-level attribute communicates a heading's level when a custom interface cannot use a native heading element.

What you will learn

How role="heading" and aria-level communicate hierarchy
Why native h1 through h6 elements should usually come first
How to keep custom UI hierarchy consistent with the document structure

Prefer native headings

<h2>Account settings</h2>
<p>Choose how your account behaves.</p>

Native headings provide semantics, navigation, and browser behavior without extra ARIA. Use them whenever the markup can represent the structure directly.

Custom heading example

<div role="heading" aria-level="2">
  Account settings
</div>

This pattern communicates a level-two heading to assistive technology. The value should be an integer from 1 through 6 and should match the intended hierarchy around it.

Common mistakes

Using aria-level on a normal paragraph instead of using h1 to h6.
Skipping levels without a clear structural reason.
Changing the visual size of a heading while leaving its semantic level misleading.
Creating a custom heading that is not exposed or navigable as a heading.