WCAG 3.2.3: Consistente navigatie

Wat Deze Regel Betekent

WCAG Succescriterium 3.2.3 — Consistente navigatie (Niveau AA) stelt dat navigatiecomponenten die op meerdere pagina’s van een website worden herhaald, elke keer dat ze worden aangetroffen in dezelfde relatieve volgorde moeten verschijnen, tenzij de gebruiker zelf een wijziging in die volgorde heeft geactiveerd. Het criterium is van toepassing op elke set webpagina’s die een gemeenschappelijk doel delen of deel uitmaken van dezelfde site of applicatie.

De uitdrukking "same relative order" is belangrijk: WCAG vereist niet dat navigatie altijd hetzelfde aantal items bevat, noch dat er geen andere elementen tussen navigatie-items mogen verschijnen. Wat vereist wordt, is dat de volgorde van navigatielinks, zoals die verschijnt voor een gebruiker die door de interface navigeert, van pagina tot pagina consistent blijft. Als je primaire navigatie bijvoorbeeld “Home”, “Products”, “About” en “Contact” in die volgorde op de homepage weergeeft, moeten dezelfde items in dezelfde volgorde verschijnen op elke andere pagina waar dat navigatieblok bestaat.

Het criterium heeft betrekking op alle herhaalde navigatiemechanismen: primaire sitenavigatiemenu’s, kruimelpaden, groepen footerlinks, zijbalkmenu’s, “skip navigation”-links, zoekbalken en elke andere interactieve component die een gebruiker helpt door een site te navigeren. Het is van toepassing ongeacht of die componenten zijn geïmplementeerd als <nav>-landmarks, <ul>-lijsten met links, ARIA-verrijkte aangepaste menu’s of elk ander markup-patroon.

Wat telt als een voldoende resultaat: Navigatieblokken verschijnen in dezelfde relatieve volgorde op elke pagina waar ze worden herhaald. Items mogen worden toegevoegd, gemarkeerd of als actief worden aangeduid (bijv. de link naar de huidige pagina wordt visueel onderscheiden), zolang de algemene volgorde maar niet verandert. Een door de gebruiker geïnitieerde herschikking — zoals een aanpasbaar dashboard waar de gebruiker panelen naar nieuwe posities sleept — is ook voldoende, omdat de wijziging van de gebruiker afkomstig is.

Wat telt als een onvoldoende resultaat: Een hoofd­navigatie die “Home → Products → Contact → About” op de homepage weergeeft, maar “Home → About → Products → Contact” op een productdetailpagina, voldoet niet aan 3.2.3. Evenzo zou een site die voorwaardelijk extra links op willekeurige posities in de navigatie invoegt op basis van interne logica (zonder actie van de gebruiker) niet voldoen.

Officiële uitzondering: De specificatie stelt expliciet dat de eis niet van toepassing is wanneer de gebruiker de wijziging in volgorde heeft geïnitieerd. Dit is de enige normatieve uitzondering. Wijzigingen die worden aangestuurd door het systeem, serverlogica of personalisatie-algoritmen — niet rechtstreeks geactiveerd door de gebruiker — komen niet in aanmerking voor deze uitzondering.

Waarom Het Belangrijk Is

Consistente navigatie is fundamenteel voor cognitieve toegankelijkheid. Gebruikers die vertrouwen op ruimtelijk geheugen en voorspelbare patronen om zich te oriënteren — waaronder mensen met cognitieve beperkingen, aandachtsstoornissen, traumatisch hersenletsel of leeftijdsgebonden cognitieve achteruitgang — zijn sterk afhankelijk van de aanname dat de navigatie van een site zich elke keer op dezelfde plaats en in dezelfde volgorde bevindt. Wanneer navigatie onverwacht verschuift, moeten deze gebruikers de lay-out op elke pagina opnieuw aanleren, wat de cognitieve belasting en de kans op fouten of afhaken drastisch vergroot.

Voor blinde en slechtziende gebruikers die met schermlezers navigeren (NVDA, JAWS, VoiceOver), vermindert consistente navigatie de tijd die wordt besteed aan het zoeken naar bekende landmarks. Een schermlezergebruiker die heeft onthouden dat de “Contact”-link het vierde item in de hoofd­navigatie is, kan op elke pagina vier keer op de Tab-toets drukken om deze te bereiken — maar alleen als de volgorde gegarandeerd hetzelfde blijft. Inconsistente volgorde vernietigt deze efficiëntie en dwingt de gebruiker om bij elke paginalading de volledige navigatie te beluisteren.

