HTML · The document layer
What are accessibility landmarks and why do they matter?
Short answer
Landmarks are regions such as banner, navigation, main, complementary and contentinfo that let screen reader users jump around a page. Native elements like header, nav, main and footer create them automatically.
A landmark is a navigational region in the accessibility tree. Screen reader users can list landmarks and move directly to the main content or navigation instead of tabbing through every link.
The common landmarks
- banner: usually the site header, created by a top-level header
- navigation: created by nav
- main: the primary content, created by main
- complementary: supporting content, created by aside
- contentinfo: usually the footer, created by a top-level footer
- search and form: additional regions when marked up appropriately
<header>Site header</header>
<nav aria-label="Primary">Main links</nav>
<main>
<h1>Page title</h1>
</main>
<aside aria-label="Related">Related links</aside>
<footer>Site footer</footer>Too many landmarks are as unhelpful as none. Navigation inside an article, for example, may not deserve a landmark unless it is a major region. Multiple landmarks of the same type need distinct accessible names.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1Which elements create landmarks automatically?
- 2How do you distinguish two navigation regions?
- 3Can there be too many landmarks?
- 4Does a header inside an article create a banner landmark?
Say it in the interview
Landmarks are regions in the accessibility tree that screen reader users can jump between, such as banner, navigation, main, complementary and contentinfo. Native elements like header, nav, main, aside and footer create them automatically. I use them to reflect the real page structure and give multiple regions of the same type distinct names. Too many landmarks make navigation noisy, so I keep them meaningful rather than adding one to every wrapper.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.