Check your page landmark regions

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

The report shows which landmarks exist and which are missing. The <main> landmark is the most key since it marks where the core content starts. Without it, screen reader users have no shortcut to skip past the nav and reach the content.

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

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

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

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

The other landmarks add more shape. <nav> marks nav sections (you may have more than one: main 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 move through fast.

Landmarks are one of the most-used screen reader nav features. The WebAIM survey found that 26% of users move around by landmarks. For users of a site with a large nav menu, landmarks can save minutes of tabbing on each page visit.

Without a <main> landmark, screen reader users must either tab through the full nav on each page or use a skip link (if one exists). Landmarks are more reliable since they work with a single key press and do not depend on the dev adding a skip link.

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

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

Dashboard-style apps with sidebars, toolbars, and many content areas need landmarks to help users find their place. Without them, the layout is a flat list of controls with no way to jump between sections.

Content-heavy sites (blogs, docs, news sites) with headers, footers, sidebars, and main content areas should use all four landmarks. Users who visit many pages on the same site will learn the landmark layout and move faster with each visit.

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

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

Step 3: Use header and footer tags. Swap 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 section landmarks, not page-level banners.

Step 4: Do not overuse landmarks. Not each section needs 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 goal.

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> tag. The CSS stays the same. Only the tag name needs to change.

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

Using more than one main tag. Each page should have exactly one <main> tag. More than one confuses screen readers about which section is the core content.

Using ARIA roles when HTML tags work. <main> is better than <div role='main'>. HTML tags have built-in roles. Use ARIA roles only when you cannot change the tag.

After adding landmarks, run a new SiteCurl scan. The check should pass once a <main> tag is found. For a manual check, use the Landmarks browser plugin (for Chrome and Firefox). It shows landmark regions on the page so you can see the layout at a glance.

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

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