Voor motorisch beperkte gebruikers die afhankelijk zijn van uitsluitend toetsenbordnavigatie, schakeltoegang of oogtracking, heeft elke extra toetsaanslag of hoofdbeweging een reële kost. Voorspelbare navigatie vermindert het aantal interacties dat nodig is om vaak bezochte bestemmingen te bereiken. Volgens de Wereldgezondheidsorganisatie leven wereldwijd meer dan 1,3 miljard mensen met een of andere vorm van beperking, van wie velen afhankelijk zijn van ondersteunende technologieën die direct profiteren van consistente, voorspelbare interfaces.

Voor gebruikers met leesstoornissen zoals dyslexie is het scannen van een navigatiebalk al inspannend. Consistente positionering en volgorde betekent dat zij kunnen vertrouwen op visuele ankers — positie, vorm, kleur — in plaats van labels elke keer opnieuw te moeten lezen.

Een concreet scenario uit de echte wereld: stel je een patiënt voor die de website van een ziekenhuis gebruikt om vervolgafspraken te boeken. De navigatie op de homepage vermeldt “Services”, “Appointments”, “Doctors” en “Contact” in die volgorde. De patiënt navigeert naar de profielpagina van een arts en zoekt “Appointments” op de tweede positie — maar op die pagina is de navigatie opnieuw geordend zodat “Doctors” eerst komt, gevolgd door “Appointments”. De patiënt, al gestrest, moet het hele menu opnieuw scannen. Voor een gebruiker met een cognitieve beperking of beperkte geletterdheid kan deze frictie het verschil betekenen tussen het voltooien van de taak en volledig opgeven.

Naast toegankelijkheid heeft consistente navigatie meetbare SEO- en bruikbaarheidsvoordelen. Zoekmachinecrawlers doorlopen navigatielinks om content te ontdekken en te indexeren; een stabiele linkstructuur verbetert de crawlefficiëntie en de interne linkwaarde. Gebruikersonderzoek toont consequent aan dat voorspelbare navigatie de tijd voor taakvoltooiing en het aantal fouten voor alle gebruikers vermindert, niet alleen voor mensen met een beperking.

Gerelateerde Axe-core-regels

WCAG 3.2.3 vereist handmatige tests. Er is geen geautomatiseerde axe-core-regel die inconsistente navigatievolgorde kan signaleren, omdat geautomatiseerde tools de context over meerdere pagina’s missen die nodig is om navigatiereeksen te vergelijken. Een geautomatiseerde scanner beoordeelt één pagina in isolatie en kan niet waarnemen of de navigatie op die pagina verschilt van de navigatie op twintig andere pagina’s op dezelfde site.

• Handmatige vergelijking over meerdere pagina’s (geen axe-regel-ID): Testers moeten meerdere pagina’s binnen dezelfde site bezoeken en de volgorde van navigatie-items op elke pagina handmatig vastleggen, en die registraties vervolgens vergelijken. Geautomatiseerde tools kunnen deze controle niet uitvoeren omdat ze meerdere pagina’s tegelijk zouden moeten parsen, status over paginaladingen heen zouden moeten bijhouden en semantisch oordeel zouden moeten vellen over welke elementen hetzelfde navigatiecomponent vormen — allemaal taken die menselijk contextueel redeneren vereisen.
• Waarom automatisering tekortschiet: Zelfs heuristische tools die navigatiegerelateerde problemen signaleren, controleren doorgaans op de aanwezigheid van navigatielandmarks (zoals de axe-regel landmark-one-main of region), niet op de consistentie van de volgorde over pagina’s heen. Vergelijking van volgorde vereist een sitebrede auditmethodologie, geen scan van één pagina. Daarom wordt 3.2.3 in alle grote toegankelijkheidstestframeworks, waaronder axe-core, Lighthouse en IBM Equal Access Checker, geclassificeerd als een criterium dat handmatige beoordeling vereist.

Hoe te Testen

