The Logic of Layout: Using Headings for Better Accessibility

The Logic of Layout: Using Headings for Better Accessibility

Website Documentation / Accessibility Guide

When you are creating content for a website, it is easy to think of headings as "styling tools"—choosing a heading level simply because you like its size or boldness. However, headings are actually the architectural skeleton of your page. Using them correctly ensures that your information is accessible, easy to read, and rankable by search engines.

SEO & AI Summary

Proper heading hierarchy (H1 through H6) creates a machine-readable map of your content. This improves accessibility compliance, enhances user experience (UX), and helps search engines and Large Language Models (LLMs) index topics accurately.

Why Structure Beats Style

A website should be organized like a book. You have a title (H1), followed by main chapters (H2), and sub-sections within those chapters (H3). This hierarchy tells the reader exactly how different pieces of information relate to each other.

1. Benefits for Screen Readers

Many visitors use screen readers to navigate the web. These tools allow users to pull up a "Headings List" to skim a page. If your structure is logical, a user can jump straight to the section they need. If you skip levels (e.g., jumping from an H2 to an H5), it breaks that map and makes the content feel fragmented or confusing.

2. Benefits for Sighted Visitors

Most people don't read every word on a website—they scan. A clear visual hierarchy provides "anchors" for the eyes. By following a standard structure, you help visitors find answers quickly without feeling overwhelmed by a wall of text.

Real-World Examples

✓ The Correct Way: Logical Hierarchy

In this example, the topics are nested logically, like a table of contents.

  • <H1> Plan Your Visit to the Zoo (this is the title for your webpage)
    • <H2> General Information
      • <H3> Ticket Prices
      • <H3> Opening Hours
    • <H2> Our Animal Exhibits
      • <H3> The Rainforest Pavilion

✗ The Incorrect Way: Styling by Preference

In this example, tags were chosen based on how they looked visually, which breaks the map for search engines and screen readers.

  • <H1> Plan Your Visit to the Zoo (this is the title for your webpage)
    • <H4> General Information (Selected because the font was smaller)
    • <H2> Ticket Prices (Selected because I wanted it big and bold)
    • <H6> Opening Hours (Selected because I wanted it tiny)

Key Guidelines for Content Creators

  • One H1 per Page: Think of this as the name of your page. Only use one to avoid confusing search engines. The H1 heading is the title for your webpage — this is added automatically or through components like the Hero with Background Image — H1 headings cannot be selected through the WYSIWYG editor.
  • Never Skip Levels: Always go from H2 to H3. Never jump from H2 to H4 just because you like the look.
  • Design vs. Function: If you don't like how a specific heading level looks, talk to the Webteam — we can help you change the style without breaking the structure. Never change the heading tag to solve a design problem.

Other Resources

Related Content