HEadings - WCAG
HEadings - WCAG
Embedded Files
Using Headings to Organize Content
Using Headings to Organize Content
Headings support a document’s visual layout, and they also provide structure that screen readers and keyboard users rely on to move through content efficiently. Screen readers and keyboard users rely on heading levels to jump through content efficiently. Without proper headings, navigating a page becomes frustrating and time-consuming.
Headings Are a Navigation Tool
Headings Are a Navigation Tool
Screen readers allow users to jump from heading to heading. When headings are missing or used incorrectly, users lose that ability.
Best Practices for Headings
Best Practices for Headings
Contrast is the difference between the text and its background. Strong contrast makes text easier to read in all conditions, including:
Use built-in heading styles, not bold text
Start with Heading 1 for the title
Follow a logical order (H2, then H3)
Never skip levels
If headings are used thoughtfully, they guide readers through content the same way an outline guides a lesson. Taking a moment to review your heading structure can make a big difference in how accessible and usable your content is.
Why This Supports Everyone
Why This Supports Everyone
Headings help:
Screen reader users
People who skim
Learners organizing information
Good structure improves comprehension and reduces frustration.
Put into Practice
Put into Practice
Turn on the document outline or headings panel in:
Google Docs
Word
Your LMS
If the structure does not clearly show the flow of ideas, revise using proper headings.
Complex Description for the HEadings INfographic
Complex Description for the HEadings INfographic
This infographic outlines how to use document headings to improve accessibility for screen reader users, skimmers, and learners with cognitive needs.
Core Principles:
Core Principles:
Navigation Tools: Headings function like an outline, allowing users to jump to specific content rather than reading linearly.
Universal Design: Proper structure helps users who skim or need help organizing complex information.
7 Step Guide
7 Step Guide
Start with Heading 1 (H1) for the Title: Assign the primary subject as H1 to establish the document's foundation.
Use Built-in Styles, Not Bold Text: Use actual software heading tags ($H1, H2, H3$). Screen readers do not recognize manual bolding as a structural marker.
Follow a Logical Order: Organize sub-topics sequentially (e.g., an $H3$ should always follow an $H2$) to ensure a nested, logical flow.
Never Skip Heading Levels: Avoid jumps (like $H2$ to $H4$) which disrupt the outline and confuse navigation tools.
Ensure High Text Contrast: Maintain a strong difference between text and background colors for readability in various lighting conditions.
Verify via the Navigation Panel: Use the "Document Outline" or "Navigation Pane" in your software to see if the structure reflects a clear, logical summary.
Audit and Revise: If the navigation panel is not intuitive, revise the heading levels until the structure is clear.
Examples of Headings:
Examples of Headings:
WCAG Guidelines for Accessible HEadings <H1>
WCAG Guidelines for Accessible HEadings <H1>
Understanding Heading Hierarchy <H2>
Understanding Heading Hierarchy <H2>
The Role of H1 <H3>
The Role of H1 <H3>
The H1 is your page title. It must tell the user exactly where they are (e.g., "State of Pennsylvania") and there should only be one per page to avoid confusion.
Logical Nesting Patterns <H3>
Logical Nesting Patterns <H3>
Headings must follow a numerical order (H1 → H2 → H3). This creates a "parent-child" relationship where each sub-heading belongs to the section above it.
Writing Descriptive Heading Text <h2>
Writing Descriptive Heading Text <h2>
Headings should act as signposts. A user should understand the content of a section just by reading the heading alone.
Avoiding Vague Labels <H3>
Avoiding Vague Labels <H3>
Avoid generic terms like "Click Here" or "Details." Use specific labels like "Philly Neighborhoods" so users can find exactly what they need without reading the entire page.
Other Key WCAG Rules (New Section) <h2>
Other Key WCAG Rules (New Section) <h2>
Style vs. Semantics <H3>
Style vs. Semantics <H3>
Making text bold and large doesn't make it a heading. Unless it is tagged in the code (e.g., <h3>), a screen reader will treat it as a regular paragraph, making the page impossible to navigate via keyboard.
Skipping Levels <H3>
Skipping Levels <H3>
Never jump from an H2 to an H4 just because you like the font size of the H4. Skipping levels "breaks" the map for assistive technology, signaling to the user that they’ve missed a chunk of information.
State of Pennsylvania <H1>
State of Pennsylvania <H1>
City of Philadelphia <H2>
City of Philadelphia <H2>
Neighborhood: Old City <H3>
Neighborhood: Old City <H3>
Landmark- Liberty Bell
Neighborhood: South Philly <H3>
Neighborhood: South Philly <H3>
Landmark- Lincoln Financial Field
City of Pittsburgh <h2>
City of Pittsburgh <h2>
Neighborhood: North Shore <H3>
Neighborhood: North Shore <H3>
Landmark- Acrisure Stadium
Neighborhood: Mt. Washington <H3>
Neighborhood: Mt. Washington <H3>
Landmark- Duquesne Incline
Page updated
Report abuse