Breadcrumb Navigation

De linkteksten van de links in het broodkruimelpad zijn voor iedereen duidelijk

De linktekst vertelt eenduidig aan de gebruiker waar de link naar toe gaat (het linkdoel).

Wat is een linktekst? Het is de tekst die zichtbaar is, maar ook de tekst die aan een gebruiker van hulpsoftware wordt voorgelezen.

Wat is het linkdoel? De locatie waar de link naartoe gaat. Bijvoorbeeld de contactpagina, een nieuwsbericht, een andere website of een download van een document.

Wat betekent In context? Het doel van de link kan ook door omringende content worden aangegeven. Dit moet dan wel ook voor gebruikers van hulpmiddelen duidelijk zijn, bijvoorbeeld door aanvullende tekst of een afbeelding naast de link. Dit laatste is onderwerp van veel discussie. Het beste is om altijd goed in de linktekst zelf te vertellen want het doel is.

De bezoeker kan het activeren van links in het broodkruimelpad annuleren

Zorg ervoor dat als de gebruiker links in het broodkruimelpad aanraakt met een enkele aanwijzer, zoals een muis of vinger, er de mogelijkheid is om de actie te voorkomen of ongedaan te maken.

Dit voorkomt het per ongeluk aanraken en openen van content, wanneer het niet de bedoeling was.

Met een HTML link (a element met een href attribuut) gaat dit automatisch goed. Bij een div element met role="link" moet dit nog worden aangepast. Gebruik voor dit laatste bij voorkeur het click event, omdat dit apparaatonafhankelijk is.

De visuele naam van de links in het broodkruimelpad komen voor in de toegankelijke naam van de links in het broodkruimelpad

De zichtbare naam van een onderdeel moet terugkomen in de toegankelijke naam.

Het aanwijsgebied van de links in het broodkruimelpad is groot genoeg

Zorg ervoor dat de aanklikbare elementen op een pagina groot genoeg zijn om makkelijk aan te klikken met een muis of vinger.

Hierbij geldt dat het aan te klikken gebied ten minste 24 bij 24 pixels groot is, behalve als het aanklikbare element en de ruimte om het element samen tenminste 24 pixels groot zijn.

Hou als dat mogelijk is een groter aanwijsgebied van 44 bij 44 pixels aan, om ook te voldoen succescriterium 2.5.5 Grootte van het aanwijsgebied (uitgebreid)

NL Design System richtlijnen:

• Maak aanklikbare formuliervelden groot genoeg
• Reserveer ruimte tussen interactieve elementen

Als het broodkruimelpad tekst in een andere taal dan de hoofdtaal van de pagina bevat, wordt hier een taalwissel voor aangegeven

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 gedrag van het broodkruimelpad is voorspelbaar

Verras een gebruiker niet als die een interactief element focus geeft. Maak functionaliteit voorspelbaar en daardoor goed te begrijpen.

Als een gebruiker een component focus geeft met het toetsenbord of door erop te klikken met de muis, zorg dan dat die actie niet automatisch een contextwijziging veroorzaakt.

Bij een contextwijziging verandert onverwacht de indeling, informatie, toetsenbordfocus of functionaliteit. Bijvoorbeeld door het direct versturen van een formulier na het kiezen van een select-optie, waarna de gebruiker naar een andere pagina wordt doorgestuurd.

Als het broodkruimelpad op meerdere pagina's voorkomt, staat het overal op dezelfde plek en de links in het broodkruimelpad staan in dezelfde volgorde

Als je het broodkruimelpad op meerdere pagina’s toevoegt, zijn er een aantal dingen om rekening mee te houden:

• Het broodkruimelpad moet op alle pagina’s in dezelfde relatieve volgorde op de pagina voorkomen. Bijvoorbeeld: Het broodkruimelpad staat altijd onder de header en boven de eerste kop op de pagina.
• De links in het broodkruimelpad staan op alle pagina’s in dezelfde relatieve volgorde. Bijvoorbeeld: Als de link naar de homepage in het broodkruimelpad staat, is dit op iedere pagina waar dit zo is de eerste link in het broodkruimelpad.

NL Design System richtlijnen:

• Consistente navigatie

De contrastratio tussen de tekst en de achtergrondkleur in het broodkruimelpad is hoog genoeg

De contrastverhouding van de tekstkleur met de achtergrondkleur is hoog genoeg. Minimale contrastverhoudingen:

• 4,5:1 contrast voor normale tekst.
• 3:1 contrast voor grotere letters (vanaf 24 pixels).
• 3:1 contrast voor vette letters (vet en groter of gelijk aan 19 pixels).

