Headings — Accessibility Specification (WCAG 2.1 AA)

Visual-only headings: no semantic tag means AT cannot navigate.
Illogical outline: skipping levels confuses users.
Overlong headings: reduce scannability and screen reader efficiency.

What is this component?

What is this component? Headings (<h1>…<h6>) provide the document outline and help users (and AT) understand and navigate page structure.

Where and how is it used? Use headings to introduce sections; one logical <h1> per page view; descend levels without skipping for clarity.

Requirement	WCAG Criteria	Description
Semantic structure	1.3.1	Use headings to convey hierarchy; avoid styling non‑heading elements to appear as headings.
Meaningful text	2.4.6	Provide descriptive headings that summarize content that follows.
Navigation	2.4.1	Headings enable quick navigation for AT; ensure order reflects content structure.

ARIA Role/Attribute	Used On	Purpose & Usage
`<h1…h6>`	Section headings	Preferred for native semantics.
`role="heading" aria-level="N"`	Non‑semantic element	Use only when native headings cannot be used.


Page Title
Section
Subsection

Test Item	WCAG Criteria	Pass Criteria
Outline order	1.3.1	Headings form a logical hierarchy (h1→h2→h3…).
Descriptive text	2.4.6	Each heading describes its section meaningfully.
AT navigation	2.4.1	Screen readers can list and jump to headings.