"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.

Benodigde stappen

Importeer component via npm

@use "@minvws/manon/skip-to-content";

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.

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Voorbeelden

Visueel voorbeeld

Toelichting:

De "Ga direct naar inhoud"-knop is standaard verborgen voor visuele gebruikers, maar wordt zichtbaar wanneer deze focus krijgt via toetsenbordnavigatie. Dit zorgt ervoor dat de knop niet de visuele opmaak verstoort, maar wel beschikbaar blijft voor gebruikers die er baat bij hebben. Gebruik de Tab-toets om de knop te activeren en zichtbaar te maken in het onderstaande voorbeeld.

HTML-voorbeeld header:

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

  <nav aria-label="Navigatie voorbeeld header">
    <div>
      <ul>
          <li><a href="" aria-current="page">Voorbeeld-link 1</a></li>
          <li><a href="">Voorbeeld-link 2</a></li>
          <li><a href="">Voorbeeld-link 3</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>