AccessibilityCraft conventionFoundational
Heading Structure
Headings are the table of contents screen reader users navigate by, so levels must follow structure rather than appearance.
Definition
Heading elements describe document hierarchy. Assistive technology exposes them as a navigable outline, which makes the correct level a functional requirement rather than a styling choice.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Rules
- One h1 per page, describing what the page is about.
- Do not skip levels going down. An h2 followed by an h4 breaks the outline.
- Choose the level from structure, then apply whichever visual style is correct. The two are independent.
- Do not use headings for visual emphasis on text that is not a heading.
- Every major section should have a heading, including ones that look self-evident visually.
- In single-page applications, ensure the h1 updates on route change.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Relied on by
Entries that assume this is already in place.
- Screen ReadersAccessibility
Headings are the primary way screen reader users skim a page.
- AccordionComponent
Related concept
Connected closely enough to change how you apply this.
- WCAG in PracticeAccessibility
- Information ArchitectureResearch method
- Typographic HierarchyUI foundation
- Content DesignUX writing
- SEO for Content ProductsUX writing