Headings and Document Structure

What Are Headings?

Headings (<h1> through <h6>) and semantic HTML elements (<header>, <nav>, <main>, <footer>, <aside>, <section>) define the structure and organization of content on a webpage. They are crucial for creating clear content that helps users focus and find what they need, enhancing readability.

How Do Headings Impact Accessibility?

Headings aren’t just a visual design choice; they’re a critical accessibility tool. Properly structured (using <h1> through <h6>) makes content easier to navigate, understand, and trust.

Navigation

For users of screen readers, headings act like a table of contents. Screen reader shortcuts (e.g., pressing “H” in NVDA or JAWS) lets users jump directly from one heading to another. Without a logical heading hierarchy, users are forced to listen to entire blocks of content just to find the section they need, creating frustration and wasting time.

Comprehension

Clear, hierarchical headings break content into manageable sections and show relationships between ideas. This is especially valuable for people with cognitive or learning disabilities who rely on structure to understand context. For example, a level-one heading <h1> might introduce a topic, while level-two headings <h2> divide it into subtopics, and <h3>s provide detail under each.

Predictability and Consistency

When headings are used consistently across a website, users know what to expect. They can quickly locate repeated sections like “Overview,” “FAQ,” or “Contact.” Predictability builds trust, reduces cognitive load, and keeps users engaged.

Example

A blog post about “Accessible Forms” might use the following structure:

<h1>Accessible Forms Best Practices</h1>
  <h2>Why Accessible Forms Matter</h2> 
  <h2>Common Barriers in Forms</h2>
    <h3>Missing Labels</h3>
    <h3>Poor Color Contrast</h3>
  <h2>How to Test Accessible Forms</h2>

Using this hierarchy makes it easy for all users, and assistive technologies, to navigate and understand the content.

What WCAG Success Criteria are Relevant for Headings and Document Structure?

Using headings correctly helps you fulfill the following WCAG success criteria:

• 1.3.1 Info and Relationships (Level A): Information, structure, and relationships conveyed through presentation must be programmatically determinable or available in text. This means using appropriate markup (like heading tags) to define structure, not just visual styling.

• 2.4.6 Headings and Labels (Level AA): Headings and labels must describe their topic or purpose.

• 2.4.10 Section Headings (Level AAA): Section headings are used to organize content. While Level AAA is often difficult to achieve, it highlights the benefit of consistent heading use.

How Do I Maximize Accessibility When I Code Headings?

Proper heading structure is one of the most important ways to make content accessible. Here’s how to code them effectively:

• Follow a clear hierarchical Order: Use <h1> for the main title of the page, followed by <h2>, <h3>, and so on, in a logical, nested hierarchical order. Do not skip heading levels (e.g., jump from <h1> to <h3>).

• Use headings for structure, not style: Headings should reflect their role in the content, not how they look visually. For example, a bold, large piece of text isn’t necessarily a heading. Use CSS to adjust visual styling while keeping semantic HTML intact. This ensures that assistive technologies correctly interpret the page structure.

• Write descriptive headings: Each heading should describe the content that follows. Avoid vague headings like “Section 1” or “Details.” Instead, use “How to Test Accessible Forms” or “Best Practices for Keyboard Navigation.”

• Be consistent across pages: Consistency in heading usage helps users predict content patterns, reducing cognitive load and improving trust in your site’s navigation. For example, keep major section headings like (“Overview,” “Steps,” or “FAQ”) consistent in wording and hierarchy across similar pages.

• Test for accessibility: After coding headings, test with a screen reader and keyboard navigation to ensure the hierarchy is logical, all headings are announced correctly, and users can jump between sections easily.

How Do I Test the Accessibility of Headings?

When testing your headings for accessibility, try the following:

Automated tools: Use browser extensions like WAVE (Web Accessibility Evaluation Tool). The "Structure" tab in WAVE lists structural elements like landmarks and headings to check if they are in hierarchical order and present as intended.

Screen readers: Manually test using screen readers such as VoiceOver (Mac), NVDA (Windows), or JAWS (Windows).

• Use quick keys like 'H' (for headings) to navigate the page and listen for the hierarchical order.

• Use the screen reader's "elements list" (NVDA) or "rotor" (VoiceOver) to view a list of all headings and verify their logical order.

Keyboard navigation: While not directly for headings, ensuring the overall navigation order of interactive elements is logical helps validate the content flow.

How Can I Learn More About Accessible Document Structure?

To further enhance navigation for screen reader users, look at the following resources:

• Explore semantic HTML 5 elements: Elements like <main>, <header>, <nav>, <aside>, and <footer> provide a clear document structure. Using them correctly allows screen readers to distinguish between different sections of a page and helps users jump directly to the content they need.

• Learn ARIA roles and landmarks: ARIA attributes, such as role=“main” or role=“complementary”, enhance accessibility by explicitly defining the purpose of page regions. This is especially helpful when native HTML elements aren’t sufficient or when creating custom components. 

• Practice skip links and region navigation: Integrate skip navigation links and landmark regions into your workflow. This enables users to bypass repetitive sections, like navigation menus, and go directly to the main content. Testing these features with screen readers ensures they work as intended. 

• Hands-on testing: Apply what you learn by testing pages using screen readers (e.g., NVDA, JAWS, VoiceOver) and keyboard-only navigation. Observing how users experience document structure in real time bridges the gap between theory and practice.

• Start small and build up: If you’re new to accessibility, focus on structuring one type of content at a time, like a blog post or a form page, before tackling complex layouts. Gradually applying these techniques helps you build mastery while improving the overall user experience.