Heading structure and landmarks

A common way to read a page with a screen reader is to jump from heading to heading, so a page with no h2 elements reads like a book with no chapters.

Headings are a table of contents

Sighted readers skim. They glance at the big bold lines, find the section they want and start reading there. Screen reader users do the same thing with headings. MDN notes that a common technique is to jump quickly from heading to heading to work out what a page contains, and that most screen readers can list every heading on the page. That only works if the headings are real h1 to h6 elements. A paragraph made big and bold with CSS looks like a heading but is announced as ordinary text.

WCAG 2.2 covers this in success criterion 1.3.1 Info and Relationships, at level A: structure that is shown visually must also be available in the code. Criterion 2.4.6 Headings and Labels, at level AA, adds that headings must describe the topic of their section. A heading that says "More" or "Section 2" passes the first test and fails the second.

Three rules from MDN

First, do not skip levels. Go from h1 to h2 to h3. Someone who hears an h4 straight after the h1 is left wondering where the missing levels went. Second, prefer a single h1 per page that names its content, much like the title element. The HTML standard allows more than one, but MDN describes one h1 as the usual best practice. Third, do not choose a heading level for its size. If an h3 looks too small, change the font size in CSS and keep the level that matches the structure.

Writing headings people can use

A heading list is only as good as its words. Put the useful word first, because people scanning a list of twenty headings hear the start of each and move on: "Opening hours" works better than "When you can visit us". Keep headings short and different from each other, so two sections are never both called "Details". Then test the outline. The accessibility panel in a browser's developer tools, or a screen reader's heading list, shows the headings alone. Read them in a row and ask whether they make sense as a table of contents. If they do, sighted skimmers benefit too.

Landmarks

Headings divide the content; landmarks divide the page into regions. The elements header, nav, main and footer each carry a built-in role, so a screen reader can offer a list of regions and jump straight to the main content or the navigation. A page normally has one main. You get these roles for free by choosing the right element, which is the first rule of ARIA in action: no extra attributes needed.

<header>
  <nav>
    <a href="/">Home</a> <a href="/menu">Menu</a>
  </nav>
</header>
<main>
  <h1>Corner Bakery</h1>
  <h2>Bread</h2>
  <h3>Sourdough</h3>
</main>
<footer>12 Mill Lane</footer>