WCAG 2.4.8: Locatie

Wat Deze Regel Betekent

WCAG 2.4.8 Location is een criterium op niveau AAA onder het principe Bedienbaar. Het stelt: "Information about the user's location within a set of Web pages is available." In praktische termen betekent dit dat je website duidelijke, blijvende signalen moet bieden die gebruikers op elk moment precies vertellen waar ze zich bevinden binnen de bredere structuur van de site.

Dit criterium is van toepassing wanneer een website uit meerdere pagina's bestaat die zijn georganiseerd in een betekenisvolle hiërarchie of volgorde — bijvoorbeeld een e-commercesite met categorieën, subcategorieën en productpagina's, of een overheidsportaal met departementen en subsecties. Als een gebruiker op een pagina terechtkomt, moet die de vraag "Waar ben ik op deze site?" kunnen beantwoorden zonder te hoeven raden of uitsluitend op zijn geheugen te vertrouwen.

Aanvaardbare technieken om aan dit criterium te voldoen zijn onder andere, maar niet beperkt tot:

• Breadcrumbs — een navigatiehulpmiddel dat het pad toont van de homepage van de site naar de huidige pagina (bijv. Home > Products > Laptops > 15-inch Models).
• Sitemaps — een speciale pagina of panel dat de algemene structuur van de site weergeeft en de huidige locatie markeert of accentueert.
• Gehighlighte of visueel onderscheidende navigatielinks — navigatiemenu's die de actieve sectie of pagina duidelijk markeren, vaak aangevuld met een aria-current-attribuut voor gebruikers van ondersteunende technologie.
• Genummerde stappen in een meerstapsproces — indicatoren zoals "Step 2 of 5" in een checkout of formulierwizard die de sequentiële positie communiceren.

Een pagina voldoet aan dit criterium als er ten minste één betrouwbare mechanisme beschikbaar is dat de gebruiker informeert over zijn huidige locatie binnen de structuur van de site. Een pagina voldoet niet als er geen dergelijk mechanisme bestaat — bijvoorbeeld als de navigatiebalk geen visuele of programmatische aanduiding van de huidige pagina heeft, er geen breadcrumb is en er geen stapindicator wordt getoond.

Het is belangrijk op te merken dat WCAG 2.4.8 geen specifieke techniek voorschrijft; het vereist dat er enig effectief locatie-indicator aanwezig is. Maar om de indicator echt toegankelijk te maken, moet deze ook waarneembaar zijn voor ondersteunende technologieën zoals schermlezers, en niet alleen visueel duidelijk voor ziende gebruikers. Dit betekent dat puur visuele indicatoren (zoals een vetgedrukte link zonder wijziging in het toegankelijke label) op zichzelf mogelijk onvoldoende zijn als ze niet programmatisch worden blootgelegd.

Er zijn geen officiële uitzonderingen door WCAG vastgelegd voor dit criterium, afgezien van het algemene begrip dat het van toepassing is op reeksen gerelateerde pagina's. Een enkele, op zichzelf staande webpagina die geen deel uitmaakt van een grotere set, hoeft niet aan dit criterium te voldoen, omdat er geen "locatie binnen een set" is om te communiceren.

Waarom Het Belangrijk Is

Weten waar je je bevindt binnen een digitale omgeving is een basisbehoefte op het gebied van oriëntatie die de meeste gebruikers vanzelfsprekend vinden — totdat de aanwijzingen ontbreken. WCAG 2.4.8 pakt een reële en wijdverbreide barrière aan die verschillende groepen gebruikers treft.

Gebruikers met cognitieve beperkingen behoren tot de meest significant getroffen groepen. Aandoeningen zoals aandachtstekortstoornis, geheugenstoornissen en niet-aangeboren hersenletsel kunnen het moeilijk maken om het eigen pad door een complexe site te volgen. Zonder een breadcrumb of een vergelijkbaar signaal kan een gebruiker gedesoriënteerd raken, niet weten hoe hij terug moet keren naar een bovenliggende categorie, of niet begrijpen hoe de huidige pagina zich verhoudt tot content die hij al heeft gezien. Volgens de Wereldgezondheidsorganisatie leven wereldwijd meer dan één miljard mensen met een vorm van beperking, en cognitieve beperkingen vormen een aanzienlijk en vaak onderbediend deel van die populatie.

