Heading aria level missing

Pattern Checker

What does this mean?

A heading aria role has been set on an element, but no corresponding aria level has been set to indicate where it sits in the heading hierarchy.

For example:

<div role="heading">Contact details</div>

Impact on users

A heading role with no corresponding level will default to aria-level="2" which is equivalent to a h2. The impact on the user will depend on if that is an appropriate level for this heading. If not then it could make the content misleading.

From a technical support point-of-view relying on the default action is introducing fragility.

How to fix

As with all aria, if there is a corresponding html element which can perform the same function, then it is best to use that instead.

For example:

<h2>Contact details</h2>

but if you cannot, then ensure you explicity state the level of heading: For example:

<div role="heading" aria-level="2">Contact details</div>

References

Classification

Level: warn
Tagged: best-practice

See all issues