Informatieve afbeeldingen hebben een alternatieve tekst en decoratieve tekens en iconen zijn verborgen
- WCAG
- 1.1.1 Niet-tekstuele content
Als het broodkruimelpad een afbeelding bevat, bijvoorbeeld een huisje om de homepage aan te geven, heeft de afbeelding een alternatieve tekst. Als deze afbeelding een link bevat, beschrijft de alternatieve tekst ook het linkdoel.
Als tussen de links in het broodkruimelpad tekens staan, zoals een schuine streep of een groter-dan-teken, zijn deze verborgen voor hulpsoftware. De relatie tussen de links wordt namelijk al op een andere manier duidelijk gemaakt aan bezoekers die gebruik maken van een screenreader, door de georderende lijst (ol) binnen het nav element.
NL Design System richtlijn:
Het is duidelijk dat het om een navigatiemenu gaat en de relatie tussen de links in het broodkruimelpad is voor iedereen duidelijk
- WCAG
- 1.3.1 Info en relaties
De relatie tussen de links in het broodkruimelpad moet niet alleen visueel, maar ook voor bezoekers die gebruik maken van een screenreader duidelijk zijn.
Het broodkruimelpad is herkenbaar als navigatiemenu door het nav element te gebruiken, of door role="navigation" te gebruiken. Gebruik bij voorkeur altijd HTML elementen, tenzij het echt niet anders kan.
Het navigatiemenu heeft een toegankelijke naam om het te onderscheiden van andere navigatiemenu's op de pagina. Bijvoorbeeld met aria-label, of door met aria-labelledby te verwijzen naar een visueel verborgen h2 element in het broodkruimelpad.
De links in het broodkruimelpad staan binnen het nav element in een georderende lijst: het ol element. Dit geeft de hiërarchie in de links aan. Iedere link is afzonderlijk opgemaakt met een li element en staat genest binnen het ol element.
De huidige pagina in het broodkruimelpad hoeft niet als link opgemaakt te zijn, maar bevat wel het aria-current="page" attribuut.
codevoorbeeld
<nav aria-label="Broodkruimelpad">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/zelfregelen">Zelf regelen</a></li>
<li><a aria-current="page" href="/zelfregelen/rijbewijsaanvragen">Rijbewijs aanvragen</a></li>
</ol>
</nav>
De leesvolgorde van tekst en links in het broodkruimelpad is voor iedereen logisch
- WCAG
- 1.3.2 Betekenisvolle volgorde
Zorg ervoor dat iedereen de tekst van een webpagina kan volgen en dat het begrip hiervan niet alleen afhankelijk is van de visuele presentatie.
Wanneer een gebruiker de webpagina inzoomt, of met een screenreader de inhoud van boven naar beneden leest, moet de informatie en de volgorde van de informatie logisch en begrijpelijk zijn.
Als het broodkruimelpad tekst in een andere taal dan de hoofdtaal van de pagina bevat, wordt hier een taalwissel voor aangegeven
- WCAG
- 3.1.2 Taal van onderdelen
Geef wisseling van de taal aan waarin de tekst van elke passage of zin is geschreven. Als er in de tekst woorden of zinnen voorkomen in een andere taal dan die van de webpagina, brengt markering van die taal hulpmiddelen op de hoogte. Dit kan door in het HTML-element waarbinnen deze tekst staat het attribuut lang mee te geven.
Dan wordt tekst in die andere taal correct uitgesproken en daardoor beter te begrijpen voor gebruikers die de website laten voorlezen, bijvoorbeeld door screenreaders.
Er is een uitzondering voor eigennamen, technische termen, woorden in een onbekende taal, en woorden of zinsdelen die deel uitmaken van het jargon van de omliggende tekst.
Met het lang-attribuut breng je over welke taal (een deel van) je tekst heeft. Dan kunnen hulptechnologieën als screenreaders of vertaalsoftware daarop handelen. In het geval van screenreaders bijvoorbeeld door de tekst met de juiste stem voor te lezen.
Of de juiste stem ook echt wordt gebruikt is afhankelijk van de instellingen van de gebruikte screenreader.
Het broodkruimelpad en de links in het broodkruimelpad hebben een toegankelijke naam, rol en status
- WCAG
- 4.1.2 Naam, rol, waarde
Het broodkruimelpad staat in een nav element, of heeft role="navigation", met een toegankelijke naam (bijvoorbeeld 'broodkruimelpad'). Gebruik bij voorkeur altijd HTML elementen, tenzij het echt niet anders kan.
De links in het broodkruimelpad staan genest in een ol element en iedere link staat in een li element. Gebruik geen role="list', omdat de hiërarchie tussen de links dan verloren gaat.
De links in het broodkruimelpad hebben de rol van link. Gebruik hiervoor bij voorkeur het a element (met een href attribuut). Het is mogelijk om met ARIA een role="link" toe te voegen aan een ander element dan een a, maar dit is niet aan te raden. Heb je het absoluut nodig, zorg er dan voor dat het gekozen element ook voldoet aan de verwachte toetsenbordinteractie, focusstijl, etc. Let erop dat je hiervoor JavaScript nodig hebt.
De huidige (laatste) pagina in het broodkruimelpad geeft daarnaast ook met aria-current="page" aan dat het om de huidige pagina gaat.