Hogere verhoudingen mogen natuurlijk altijd. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen. Denk erom dat dit moet gelden voor alle achtergrondkleuren waarop de tekst geplaatst kan worden. Het kan dus zijn dat je meerdere checks moet doen.

NL Design System richtlijnen:

• Zorg voor voldoende kleurcontrast voor tekst tegen de achtergrond
• Geef tekst voldoende kleurcontrast
• Gebruik van kleur in tekst

Het broodkruimelpad bevat niet onnodig afbeeldingen van tekst

Laat tekst buiten afbeeldingen.

Als je losse tekst een vergelijkbaar uiterlijk kan geven als in een afbeelding, laat het dan losse tekst zijn. Er is een uitzondering als de tekst onderdeel is van een logo.

Sommige mensen hebben teksten nodig met een ander uiterlijk. Dit kan bij losse tekst en niet bij afbeeldingen.

Niet-tekstuele content in het broodkruimelpad heeft een contrastratio van minimaal 3:1 met de achtergrond

Als het broodkruimelpad niet-tekstuele content zoals afbeeldingen bevat, bijvoorbeeld een huisje voor de homepage en iconen van / of > tussen de links, dan is het contrast tussen de afbeelding en de achtergrond minimaal 3:1. Dit is te controleren met de Contrast checker.

NL Design System richtlijnen:

• Zorg voor voldoende kleurcontrast voor niet-tekstuele content

Het is zichtbaar wanneer links in het broodkruimelpad toetsenbordfocus hebben

Wanneer het element de toetsenbordfocus krijgt is de focus zichtbaar.

Verberg de standaard browserfocusstijl nooit met outline:none zonder er een goede focusstijl voor in de plaats te zetten die rekening houdt met goede zichtbaarheid.

NL Design System richtlijnen:

• Maak toetsenbordfocus goed zichtbaar
• Let op voorkeursinstellingen voor kleur
• Zorg voor voldoende kleurcontrast voor niet-tekstuele content

Het aanwijsgebied van de links in het broodkruimelpad is groot genoeg

Zorg ervoor dat de aanklikbare elementen op een pagina groot genoeg zijn om makkelijk aan te klikken met een muis of vinger.

Hierbij geldt dat het aan te klikken gebied ten minste 24 bij 24 pixels groot is, behalve als het aanklikbare element en de ruimte om het element samen tenminste 24 pixels groot zijn.

Hou als dat mogelijk is een groter aanwijsgebied van 44 bij 44 pixels aan, om ook te voldoen succescriterium 2.5.5 Grootte van het aanwijsgebied (uitgebreid)

NL Design System richtlijnen:

• Maak aanklikbare formuliervelden groot genoeg
• Reserveer ruimte tussen interactieve elementen

Het is duidelijk zichtbaar wanneer links in het broodkruimelpad toetsenbordfocus hebben

Er is een goed zichtbare focusindicator. Dit doe je met een minimale dikte van 2 pixels en een minimaal contrast van 3:1 ten opzichte van aangrenzende kleuren. Hou ook rekening met het contrast met de verschillende achtergrondkleuren waarop een element gebruikt kan worden. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen.

NL Design System richtlijnen:

• Maak toetsenbordfocus goed zichtbaar
• Let op voorkeursinstellingen voor kleur
• Zorg voor voldoende kleurcontrast voor niet-tekstuele content

Als het broodkruimelpad op meerdere pagina's voorkomt, ziet het er hetzelfde uit en werkt het hetzelfde

Onderdelen die hetzelfde doen moeten ook hetzelfde te herkennen zijn.

Als je de tekst vergroot tot 200% blijft deze in zijn geheel zichtbaar

De gebruiker moet tekst twee keer (200%) kunnen vergroten. Het gaat hierbij alleen om het vergroten van tekst en niet om bijvoorbeeld afbeeldingen of de layout. Alle functies moeten werken en zichtbaar zijn. Alle tekst moet leesbaar zijn. Er mag geen inhoud buiten beeld vallen, verborgen zijn of maar gedeeltelijk zichtbaar zijn.

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

Een broodkruimelpad mag van vorm veranderen bij het vergroten of aanpassen van tekst, of bij inzoomen, als het broodkruimelpad door het doorlopen op een volgende of meerdere regels teveel ruimte in beslag neemt.

NL Design System richtlijnen:

• Let op voorkeursinstellingen voor typografie
• Zorg ervoor dat letters groot genoeg zijn

Bij inzoomen gaat er geen informatie of functionaliteit verloren

De gebruiker moet de webpagina bij een schermgrootte van 1280 bij 124 pixels tot 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina.

