How to add page landmarks (header, nav, main, footer)
Accessibility1 min readFixes check landmarks-present
Landmarks let screen-reader users jump straight to the content or navigation. HTML5 elements give them for free.
Step by step, with screenshots: Accessibility checker results — fixing the ten findings we see most →
Check your own site
Runs this check and the other 186, free, in about 45 seconds.
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.
How to fix it.
- 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.