What landmarks do
Landmarks are large named regions of a page that assistive technology can list and jump between. A screen reader user can open a landmark menu and move directly to the main content or the navigation without reading everything in between. Most landmarks come from native elements automatically.
- Header and footer map to banner and contentinfo at the top level.
- Nav maps to navigation for blocks of links.
- Main maps to the single primary content region.
Choosing and labeling regions
Use native elements first, since header, nav, main, and footer create landmarks for you. When you need an explicit role, you can add one, but do not stack a role onto an element that already implies it.
- Keep exactly one main region so the primary content is unambiguous.
- Give a label when a page has two of the same landmark, such as two nav blocks.
- Avoid wrapping the whole page in extra roles that add noise.
A short label like Primary or Footer links makes repeated landmarks distinct in the jump menu. Good landmarks turn a long page into a small, navigable set of named destinations.
Key idea
Landmarks split a page into named regions that users can jump to, and native elements provide most of them automatically when labeled clearly.