Theme
Tip: try Tab + Enter.
Try it
Toggle BAD vs BETTER, then open the simulated “Landmarks list”. In real screen readers, users can jump to landmarks like “main” or “navigation”.
Mode: BAD
Simulated page
What to look for
- Can you identify navigation? If you have multiple navs, label them (e.g.,
aria-label="Primary"). - Is there exactly one main?
<main>should be the page’s primary content. - Is the structure stable? Don’t change landmark meaning across routes.
Simulated screen reader: landmarks list
This list is computed from the simulated page structure below (it’s a teaching tool, not a real screen reader).
Landmarks found:
Goal: users can jump to Main or Navigation quickly instead of tabbing through everything.
Notes
- If you can’t use native elements, use
roleequivalents:role="main",role="navigation", etc. - If you have multiple nav regions, label them so the landmarks list is unambiguous.
- Landmarks help keyboard users too (with skip links and predictable structure).
Article: Landmarks checklist