Campus Design System

Appearance

3.2.3 Consistente Navigatie niveau AA ​

Uitleg ​

Het WCAG-criterium 3.2.3 Consistente Navigatie vereist dat de navigatie op een webpagina consistent is, zodat gebruikers kunnen begrijpen hoe ze zich kunnen verplaatsen op verschillende pagina's binnen een website of applicatie. Dit helpt gebruikers de interface beter te begrijpen, vooral wanneer ze opnieuw dezelfde website of app gebruiken. Consistentie in navigatie betekent dat elementen zoals menu's, knoppen, en navigatielinks op een voorspelbare manier functioneren en op verschillende pagina's dezelfde plaats en werking hebben.

Wat betekent dit in de praktijk? ​

Voor gebruikers is het belangrijk dat ze zich snel kunnen oriënteren en door een website kunnen navigeren zonder telkens opnieuw te moeten leren waar ze moeten klikken of hoe ze door de inhoud moeten bewegen. Als navigatie-elementen op verschillende pagina's van een site op verschillende manieren werken of op verschillende plaatsen verschijnen, kan dit verwarring veroorzaken.

Bijvoorbeeld:

  • Als een navigatiemenu op de ene pagina bovenaan de website verschijnt, maar op een andere pagina aan de zijkant, kan dit verwarring veroorzaken voor gebruikers.
  • Als de volgorde van links of knoppen in een menu op verschillende pagina’s anders is, kan dit verwarrend zijn voor gebruikers die gewend zijn aan een bepaalde structuur.

Voorbeeld van het probleem ​

Stel je voor dat een website op de homepage een navigatiemenu bovenaan heeft, maar op de contactpagina bevindt het menu zich plotseling aan de zijkant van de pagina. Dit zou verwarrend kunnen zijn voor de gebruiker, omdat de indeling en locatie van de navigatie onverwachts veranderen.

html
<!-- Homepage -->
<nav style="position: absolute; top: 0;">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Over ons</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<!-- Contactpagina -->
<nav style="position: absolute; left: 0;">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Over ons</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

In dit voorbeeld verandert de locatie van de navigatie op verschillende pagina's, wat voor verwarring kan zorgen bij de gebruiker.

Oplossing voor dit probleem ​

Een oplossing zou kunnen zijn om consistent dezelfde locatie en lay-out voor de navigatie te gebruiken, ongeacht welke pagina de gebruiker bekijkt. Dit geldt voor zowel de visuele locatie als de volgorde van de menu-items. Als de navigatie op de homepage bovenaan de pagina staat, moet dit ook zo blijven op andere pagina's.

html
<!-- Consistente navigatie op alle pagina's -->
<nav style="position: fixed; top: 0;">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Over ons</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Nu blijft de navigatie op elke pagina op dezelfde plaats, wat voor de gebruiker een consistente ervaring biedt.

Belangrijke overwegingen ​

  • Navigatie-elementen moeten voorspelbaar zijn: Gebruikers verwachten dat de navigatie-elementen zoals menu’s, knoppen en links altijd op dezelfde plek en op dezelfde manier werken. Als een navigatie-element ergens anders verschijnt of anders werkt, kan dit verwarring veroorzaken.

  • Responsieve navigatie: Als je een responsief ontwerp hebt, waarbij de lay-out verandert afhankelijk van de schermgrootte (bijvoorbeeld op mobiele apparaten), zorg er dan voor dat de navigatie ook consistent blijft. Bijvoorbeeld, als het menu op desktop een horizontale balk is, kan het op mobiel een verticaal menu worden. De functie en de volgorde van de items moeten echter hetzelfde blijven.

    Het doel is dat de gebruiker, ongeacht de grootte van het apparaat of de pagina die ze bezoeken, dezelfde ervaring heeft met de navigatie.

Voorbeeld van toepassing ​

Stel dat een gebruiker een website bezoekt die drie pagina's heeft: Home, Over ons, en Contact. De navigatie zou op alle drie de pagina's hetzelfde moeten zijn, zowel qua volgorde van de links als qua visuele positie. Dit betekent dat als de gebruiker op de "Home" pagina is, het navigatiemenu bovenaan de pagina staat, en als ze naar de "Over ons" of "Contact" pagina gaan, het menu nog steeds op dezelfde plaats staat en dezelfde volgorde van items heeft.

html
<!-- Consistent navigatie op verschillende pagina's -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Over ons</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

In dit geval blijven de menu-items altijd in dezelfde volgorde en dezelfde plaats, wat de gebruikerservaring vergemakkelijkt.

Testen en hulpmiddelen ​

  • WAVE Accessibility Tool: Gebruik WAVE om te controleren of de navigatie consistent is op verschillende pagina’s van je site. WAVE Tool.
  • Axe Accessibility Tool: Aangezien Axe ook kijkt naar algemene toegankelijkheid en consistentie, kan het helpen om navigatie-elementen te controleren. Axe Tool.

Referenties ​