Accessible navigation: landmarks, skip links and structure

Navigation: a major accessibility concern

RGAA Theme 12 dedicates 14 criteria to navigation. Accessible navigation allows everyone to browse your site efficiently, regardless of interaction mode.

ARIA Landmarks (Criterion 9.2)

<header role="banner">
  <nav aria-label="Main menu">...</nav>
</header>
<main role="main">...</main>
<footer role="contentinfo">...</footer>

Skip links (Criterion 12.7)

<a href="#main-content" class="skip-link">
  Skip to main content
</a>

Two navigation systems (Criterion 12.1)

Each set of pages must offer at least two navigation systems: main menu, sitemap, search engine, or breadcrumb.

Tab order (Criterion 12.8)

Tab order must follow the logical content order. Avoid positive tabindex values.

Visible focus (Criterion 10.7)

*:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}