Navigatie

Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.

Navigatie helpt gebruikers door je website bewegen. Het toont de structuur van je site en geeft toegang tot verschillende pagina’s. Een goede navigatie werkt voor iedereen: met muis, toetsenbord, touch en schermlezer.

Belangrijke termen:

• Navigatiemenu: De lijst met navigatie-items
• Dropdown: Een uitklapbaar subnavigatie met extra links
• Mobile toggle: De knop waarmee je het menu opent en sluit op mobiele apparaten

Technische opbouw

• (1.3.1) Gebruik het <nav>-element voor de hoofdcontainer
• (2.4.6) De navigatie moet een toegankelijke naam hebben die het onderwerp van de navigatie beschrijft

Navigatiemenu

• (4.1.2) Gebruik <a>-elementen voor navigatielinks
• (4.1.2) Gebruik <button>-elementen voor dropdown toggles
• (1.3.1) Navigatie-items moeten gestructureerd zijn in een <ul> of <ol>-element
• (4.1.1) Elke subnavigatie moet een uniek id hebben
• (4.1.2) Geopende dropdown toggles moeten aria-expanded="true" hebben
• (4.1.2) Gesloten dropdown toggles moeten aria-expanded="false" hebben
• (4.1.2) Dropdown toggles moeten aria-haspopup="true" hebben
• (1.3.1) Dropdown toggles moeten aria-controls hebben met het id van de bijbehorende subnavigatie
• (1.3.1) Gesloten subnavigaties moeten verborgen zijn (hidden of display: none)

Mobile toggle

• (4.1.2) Gesloten mobile toggle moet aria-expanded="false" hebben
• (4.1.2) Geopende mobile toggle moet aria-expanded="true" hebben
• (4.1.2) De mobile toggle moet aria-haspopup="true" hebben
• (1.3.1) De mobile toggle moet aria-controls hebben met het id van de navigatie
• (2.4.6) De mobile toggle moet een toegankelijke naam hebben die het resultaat van de actie beschrijft

Toetsenbordbediening

Navigatiemenu

• Enter (op een link):
  • Volgt de link
• Enter of Spatie (op een dropdown toggles):
  • Opent een dropdown als het gesloten is
  • Sluit een dropdown als het geopend is
• Tab:
  • Gaat naar het volgende focusbare element
• Escape:
  • Sluit een dropdown en zet focus terug op toggle

Mobile toggle:

• Enter of Spatie:
  • Opent de navigatie als het gesloten is
  • Sluit de navigatie als het geopend is
• Tab:
  • Gaat naar het volgende focusbare element

Focus management

• Focus blijft op de mobile toggle na openen/sluiten van hoofdmenu
• Focus blijft op dropdown toggle na openen/sluiten van dropdown
• Bij Escape in dropdown: focus gaat terug naar bijbehorende toggle
• Bij klik buiten navigatie: alle dropdowns sluiten, focus blijft waar deze was

Voorbeeld navigatie

See the Pen Navigatie by Niek (@niekd) on CodePen.

Bronnen

• Menus & Menu Buttons