Check your page landmark regions

SiteCurl checks every page for four landmark regions: <main>, <nav>, <header>, and <footer>. It also detects equivalent ARIA roles: role='main', role='navigation', role='banner', and role='contentinfo'. The check passes if a <main> element (or role='main') is found.

The report shows which landmarks are present and which are missing. The <main> landmark is the most important because it marks where the primary content begins. Without it, screen reader users have no shortcut to skip past navigation and reach the content.

The other three landmarks (nav, header, footer) are checked and reported but do not cause a failure on their own. Having all four gives screen reader users the best navigation experience.

Screen readers offer a landmarks menu that lists every landmark region on the page. Users open this menu and jump directly to the section they want: the main content, the navigation, the header, or the footer. This is faster than tabbing through every element and more reliable than searching by heading.

Without landmarks, the page is a flat list of elements. There are no signposts. The user starts at the top and has to move through every navigation link, every sidebar widget, and every banner before reaching the article or product they came to see. On a page with 30 navigation links, that is 30 Tab presses before the content starts.

A <main> landmark solves the biggest problem. It marks where the primary content begins. Screen readers can jump to it in one keystroke (D in NVDA, Cmd+L in VoiceOver to open landmarks). The user skips everything above and lands in the content.

The other landmarks add more structure. <nav> marks navigation sections (you may have more than one: primary nav, footer nav, sidebar nav). <header> marks the page header (banner). <footer> marks the page footer. Together, they turn the page into a small map that screen reader users can navigate quickly.

Landmarks are one of the most-used screen reader navigation features. The WebAIM screen reader user survey found that 26% of users navigate by landmarks. For users of a site with a complex navigation menu, landmarks can save minutes of tabbing on every page visit.

Without a <main> landmark, screen reader users must either tab through the entire navigation on every page or use a skip link (if one exists). Landmarks are more reliable because they work with a single keyboard shortcut and do not depend on the developer adding a skip link.

Landmarks also help developers understand their own page structure. If you cannot identify where to put <main>, <nav>, <header>, and <footer>, your page layout may not have clear sections. Adding landmarks forces you to think about the page structure, which benefits all users.

Sites with large navigation menus benefit the most. A site with 20 or 30 top-level navigation links forces keyboard and screen reader users to tab through every one to reach the content. A <main> landmark lets them skip the entire menu.

Dashboard-style applications with sidebars, toolbars, and multiple content areas need landmarks to help users orient themselves. Without them, the interface is a flat list of controls with no way to jump between sections.

Content-heavy sites (blogs, documentation, news sites) with headers, footers, sidebars, and main content areas should use all four landmarks. Users visiting multiple pages on the same site will learn the landmark structure and navigate faster with each visit.

Step 1: Wrap your main content in a main tag. Find the div or section that contains your page's primary content (not the header, sidebar, or footer) and change it to <main>. There should be exactly one <main> element per page. In most templates, this wraps the content between the header and footer.

Step 2: Use nav for navigation sections. Wrap your primary navigation in <nav>. If you have multiple navigation sections (header nav, footer nav, sidebar nav), wrap each one in its own <nav> and give each an aria-label to distinguish them: <nav aria-label='Primary'> and <nav aria-label='Footer'>.

Step 3: Use header and footer tags. Replace the outermost header div with <header> and the outermost footer div with <footer>. These should be direct children of the body or at the top level of your layout. Note: header and footer inside an article or section create sectioning landmarks, not page-level banners.

Step 4: Do not overuse landmarks. Every distinct section does not need a landmark. Use <section> with an aria-label for named regions within the main content. Too many landmarks clutters the landmarks menu and defeats the purpose.

Using div where main belongs. The most common issue is a div with a class like 'content' or 'main-wrapper' that could be a <main> element. The CSS stays the same. Only the tag name needs to change.

Nesting main inside another landmark incorrectly. The <main> element should not be inside a header, footer, aside, or nav. It is a top-level landmark that marks the primary content of the page.

Using multiple main elements. Each page should have exactly one <main> element. Multiple mains confuse screen readers about which section is the primary content.

Using ARIA roles when semantic HTML works. <main> is better than <div role='main'>. Semantic HTML elements have built-in roles. Use ARIA roles only when you cannot change the element tag.

After adding landmarks, run another SiteCurl scan. The check should pass once a <main> element is found. For a manual check, use the Landmarks browser extension (available for Chrome and Firefox). It highlights landmark regions on the page so you can see the structure at a glance.

To test with a screen reader, open the landmarks list (VO+U in VoiceOver, then navigate to Landmarks; or D in NVDA to cycle through landmarks). You should see entries for main, navigation, banner, and content info.

Landmarks turn your page into a map for screen reader users. The <main> landmark is the most important because it lets users skip past the navigation to the content. Wrap your primary content in a main tag, your navigation in nav, and your site header and footer in their respective tags.