Schermlezergebruikers — doorgaans blind of slechtziend — zijn sterk afhankelijk van programmatische structuur om de context van een pagina te begrijpen. Een ziende gebruiker kan in één oogopslag naar een geaccentueerde navigatielink of een vetgedrukt breadcrumb-item kijken om zich direct te oriënteren. Een schermlezergebruiker daarentegen moet de pagina interpreteren via sequentiële audio-uitvoer. Zonder een aria-current="page"-attribuut op de actieve navigatielink of een correct gestructureerde breadcrumb met toegankelijke labels, ontvangen zij geen gelijkwaardig oriëntatiesignaal en moeten ze mogelijk uitgebreid navigeren om te bepalen waar ze zijn.

Gebruikers met motorische beperkingen die navigeren via toetsenbord, schakelbediening of oogvolgapparaten profiteren van locatie-indicatoren omdat deze de noodzaak van redundante, inspannende navigatie verminderen. Als een gebruiker al weet dat hij zich in de sectie "Support" van een bedrijfswebsite bevindt, hoeft hij niet telkens de volledige navigatiestructuur opnieuw te scannen wanneer een nieuwe pagina wordt geladen.

Neem een concreet scenario: een gebruiker met beginnende dementie bladert door het online portaal van een Turkse bank om informatie over hypotheekrentes te vinden. Die klikt door meerdere pagina's en raakt er niet zeker van of hij zich nog in de particuliere bankensectie bevindt of is afgedwaald naar het zakelijk bankieren. Zonder een breadcrumb of een geaccentueerd navigatie-item dat duidelijk de huidige sectie markeert, kan de gebruiker gefrustreerd de browser sluiten of een kostbare fout maken — zoals het aanvragen van het verkeerde product. Een eenvoudige, goed geïmplementeerde breadcrumb (bijv. Ana Sayfa > Bireysel Bankacılık > Krediler > Konut Kredisi) zou deze verwarring onmiddellijk oplossen.

Naast toegankelijkheid bieden locatie-indicatoren meetbare voordelen op het gebied van gebruiksvriendelijkheid en SEO. Breadcrumb-gestructureerde data (met Schema.org BreadcrumbList) kunnen rechtstreeks in Google-zoekresultaten verschijnen als rich snippets, wat de doorklikratio verbetert. Een duidelijke sitestructuur verlaagt ook het bouncepercentage, omdat gebruikers die begrijpen waar ze zijn eerder geneigd zijn gerelateerde content te verkennen dan de site te verlaten.

Gerelateerde Axe-core-regels

WCAG 2.4.8 vereist handmatige tests omdat geautomatiseerde tools niet betrouwbaar kunnen bepalen of een locatie-mechanisme aanwezig, betekenisvol en toegankelijk is in alle contexten. Er is geen axe-core-regel die direct aan dit criterium is gekoppeld. Dit is waarom automatisering tekortschiet en wat handmatige evaluatie moet dekken:

• Aanwezigheid van een locatie-mechanisme (handmatig) — Een geautomatiseerde scanner kan detecteren of er een breadcrumb-element in de DOM aanwezig is, maar kan niet bepalen of die breadcrumb de feitelijke informatiearchitectuur van de site correct weerspiegelt, of hij op elke pagina binnen een set is geplaatst, of dat het het juiste type locatie-indicator is voor het navigatiemodel van de site. Een tool kan een <nav aria-label="breadcrumb">-element vinden en geen probleem rapporteren, zelfs als de breadcrumb slechts op sommige pagina's verschijnt of onjuiste hiërarchie-informatie bevat.
• Nauwkeurigheid en volledigheid (handmatig) — Geautomatiseerde tools kunnen niet verifiëren dat de locatie-informatie accuraat is. Een breadcrumb die altijd "Home > Current Page" toont, ongeacht de werkelijke hiërarchie, zou een geautomatiseerde scan doorstaan maar niet aan dit criterium voldoen, omdat hij de locatie van de gebruiker binnen de reeks pagina's niet waarheidsgetrouw weergeeft.
• Programmatische blootstelling (gedeeltelijk geautomatiseerd) — Hoewel axe-core in sommige configuraties ontbrekende aria-current-attributen op navigatielinks kan signaleren, kan het niet definitief bepalen of het ontbreken van aria-current een schending van 2.4.8 is zonder de algehele sitestructuur en de rol van elk navigatie-element te begrijpen.
• Consistentie binnen de paginaset (handmatig) — Een locatie-mechanisme moet beschikbaar zijn in de volledige relevante reeks pagina's, niet alleen op geselecteerde pagina's. Geautomatiseerde scans evalueren doorgaans één pagina tegelijk en kunnen niet beoordelen of een mechanisme consistent aanwezig is op een hele site of sectie.

