"Ga direct naar inhoud"-knop

Voeg gebruiksvriendelijkheid toe voor gebruikers die gebruik maken van hulptechnologiën of enkel met toetsenbord navigeren.

Deze knop geeft gebruikers de mogelijkheid om direct naar de inhoud van de pagina te springen. Hiermee wordt voorkomen dat de gebruiker langs onnodig veel elementen moet navigeren.

Aandachtspunten:

Voeg de knop als eerste element binnen de header toe.
Verwijs met een <a> naar het blok waar de content begint. Dit zal meestal de <main> zijn.
Let op: de knop is alleen zichtbaar wanneer deze focus krijgt. Gebruik tab om de knop te zien.
Voeg tabindex="-1" toe aan de main. De main is een element dat standaard geen focus kan accepteren aangezien het geen control of interactieve content is. Het toevoegen van de tabindex stelt het in staat om toch focus te accepteren.

Visueel voorbeeld:

Rijksoverheid

Html-voorbeeld header:

                
<header>
  <a href="#main-content" class="button focus-only">Ga direct naar inhoud</a>

  <a href="" class="ro-logo">
    <img src="static/img/ro-logo.svg" alt="Logo Rijksoverheid">
    Rijksoverheid
  </a>

  <nav aria-label="Navigatie voorbeeld header">
    <div>
      <ul>
          <li><a href="" aria-current="page">Hoofdpagina</a></li>
          <li><a href="">Ipsum</a></li>
          <li><a href="">Dolor</a></li>
      </ul>
    </div>
  </nav>
</header>

Voeg aan het naar toe te springen element de corresponderende id toe.

                
<main id="main-content" tabindex="-1">
  <!-- page content -->
</main>