Landmarks: Structure Pages for Assistive Navigation

Landmark regions (header, nav, main, footer, etc.) help assistive technology users jump between major page sections.

Why Landmarks Matter

  • Improve keyboard and screen-reader navigation.
  • Make page structure predictable.
  • Support accessibility audits and standards.

Landmarks also help teams maintain clearer layout semantics as templates evolve.

Common Landmarks

  • <header>
  • <nav>
  • <main>
  • <aside>
  • <footer>

Best Practices

  • Use one primary <main> per page.
  • Keep landmarks meaningful and not overly nested.
  • Ensure landmark content matches its purpose.
  • Use aria-label/aria-labelledby for repeated landmark types when needed.
  • Keep navigation regions distinct for primary vs secondary menus.

Common Pitfalls

  • Multiple unlabeled nav regions causing ambiguity.
  • Missing main element on content-heavy pages.
  • Landmark wrappers used purely for styling without semantic value.
  • Deeply nested landmarks that reduce navigation clarity.

Validation Workflow

  1. Use accessibility tree/landmark inspectors in browser tooling.
  2. Navigate landmarks via screen-reader shortcuts.
  3. Confirm each landmark contains expected content.
  4. Re-check templates after layout refactors.

Final Takeaway

Clear landmarks make complex layouts easier to navigate for everyone, and are a foundational part of accessible semantic HTML.