← Back to UI Keyboard and Shortcuts

UI Keyboard and Shortcuts

Every Page Needs Skip Links and Semantic Landmark Regions

5 min read

Skip links and landmark elements let keyboard and screen reader users bypass repetitive navigation and jump directly to main content.

Rule

Every page must provide at least one skip link and use semantic landmark regions.

Why

Without skip links, keyboard users must tab through all navigation items on every page load.

Must

  • Provide a "Skip to main content" link as the first focusable element.
  • Show the skip link visually when it receives focus.
  • Use <main>, <nav>, <header>, <footer>, and <aside> landmarks correctly.
  • Label multiple navigation regions with aria-label.

Should

  • Provide skip links to primary sections such as main navigation and search.
  • Test landmark structure with a screen reader before shipping.

Anti-patterns

  • Skip link target does not accept focus (no tabindex="-1" on <main>).
  • Multiple unlabelled <nav> elements on the same page.

Test Cases

  • Tab once from address bar reaches skip link.
  • Activating skip link moves focus to main content area.

Telemetry

  • skip_link_activated