1. Voer een geautomatiseerde scan uit voor basiscontext: Gebruik axe DevTools, Lighthouse of een browserextensie op representatieve pagina’s om te bevestigen dat navigatie-elementen correct zijn gemarkeerd als <nav>-landmarks of met role='navigation'. Hoewel deze tools volgorde-inconsistenties niet zullen signaleren, helpen ze je te identificeren wat op verschillende pagina’s als navigatie wordt behandeld. Documenteer eventuele problemen met de landmark-structuur voordat je doorgaat naar handmatige controles.
2. Selecteer een representatieve steekproef van pagina’s: Kies ten minste vijf tot tien pagina’s uit verschillende secties van de site — homepage, een categoriepagina, een product- of artikeldetailpagina, een formulierpagina en de contactpagina. Als de site duizenden pagina’s heeft, gebruik dan een gestratificeerde steekproef die alle belangrijke templates dekt. Noteer de URL en het paginatype voor elke pagina.
3. Breng de navigatievolgorde handmatig in kaart: Open op elke geselecteerde pagina de toegankelijkheidsboom van de browser (Chrome DevTools → Accessibility-paneel, of Firefox Accessibility Inspector) en noteer elke link binnen de primaire navigatie in de volgorde waarin ze in de DOM verschijnen. Noteer ook de volgorde zoals die visueel verschijnt. Als CSS items visueel in een andere volgorde zet (bijv. met flex-direction: row-reverse of order-eigenschappen), kan de visuele volgorde afwijken van de DOM-volgorde — beide moeten consistent zijn.
4. Vergelijk over pagina’s heen: Plaats je lijsten met navigatievolgorde naast elkaar. Markeer elke pagina waar de volgorde van gedeelde navigatie-items afwijkt van de basislijn die op de homepage is vastgesteld. Noteer welke items zijn verplaatst en in welke richting.
5. Toetsenbordnavigatietest (NVDA + Firefox): Open NVDA, start Firefox en navigeer naar de homepage. Druk op D om naar de volgende landmark-regio te springen en lokaliseer de hoofd­navigatie. Gebruik de Tab-toets om door navigatielinks te gaan en spreek de volgorde hardop uit of noteer deze. Navigeer vervolgens naar een tweede pagina (bijv. een interne artikelpagina) en herhaal dit. Luister naar eventuele wijzigingen in de volgorde waarin links worden aangekondigd.
6. Schermlezertest (VoiceOver + Safari op macOS): Schakel VoiceOver in (Command + F5), open Safari en gebruik de Web Rotor (Control + Option + U) om het menu Links of Landmarks te openen. Navigeer naar de hoofd­navigatie en noteer de volgorde van de items. Herhaal dit op ten minste drie verschillende paginatypen en vergelijk.
7. JAWS + Chrome-test: Open JAWS, start Chrome en druk op R om door regio’s te bladeren totdat je de hoofd­navigatie bereikt. Tab door de links en leg de volgorde vast. Herhaal dit voor verschillende paginatypen.
8. Controleer door de gebruiker geïnitieerde uitzonderingen: Als de site personalisatie- of navigatie-aanpassingsfuncties biedt, controleer dan of herschikking alleen plaatsvindt na een expliciete gebruikersactie (bijv. de gebruiker klikt op “Customize Menu” en sleept items). Bevestig dat de herschikte staat vervolgens consistent wordt bewaard — de nieuwe volgorde moet zelf consistent blijven op alle pagina’s nadat de gebruiker deze heeft ingesteld.

Hoe te Herstellen

Inconsistente server-side rendering — Onjuist

<!-- Homepage navigation -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

<!-- Product detail page navigation — order changed by CMS template -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
    <li><a href='/products'>Products</a></li>
  </ul>
</nav>

Inconsistente server-side rendering — Juist

<!-- Shared navigation partial (e.g., _nav.html or a component) used on every page -->
<!-- The active page is indicated with aria-current, not by reordering -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/' aria-current='page'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- On the Products page, only aria-current moves — the order stays identical -->

CSS visuele herschikking die inconsistentie creëert — Onjuist

<!-- DOM order: Home, Products, About, Contact -->
<!-- CSS on interior pages uses flex order to visually move Contact first -->
<style>
  /* Applied only on interior page templates */
  nav ul li:last-child { order: -1; }
</style>
<nav aria-label='Main navigation'>
  <ul style='display:flex'>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- Visual order becomes Contact, Home, Products, About — inconsistent with homepage -->