Hoe te Testen

1. Identificeer de paginaset: Bepaal of de te testen pagina behoort tot een set gerelateerde pagina's met een gedefinieerde hiërarchie (bijv. een meerlagige navigatiestructuur, een stapsgewijze wizard of een gecategoriseerde contentbibliotheek). Als de pagina een op zichzelf staand document is, is dit criterium mogelijk niet van toepassing.
2. Voer een geautomatiseerde scan uit als basislijn: Gebruik axe DevTools (browserextensie) of Lighthouse in Chrome DevTools om een toegankelijkheidsaudit uit te voeren. Hoewel geen van beide tools 2.4.8 direct controleert, kun je zoeken naar gerelateerde problemen zoals ontbrekende aria-current-attributen op navigatielinks, ongelabelde <nav>-landmarks en ontbrekende breadcrumb-structuur. Deze bevindingen ondersteunen — maar vervangen niet — de handmatige beoordeling.
3. Inspecteer visueel op een locatie-mechanisme: Zoek naar een breadcrumb, een geaccentueerde of visueel onderscheidende actieve link in de navigatie, een stapenteller of een link naar een sitemap. Controleer of het mechanisme de positie van de huidige pagina in de sitestructuur nauwkeurig weergeeft.
4. Test met een schermlezer — NVDA + Firefox: Open NVDA, navigeer naar de pagina en druk op D om door landmarks te bladeren. Lokaliseer de navigatielandmark(s) en luister naar eventuele aanduiding van de huidige pagina of sectie. Controleer of het actieve navigatie-item anders wordt aangekondigd (bijv. "current page" of iets dergelijks, doorgaans via aria-current="page"). Doorloop de breadcrumb indien aanwezig en verifieer dat elk niveau wordt aangekondigd met zijn linktekst en dat de huidige locatie duidelijk wordt geïdentificeerd.
5. Test met VoiceOver + Safari (macOS/iOS): Schakel VoiceOver in (Command + F5), navigeer naar de breadcrumb of hoofd­navigatie met VO + U om de Rotor te openen, en selecteer "Links" of "Landmarks". Luister hoe het actieve navigatie-item of het huidige breadcrumb-item wordt aangekondigd. Controleer of de huidige locatie te onderscheiden is van andere navigatie-items.
6. Test met JAWS + Chrome: Gebruik Insert + F7 om de Links List te openen en Insert + F6 om de Headings List te openen. Navigeer naar de breadcrumb of navigatiezone en bevestig dat de huidige pagina of sectie programmatisch identificeerbaar is. Controleer dat aria-current wordt voorgelezen (JAWS kondigt dit aan als "current" voor het betreffende element).
7. Test op meerdere pagina's in de set: Navigeer door ten minste drie tot vijf pagina's binnen dezelfde sectie of hiërarchie en bevestig dat het locatie-mechanisme op elke pagina correct wordt bijgewerkt en consistent aanwezig is in de hele set.
8. Inspecteer de DOM: Gebruik de DevTools van de browser om te controleren of breadcrumb-links beschrijvende toegankelijke namen hebben, of het huidige item aria-current="page" gebruikt (voor de huidige pagina) of aria-current="true" (voor de huidige stap in een proces), en of de breadcrumb is omwikkeld met een <nav>-element met een toegankelijk label zoals aria-label="Breadcrumb".

Hoe te Herstellen

Ontbrekende Breadcrumb-navigatie — Onjuist

<!-- No breadcrumb or location indicator present.
     Users have no way to determine their location in the site hierarchy. -->
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/products/laptops'>Laptops</a></li>
  </ul>
</nav>
<h1>15-inch Laptops</h1>

Ontbrekende Breadcrumb-navigatie — Juist

<!-- A breadcrumb nav is added above the main content.
     aria-label distinguishes it from main navigation.
     aria-current="page" marks the current location for screen readers.
     The list structure communicates hierarchy. -->
<nav aria-label='Breadcrumb'>
  <ol>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/products/laptops'>Laptops</a></li>
    <li><a href='/products/laptops/15-inch' aria-current='page'>15-inch Laptops</a></li>
  </ol>
</nav>
<nav aria-label='Main navigation'>
  <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='/products'>Products</a></li>
    <li><a href='/products/laptops'>Laptops</a></li>
  </ul>
