Landmarks (header/nav/main)

A short, practical UI accessibility note for games and web UIs. No tracking.

What goes wrong

• Slow navigation: without landmarks, users may need to Tab or read through lots of repeated UI (header, menus) to reach content.
• Ambiguous navigation: if you have multiple navigation regions and don’t label them, a landmarks list can show multiple identical “Navigation” entries.
• Confusing structure: apps that use divs for everything can become a flat surface with no quick jump points.

Why it matters

• Screen readers: landmarks are a primary way to move around a page (“go to main”, “go to navigation”).
• Keyboard users: landmarks + skip links reduce repetitive tabbing.
• Everyone: consistent structure improves learnability and reduces mistakes.

Checklist (minimal)

• Use semantic elements where possible: <header>, <nav>, <main>, <aside>, <footer>.
• Ensure there’s exactly one <main> per page (the primary content).
• If you have multiple nav regions, label them:
  • <nav aria-label="Primary">
  • <nav aria-label="Secondary">
• If you can’t use semantic elements (e.g., in a canvas-heavy app), use roles: role="banner", role="navigation", role="main", role="contentinfo".

<header>...</header>

<nav aria-label="Primary">
  ...
</nav>

<main>
  <h1>Page title</h1>
  ...
</main>

<footer>...</footer>