CSS visuele herschikking die inconsistentie creëert — Juist

<!-- Use consistent DOM order and consistent CSS across all templates -->
<!-- Do not use CSS 'order' property to rearrange navigation items differently per template -->
<nav aria-label='Main navigation'>
  <ul style='display:flex'>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- Same DOM order and same CSS flex order on every page template -->

Dynamische navigatie herschikt door algoritme — Onjuist

<!-- JavaScript reorders nav links based on most-visited analytics without user action -->
<script>
  // Anti-pattern: fetches user behaviour data and reorders nav items automatically
  fetch('/api/user-nav-preferences').then(r => r.json()).then(order => {
    const nav = document.querySelector('nav ul');
    order.forEach(id => nav.appendChild(document.getElementById(id)));
  });
</script>
<nav aria-label='Main navigation'>
  <ul>
    <li id='nav-home'><a href='/'>Home</a></li>
    <li id='nav-products'><a href='/products'>Products</a></li>
    <li id='nav-about'><a href='/about'>About</a></li>
    <li id='nav-contact'><a href='/contact'>Contact</a></li>
  </ul>
</nav>

Dynamische navigatie herschikt door algoritme — Juist

<!-- If personalisation is desired, require an explicit user action and keep order stable otherwise -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/about'>About</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>
<!-- Personalisation button lets user reorder — change only applies after they interact -->
<button type='button' aria-controls='main-nav-list' id='customize-nav'>Customize Navigation Order</button>
<!-- The user-chosen order is then persisted consistently across all pages -->

Veelvoorkomende Fouten

• Gebruik van verschillende CMS-templates die elk de navigatie onafhankelijk definiëren, waardoor na verloop van tijd subtiele verschillen in volgorde insluipen wanneer templates afzonderlijk worden bijgewerkt in plaats van vanuit één gedeelde component of partial.
• “Featured” of seizoensgebonden navigatie-items naar andere posities promoveren op basis van marketingcampagnes zonder ervoor te zorgen dat de rest van de navigatievolgorde ongewijzigd blijft — bijvoorbeeld “Sale” tijdelijk naar positie twee verplaatsen op sommige pagina’s en naar positie vijf op andere.
• Gebruik van CSS order, flex-direction: row-reverse of CSS Grid-positionering om navigatie-items visueel te herschikken op verschillende manieren in paginatemplates, waardoor een mismatch ontstaat tussen de visuele volgorde (die ziende gebruikers zien) en de DOM-volgorde (die toetsenbord- en schermlezergebruikers volgen).
• Contextgevoelige navigatie-items op willekeurige posities invoegen — bijvoorbeeld een “Back to Category”-link als tweede item toevoegen op productpagina’s maar niet op andere pagina’s, waardoor alle volgende items één positie opschuiven en de verwachte volgorde wordt doorbroken.
• A/B-test- of analysetools toestaan navigatielinks te herschikken als onderdeel van experimentvarianten, zonder rekening te houden met het feit dat de herschikking inconsistent wordt toegepast over pagina’s en sessies heen.
• Het kruimelpad als vrijgesteld beschouwen van dit criterium terwijl het in feite een herhaald navigatiemechanisme is — kruimelpaden die op verschillende posities ten opzichte van andere pagina-elementen verschijnen in verschillende templates, schenden ook 3.2.3.
• De footer-navigatie in een andere volgorde zetten dan de hoofd­navigatie wanneer de footerlinks de hoofd­navigatie dupliceren — als beide op elke pagina verschijnen, moeten beide hun volgorde onafhankelijk en in relatie tot elkaar consistent houden.
• JavaScript-gestuurde navigatieverbeteringen toepassen die items herschikken op basis van scrollpositie, viewportgrootte of sessiegegevens zonder initiatief van de gebruiker — bijvoorbeeld een megamenu dat dynamisch verschillende topniveaucategorieën naar voren haalt afhankelijk van welke sectie van de site de gebruiker bezoekt.
• Verzuimen de navigatieconsistentie te auditen na een siteredesign of CMS-migratie, in de veronderstelling dat ontwikkelaars de oorspronkelijke volgorde vanzelf zullen reproduceren, terwijl in werkelijkheid verschillende paginatypen door verschillende teamleden vanaf nul worden herbouwd.
• “Consistente navigatie” verwarren met “op elke pagina dezelfde navigatie” — teams concluderen soms ten onrechte dat het toevoegen of verwijderen van navigatie-items voor bepaalde gebruikersrollen (bijv. ingelogd vs. gast) in strijd is met 3.2.3. Dat is niet zo, zolang de relatieve volgorde van gedeelde items ongewijzigd blijft.