</nav>
<h1>15-inch Laptops</h1>

Actieve navigatielink zonder programmatische indicator — Onjuist

<!-- The active link is styled differently in CSS, but there is no
     programmatic signal. Screen reader users cannot distinguish it
     from the other navigation links. -->
<nav aria-label='Site navigation'>
  <ul>
    <li><a href='/about'>About</a></li>
    <li><a href='/services' class='active'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

Actieve navigatielink zonder programmatische indicator — Juist

<!-- aria-current="page" is added to the active link.
     Screen readers will announce this link as "current" or "current page"
     depending on the assistive technology, giving users a clear
     programmatic location signal in addition to the visual styling. -->
<nav aria-label='Site navigation'>
  <ul>
    <li><a href='/about'>About</a></li>
    <li><a href='/services' class='active' aria-current='page'>Services</a></li>
    <li><a href='/contact'>Contact</a></li>
  </ul>
</nav>

Meerstapsformulier zonder stapindicator — Onjuist

<!-- A multi-step checkout form with no indication of current step.
     Users cannot determine how far they are through the process
     or how many steps remain. -->
<form>
  <h1>Shipping Information</h1>
  <!-- form fields -->
  <button type='submit'>Next</button>
</form>

Meerstapsformulier zonder stapindicator — Juist

<!-- A progress indicator communicates the user's position in the sequence.
     aria-label on the nav provides context.
     aria-current="step" marks the active step for assistive technologies.
     The visible text "Step 2 of 4" is also available for all users. -->
<nav aria-label='Checkout progress'>
  <ol>
    <li><a href='/checkout/cart'>Cart</a></li>
    <li aria-current='step'><strong>Shipping</strong></li>
    <li>Payment</li>
    <li>Confirmation</li>
  </ol>
</nav>
<form>
  <h1>Shipping Information <span>(Step 2 of 4)</span></h1>
  <!-- form fields -->
  <button type='submit'>Next: Payment</button>
</form>

Veelvoorkomende Fouten

• Een breadcrumb alleen op de homepage of alleen op eindniveaus tonen: De breadcrumb moet consistent aanwezig zijn op alle pagina's binnen de set. Deze alleen op productdetailpagina's tonen maar niet op categoriepagina's creëert hiaten in oriëntatie-informatie.
• Een visueel gestylde actieve link gebruiken zonder aria-current="page" toe te voegen: Een vetgedrukte of onderstreepte actieve navigatielink communiceert de locatie visueel, maar schermlezergebruikers hebben daar niets aan tenzij aria-current="page" ook op dat element aanwezig is.
• De breadcrumb in een <div> wikkelen in plaats van een <nav>-element: Het gebruik van een niet-semantische container betekent dat de breadcrumb niet wordt blootgesteld als navigatielandmark, waardoor het voor schermlezergebruikers moeilijker wordt om deze te vinden en te interpreteren.
• aria-label weglaten van de breadcrumb-<nav> wanneer er ook een hoofd­navigatielandmark bestaat: Twee ongelabelde <nav>-landmarks op dezelfde pagina creëren ambiguïteit. Schermlezers kunnen beide simpelweg als "navigation" aankondigen, waardoor gebruikers ze niet van elkaar kunnen onderscheiden.
• aria-current="true" gebruiken op een paginalink in plaats van aria-current="page": De waarde page is semantisch de juiste waarde om de huidige pagina in een navigatiecontext aan te duiden. Het gebruik van true is minder beschrijvend en kan anders of minder duidelijk worden aangekondigd door ondersteunende technologieën.
• Uitsluitend vertrouwen op een paginatitel om de locatie aan te geven: Een beschrijvend <title>-element (bijv. "Laptops — 15-inch Models | Acme Store") is nuttig en vereist door WCAG 2.4.2, maar voldoet niet op zichzelf aan 2.4.8, dat een mechanisme vereist dat de positie binnen de structuur van de paginaset overbrengt, niet alleen de naam van de huidige pagina.
• Breadcrumbs bouwen die de URL-structuur weerspiegelen in plaats van de navigatiehiërarchie: URL's en navigatiestructuren komen niet altijd overeen. Breadcrumbs moeten de logische informatiearchitectuur weerspiegelen die een gebruiker zou begrijpen, niet het onderliggende URL-pad, dat technisch of ondoorzichtig kan zijn.
• De breadcrumb als platte tekst weergeven zonder links voor bovenliggende niveaus: Als alleen de huidige pagina wordt getoond of bovenliggende niveaus niet gelinkt zijn, verliest de breadcrumb zijn nut als zowel locatie-indicator als navigatiehulpmiddel. Bovenliggende items moeten gelinkt zijn zodat gebruikers terug omhoog in de hiërarchie kunnen navigeren.
• Het huidige breadcrumb-item alleen markeren met een visuele scheidingswijziging in plaats van aria-current: De kleur wijzigen of de onderstreping verwijderen van het laatste breadcrumb-item communiceert niet aan schermlezers dat dit de huidige pagina vertegenwoordigt. aria-current="page" moet expliciet worden toegevoegd.
• Vergeten de locatie-indicator bij te werken in single-page applications (SPA's) na client-side navigatie: In SPA's die zijn gebouwd met frameworks zoals React of Vue vinden paginatransities plaats zonder volledige browserreload. Als de breadcrumb of actieve navigatie-indicator niet programmatisch wordt bijgewerkt bij een routewijziging, toont deze verouderde locatie-informatie, wat erger is dan helemaal geen indicator hebben.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidentiële Circulaire 2025/10, gepubliceerd in het Staatsblad nr. 32933 op 21 juni 2025, stelt bindende toegankelijkheidseisen voor web en mobiel vast voor een brede reeks organisaties die in Turkije actief zijn. De circulaire verplicht naleving van internationaal erkende toegankelijkheidsstandaarden — waarmee het WCAG-raamwerk feitelijk wordt overgenomen — en is van toepassing op een gedefinieerde set entiteitstypen, waaronder overheidsinstellingen en -agentschappen, e-commerceplatforms, banken en financiële instellingen, ziekenhuizen en zorgaanbieders, telecombedrijven met 200,000 of meer abonnees, erkende reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE).

