Skip to content

Latest commit

 

History

History
34 lines (20 loc) · 1.18 KB

File metadata and controls

34 lines (20 loc) · 1.18 KB

Linter Rule: ARIA role with heading requires level

Rule: html-aria-role-heading-requires-level

Description

Ensure that any element with role="heading" also has a valid aria-level attribute. The aria-level defines the heading level (1–6) and is required for assistive technologies to properly interpret the document structure.

Rationale

In HTML, semantic heading elements like <h1> through <h6> implicitly define their level. When using role="heading" on non-semantic elements (e.g., <div>, <span>), the level must be explicitly declared using aria-level, otherwise screen readers and accessibility tools may not understand the document hierarchy.

Examples

✅ Good

<div role="heading" aria-level="2">Section Title</div>

<span role="heading" aria-level="1">Main Title</span>

🚫 Bad

<div role="heading">Section Title</div>

<span role="heading">Main Title</span>

References