Alle functies moeten werken en zichtbaar zijn. Alle tekst moet leesbaar zijn.

Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of gedeeltelijk verborgen worden door andere inhoud wanneer de gebruiker 400% inzoomt of op een buitengewoon klein scherm werkt (320 bij 256 CSS).

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

Een broodkruimelpad mag van vorm veranderen bij het vergroten of aanpassen van tekst, of bij inzoomen, als het broodkruimelpad door het doorlopen op een volgende of meerdere regels teveel ruimte in beslag neemt.

Als je de tekstafstand vergroot blijft de tekst in zijn geheel zichtbaar

Tekst kan op een aantal manieren aangepast worden, door mensen voor wie dat prettig is.

Alle tekst moet leesbaar blijven. Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of maar gedeeltelijk zichtbaar zijn.

Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld overflow-wrap: break-word; hyphens: auto; eventueel in combinatie met text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

Een broodkruimelpad mag van vorm veranderen bij het vergroten of aanpassen van tekst, of bij inzoomen, als het broodkruimelpad door het doorlopen op een volgende of meerdere regels teveel ruimte in beslag neemt.

Het gaat om:

• De ruimte tussen tekstregels kan relatief groot ingesteld worden, zodat de ruimte tussen tekstregels anderhalf keer groter is dan de hoogte van een tekstregel zelf.
• De ruimte tussen alinea’s kan ingesteld worden op minimaal de twee keer de hoogte van een tekstregel.
• De ruimte tussen letters kan 12% groter worden ingesteld dan normaal.
• De ruimte tussen woorden kan 16% groter worden ingesteld dan normaal.

Gebruikers kunnen dit instellen vanuit hun browser. Het is niet nodig om hier buttons voor te maken in de website zelf.

Links in het broodkruimelpad zijn bereikbaar en bedienbaar met het toetsenbord

Je kunt het element focussen met de tabtoets en activeren met de spacebar en de entertoets.

NL Design System richtlijnen:

• Toetsenbordbediening van een button
• Disabled submitbuttons

Het broodkruimelpad zorgt niet voor een toetsenbordval

Focus die met een toetsenbord geplaatst kan worden, moet ook met het toetsenbord weg te halen zijn.

De focus volgorde volgt de hiërarchische structuur van het broodkruimelpad

De links in het broodkruimelpad krijgen afzonderlijk toetsenbordfocus met de Tab-toets (en shift + Tab-toets). De focusvolgorde volgt de hierarchische structuur in het broodkruimelpad.

Het is zichtbaar wanneer links in het broodkruimelpad toetsenbordfocus hebben

Wanneer het element de toetsenbordfocus krijgt is de focus zichtbaar.

Verberg de standaard browserfocusstijl nooit met outline:none zonder er een goede focusstijl voor in de plaats te zetten die rekening houdt met goede zichtbaarheid.

NL Design System richtlijnen:

• Maak toetsenbordfocus goed zichtbaar
• Let op voorkeursinstellingen voor kleur
• Zorg voor voldoende kleurcontrast voor niet-tekstuele content

De links in het broodkruimelpad worden niet bedekt door andere content

Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

Het is duidelijk zichtbaar wanneer links in het broodkruimelpad toetsenbordfocus hebben

Er is een goed zichtbare focusindicator. Dit doe je met een minimale dikte van 2 pixels en een minimaal contrast van 3:1 ten opzichte van aangrenzende kleuren. Hou ook rekening met het contrast met de verschillende achtergrondkleuren waarop een element gebruikt kan worden. Met de Contrast checker kun je controleren of je gekozen kleuren voldoen.

NL Design System richtlijnen:

• Maak toetsenbordfocus goed zichtbaar
• Let op voorkeursinstellingen voor kleur
• Zorg voor voldoende kleurcontrast voor niet-tekstuele content

Informatieve afbeeldingen hebben een alternatieve tekst en decoratieve tekens en iconen zijn verborgen

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 richtlijnen:

• Richtlijnen voor iconen
• Functionele afbeeldingen

Het is duidelijk dat het om een navigatiemenu gaat en de relatie tussen de links in het broodkruimelpad is voor iedereen duidelijk

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.

<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

Een bezoeker die een screenreader gebruikt, hoort de content van een pagina in de volgorde waarin die in de HTML staat. Die volgorde komt overeen met wat een ziende bezoeker op het scherm ziet. Zo begrijpt iedereen welke informatie bij welk onderdeel hoort, ongeacht hoe iemand de pagina gebruikt.

Als het broodkruimelpad tekst in een andere taal dan de hoofdtaal van de pagina bevat, wordt hier een taalwissel voor aangegeven

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

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.