How to add page landmarks (header, nav, main, footer)
Landmarks let screen-reader users jump straight to the content or navigation. HTML5 elements give them for free.
Step by step, with screenshots: Landmarks and skip links: the structure screen readers navigate by →
Check your own site
Runs this check and the other 192, free, in about 45 seconds.
What it is
Page landmarks are the main regions of a page, such as the header, navigation, main content and footer, marked so assistive technology can recognise them. HTML elements create them automatically: <header> becomes the banner, <nav> a navigation region, <main> the main content and <footer> the content information.
Screen reader users jump from landmark to landmark with a single key, the way sighted visitors glance at a layout, instead of listening to the whole page from the top. getReport checks for main, header, nav and footer landmarks and lists any that are missing. A page is OK when it has exactly one <main>, its site header and footer use <header> and <footer>, and each menu sits inside a <nav>, with a label when there is more than one.
What a passing site looks like
- Page landmarks are in placewarning · −1 ptseffort S
Page landmarks
Why it matters. Screen reader users jump between header, navigation, main content and footer instead of reading top to bottom. Without these landmarks they have to listen to the whole page to find the content.
- Wrap the page content in <main>, the site header in <header>, the menu in <nav> and the bottom area in <footer>.
- If the theme uses <div id="content">, change the tag rather than adding a wrapper; most page builders offer semantic wrappers in their settings.
Questions people ask
What are ARIA landmark roles?
They are eight roles defined by WAI-ARIA: banner, navigation, main, complementary, contentinfo, search, form and region. Native HTML elements give you most of them for free: header, nav, main, aside and footer. Use the HTML elements first, and add role attributes only when you cannot change the markup, for example role="search" on the element around a search form.
What does "text not included in an ARIA landmark" mean?
It is an axe-core finding (the region rule) that some visible text sits outside every landmark, so screen reader users who navigate by landmarks may never reach it. It often happens with cookie banners, announcement bars or content placed after the footer. Move the content into the right landmark, such as main or footer, or wrap it in a labelled region.
What does "no page regions or ARIA landmarks were found" mean?
It means the page has no landmarks at all, usually because the layout is built only from div elements. Screen reader users then have no way to jump straight to the content. Replace the outer wrapper divs with header, nav, main and footer elements; the visual design does not have to change at all.