Why headings and landmarks matter

Screen readers offer commands that let users jump directly between headings or to specific landmark regions. A survey of screen reader users found that headings are the most common way to explore an unfamiliar page. Structuring your content with proper heading levels and landmark elements gives assistive technologies a reliable navigation skeleton, which can dramatically improve the experience on your site.

Build a structural outline with headings

Heading elements h1 through h6 should create a structural outline of your page, not just visual hierarchy. A common pattern is a single h1 for the page's primary title or logo, h2 elements for each major section, and h3 elements for supporting subsections:

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

Don't skip heading levels

Skipping levels—for example, jumping from h2 directly to h4—is an anti-pattern because it breaks the outline model. Developers sometimes do this to match browser default font sizes, but the solution is to use your own CSS for sizing and keep the heading hierarchy intact.

Consider a common layout: a section labeled "IN THE NEWS" followed by two headlines. The section label might be an h2, and both headlines could be h3 elements. If the section label has a smaller font size than the headlines, it can be tempting to mark the section label as an h3 and the headlines as h2 elements to align with visual sizing. That approach breaks the outline conveyed to screen reader users.

It doesn't matter if, visually, an h3 or h4 renders larger than an h2 or h1 on the page. What matters is the outline the elements communicate and their ordering in the document. You can verify you haven't skipped levels by running the accessibility audit in Lighthouse (Lighthouse > Options > Accessibility) and checking the Headings don't skip levels result.

Define major sections with landmark elements

HTML5 elements such as main, nav, and aside act as landmarks—special page regions that screen readers can jump to directly. Use these elements for your major sections instead of generic divs.

That doesn't mean using every landmark you can; too many landmarks can be overwhelming. For instance, stick to a single main element rather than multiple. Lighthouse offers a manual audit to check that "HTML5 landmark elements are used to improve navigation"; you can use the W3C's list of landmark elements to review your own markup.

Provide a skip link for repetitive content

Repeated header navigation can be tedious for assistive technology users, but a skip link provides a way past it. A skip link is an offscreen anchor placed as the first focusable item in the DOM, typically linking to the page's main content. Because it comes first, activating it requires only a single action from assistive technology to bypass repetitive navigation.

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>


/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

Sites like GitHub, The NY Times, and Wikipedia all use skip links; pressing TAB a few times on those pages will reveal them. Lighthouse's accessibility audit also checks for this with the The page contains a heading, skip link, or landmark region test.