Play Accessibility
Fix the outline.
Raise and lower heading levels until each page outline matches how the content is organized.
Round 1 of 3. A recipe page: set each heading's level so the outline matches how the page is organized.
- Weeknight chili
- Ingredients
- Spices
- Method
- Serving
Outline check
One h1 names the page. Ingredients, Method and Serving are siblings, so they share a level, and Spices is part of Ingredients, so it sits one level below.
Round 2 of 3. Component documentation: set each heading's level so the outline matches how the page is organized.
- Button
- Usage
- When to use
- When not to use
- Accessibility
- Keyboard support
Outline check
Levels describe structure, not size. Skipping from h2 to h4 suggests a missing section, which is confusing for anyone moving through the page by headings.
Round 3 of 3. A team handbook: set each heading's level so the outline matches how the page is organized.
- Team handbook
- Getting started
- Your first week
- Accounts and tools
- How we work
- Meetings
- Weekly planning
Outline check
Screen reader users often jump between headings to skim. A clean outline lets them hear the shape of the page before reading any of it.
Pick heading levels for structure, then style them however you like. Size belongs in CSS, not in the heading level.