Guides · Accessibility

How to mark the sections of your page

People who use a screen reader can jump straight to the main areas of a page, if the code marks those areas. These marked areas are called landmarks. Without them, a person may have to move through the menus and everything else in order to reach the content.

Landmarks come from the tags header, nav, main and footer. They usually do not change how the page looks. Our accessibility check treats these findings as good-practice rules.

What your report means

• Content outside the marked sections: some text sits outside every landmark. Move it into one.
• No main content marked: the page has no main area. Wrap the page's central content in one.
• Landmarks that are not unique: two landmarks have the same type and the same name. Two nav areas with no label are the usual case.

A simple page is built like this, with a different label on each menu:

<body>
  <header>
    <nav aria-label="Main">...</nav>
  </header>
  <main>...</main>
  <footer>
    <nav aria-label="Footer">...</nav>
  </footer>
</body>

Leave the word "navigation" out of the label, because screen readers announce the type themselves. A header or footer placed inside main or an article is not listed as the page's banner or footer.

How to fix it

Your theme or template usually creates these areas, so the fix is often outside the page editor. Yoast and Rank Math do not control them.

• WordPress: in a block theme, open the template in the site editor and select the Group block around the content. Its Advanced panel has an HTML element option, which includes main. WordPress also adds a skip link to block themes when a template has a main area. Elementor containers have a similar HTML tag setting. In a classic theme, the tags are in the theme files, so this may need a developer.
• Shopify: the tags are in the theme code, often in theme.liquid. A bar or popup added by an app may sit outside them. Ask a developer or the theme's maker.
• Wix: pages are divided into header, main and footer areas. Check which area the reported item is attached to, and look for tag or accessibility options on the element. If you find none, ask Wix support.
• Squarespace: the template controls these areas, and you may not be able to change them. Ask Squarespace support about the reported item.

Send a developer this: "Put all visible content inside header, nav, main or footer. Use one main area, and give each repeated landmark its own aria-label."

How to check

1. Publish the change.
2. If you have a screen reader, open its landmark list. In NVDA, the D key moves between landmarks. In VoiceOver, use the Rotor.
3. Press Rescan on your report and see whether the finding has gone.