Relatie met de Toegankelijkheidsregelgeving van Turkije

Turkije’s Presidential Circular No. 2025/10, gepubliceerd in het Staatsblad (No. 32933) op 21 juni 2025, stelt bindende toegankelijkheidsverplichtingen vast voor een brede reeks publieke en private entiteiten die digitale diensten in Turkije aanbieden. De circulaire verplicht naleving van internationaal erkende toegankelijkheidsstandaarden — waarbij WCAG 2.2 Niveau AA dient als primaire technische referentie — en koppelt naleving aan het Erişilebilirlik Logosu (Accessibility Logo), een certificeringsmerk dat wordt uitgegeven door het Ministerie van Gezin en Sociale Diensten aan entiteiten die de vereiste toegankelijkheidsdrempel halen.

WCAG 3.2.3 Consistente navigatie is een criterium op Niveau AA, wat betekent dat het een verplichte eis is voor entiteiten die het Erişilebilirlik Logosu willen verkrijgen. Organisaties die geen consistente navigatie over hun digitale diensten heen bieden, zullen niet voldoen aan het volledige AA-conformiteitsprofiel dat voor certificering vereist is, ongeacht hun prestaties op andere criteria.

De volgende typen entiteiten vallen onder Presidential Circular 2025/10 en moeten 3.2.3-naleving daarom als een wettelijke verplichting behandelen in plaats van als een best practice-aanbeveling:

• Publieke instellingen en overheidsinstanties op alle niveaus, waaronder ministeries, gemeenten en aan de staat gelieerde organen, waarvan de websites en digitale portalen consistent navigeerbaar moeten zijn in alle secties.
• E-commerceplatforms die in Turkije actief zijn, waar navigatieconsistentie bijzonder cruciaal is omdat gebruikers zich bewegen tussen homepage, categorie-, product-, winkelwagen- en afrekenpagina’s — die doorgaans allemaal dezelfde navigatiebalk delen.
• Banken en financiële instellingen die onder de Turkse bankwetgeving vallen, waarvan onlinebankportalen en informatieve websites voorspelbare navigatie moeten bieden om alle klanten te bedienen, inclusief mensen met cognitieve of motorische beperkingen.
• Ziekenhuizen en zorgaanbieders, waar patiënten — vaak in stressvolle situaties — vertrouwen op consistente navigatie om afspraken, testresultaten en noodcontactinformatie te vinden zonder cognitieve frictie.
• Telecommunicatiebedrijven met 200,000 of meer abonnees, waarvan klantenportalen, supportsites en accountbeheersinterfaces navigatieconsistentie moeten behouden over mogelijk duizenden pagina’s en gebruikersgerichte templates.
• Reisbureaus en particuliere vervoersbedrijven, waar meerstapsboekingsflows die zoeken, selectie, passagiersgegevens en betalingspagina’s omvatten, navigatie in een consistente volgorde moeten presenteren gedurende het hele traject.
• Particuliere scholen die zijn gemachtigd door het Ministry of National Education (MoNE), waarvan de websites leerlingen, ouders en personeel bedienen — waaronder mensen met leerstoornissen die sterk vertrouwen op voorspelbare navigatie om educatieve bronnen te vinden.

Voor organisaties in Turkije die digitale diensten bouwen of auditen, moet 3.2.3 worden opgenomen in het kwaliteitsborgingsproces op het niveau van template- en componentontwerp. Het gebruik van een gedeelde navigatiecomponent die vanuit één “single source of truth” wordt gerenderd — of dit nu een server-side include, een front-end frameworkcomponent of een globaal element in een headless CMS is — is zowel de meest betrouwbare technische aanpak als de meest verdedigbare nalevingshouding onder de vereisten van de circulaire. Toegankelijkheidsaudits die worden ingediend als onderdeel van het aanvraagproces voor het Erişilebilirlik Logosu, moeten verificatie van de navigatievolgorde over pagina’s heen opnemen als een gedocumenteerde teststap.