"Terug naar hoofdmenu"-knop

Bied een soepele gebruikerservaring aan door bij lange pagina's en documenten gebruik te maken van de "Terug naar hoofdmenu"-knop.

Dit zorgt voor een extra mogelijkheid tot navigeren binnen de pagina. Hierdoor is het voor alle gebruikers mogelijk om snel terug te springen naar het hoofdmenu.

Aandachtspunten

Zorg dat de hoofdnavigatie een id heeft. Bijvoorbeeld: id="main-nav"
Voeg aan het einde van de <main> een link toe.
1. Verwijs de link naar het id van de hoofdnavigatie. Bijvoorbeeld: href="#main-nav".
2. Geef de link de classes button en to-top.
3. Geef de link een duidelijke tekst, zoals "Terug naar het hoofdmenu", en voeg het to-top-icoon toe.

Let op: voeg het icoon bij voorkeur aan de link toe als losse <span> met aria-hidden="true".

Zie het HTML-voorbeeld voor details.

Visueel voorbeeld

Zie de knop rechtsonder in beeld voor het visuele voorbeeld.

HTML-voorbeeld

                <a href="#main-nav" class="button to-top">
  <span class="icon icon-to-top" aria-hidden="true"></span>
  Terug naar het hoofdmenu
</a>

HTML-voorbeeld plaatsing:

                <!DOCTYPE html>
<html lang="nl">
  <head>
  <!-- head content -->
  </head>
  <body>
    <header>
        <!-- Skip to content -->
        <!-- Logo -->

        <nav aria-label="Kruimelpad" class="breadcrumb-bar" id="main-nav">
          <!-- Navigation -->
        </nav>
      </header>

      <main>
        <!-- Page content -->
        <a href="#main-nav" class="button to-top icon icon-to-top" title="Terug naar het hoofdmenu">Terug naar het hoofdmenu</a>
      </main>

      <footer>
        <!-- Footer content -->
      </footer>
  </body>
</html>