WCAG 2.4.8 Location is geclassificeerd als een criterium op niveau AAA, wat betekent dat het niet behoort tot de basiscriteria die wettelijk vereist zijn onder de circulaire, die conformiteit op niveau A en niveau AA als minimumdrempel noemt. Toch is dit onderscheid op verschillende belangrijke manieren relevant voor organisaties die onder de regelgeving vallen.

Ten eerste kan van bepaalde gespecialiseerde diensten — met name die welke gebruikers met aanzienlijke cognitieve of navigatie-uitdagingen bedienen, zoals zorgportalen voor oudere patiënten of educatieve platforms voor leerlingen met leerstoornissen — worden verwacht dat zij verder gaan dan de AA-basislijn om daadwerkelijk te voldoen aan de geest van de toegankelijkheidsverplichtingen onder de Turkse wet en aanverwante wetgeving zoals de Wet op Personen met een Handicap nr. 5378. Implementatie van 2.4.8 in deze contexten toont een inhoudelijke, in plaats van louter procedurele, inzet voor inclusie.

Ten tweede worden Turkse overheidsinstellingen en gereguleerde private entiteiten in toenemende mate onderworpen aan audit- en klachtenmechanismen. Het aantonen van AAA-niveau conformiteit — inclusief WCAG 2.4.8 — biedt een verdedigbaar bewijs van best-practice-implementatie en vermindert het regelgevingsrisico in het geval van een formele toegankelijkheidsklacht.

Ten derde hebben, met name voor e-commerceplatforms en banken, locatie-indicatoren zoals breadcrumbs directe commerciële waarde naast hun toegankelijkheidsfunctie. Een online hypotheekaanvraagproces van een Turkse bank dat duidelijke stapindicatoren en breadcrumb-navigatie bevat, zal niet alleen gebruikers met cognitieve beperkingen effectiever bedienen, maar ook uitvalpercentages verlagen en conversie ondersteunen — waardoor investeringen in toegankelijkheid worden afgestemd op meetbare bedrijfsresultaten.

Organisaties die de Accsible overlay SDK gebruiken, kunnen profiteren van de ingebouwde breadcrumb-verbetering en aria-current-injectiefuncties om bestaande sites dichter bij conformiteit met 2.4.8 te brengen zonder een volledige refactor van de codebase. Voor volledige en robuuste naleving — vooral voor entiteiten die onder Presidentiële Circulaire 2025/10 vallen — blijft server-side of build-time implementatie van semantische breadcrumb-markup en navigatie-indicatoren echter de aanbevolen aanpak, aangezien overlay-oplossingen de basis van toegankelijke markup aanvullen maar niet vervangen.