Headings and landmarks
Structure is navigation
Sighted users scan a page by size and layout. Screen reader users scan by structure: they can open a list of headings or jump between landmark regions. If the structure is missing, the page becomes one long block.
Heading rules
- Use one h1 that names the page.
- Do not skip levels. An h2 is followed by an h3, not an h4.
- Describe the section. WCAG 2.4.6 Headings and Labels (AA) asks for headings that describe topic or purpose. “Delivery options” is better than “More”.
- Do not choose a level by size. Pick the level for the structure, then style it with CSS.
In a design file, name text styles by role (Heading 2), not by size, so the right level reaches developers.
Landmarks
HTML sectioning elements create landmark regions that assistive technology can list.
header and footer
Site-wide banner and closing information, when placed at the top level of the page.
nav
A block of navigation links.
main
The central content. Use one per page.
aside
Content related to, but separate from, the main content.
When a page has more than one <code>nav</code>, label each with <code>aria-label</code>, for example “Primary” and “Footer”, so users can tell them apart.
Skip links
WCAG 2.4.1 Bypass Blocks (A) requires a way to skip repeated content. A “Skip to main content” link as the first focusable item, pointing at the <code>main</code> element, is the common solution. It can stay hidden until it receives focus.
- Check the outline of headings with a browser extension or the accessibility tree in developer tools.
- Read only the headings aloud. Do they tell the page story?
Structure starts in the design file. Plan the outline before the visual style, because a clear outline makes the layout easier to build and easier to scan.
- Write the heading outline as a nested list before drawing the page.
- Annotate the design with the intended heading level and landmark for each block.
- Use real headings, not bold paragraphs, for section titles.
- Keep unique, meaningful page titles in the <code>title</code> element too.
Landmarks and headings complement each other: landmarks give the big regions, headings the detail inside them.
Sources
- W3C WAI. Page Structure Tutorial. https://www.w3.org/WAI/tutorials/page-structure/
- W3C. Understanding SC 2.4.1 Bypass Blocks. https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.