Dit is één mogelijke implementatie, er zijn meerdere implementaties mogelijk.
Een broodkruimelpad laat zien waar je bent op een website. Het is een lijst met links naar bovenliggende pagina’s. Gebruikers zien waar ze zijn en kunnen makkelijk terug naar vorige niveaus.
Technische opbouw
- (2.4.6) Het component moet een toegankelijke naam hebben die het doel beschrijft
- (1.3.1) Links moeten gestructureerd zijn in een
<ol>-element - (1.3.1) Het huidige pagina-item (laatste onderdeel) moet
aria-current="page"hebben
Optioneel
- (1.3.1) Het component moet een
<nav>-element gebruiken
Algemeen
Content
- (1.4.3) Tekst moet minimaal een contrastverhouding van 4,5:1 hebben met de achtergrond
- (1.4.3) Grote tekst moeten minimaal een contrastverhouding van 3:1 hebben met de achtergrond
- (1.4.4) Tekst moet schaalbaar zijn tot 200% zonder verlies van content
- (1.4.4) Tekst moet schaalbaar zijn tot 200% zonder verlies van functionaliteit
- (1.4.10) Content moet schaalbaar zijn tot een weergavekader van 320 bij 256 zonder verlies van content
- (1.4.10) Content moet schaalbaar zijn tot een weergavekader van 320 bij 256 zonder verlies van functionaliteit
- (1.4.10) Content moet schaalbaar zijn tot een weergavekader van 320 bij 256 zonder dat horizontaal scrollen voorkomt
- (1.4.11) Niet-tekstuele bedieningselementen moeten minimaal een contrastverhouding van 3:1 hebben met de achtergrond of aangrenzende kleuren
- (1.4.11) De focusindicator moet minimaal een contrastverhouding van 3:1 hebben met de achtergrond of aangrenzende kleuren
- (1.4.12) De stijleigenschappen van tekst moeten kunnen worden aangepast zonder verlies van content of functionaliteit
Bedieningselementen
- (2.1.1) Alle functionaliteit moet bereikbaar zijn met het toetsenbord
- (2.1.1) Alle functionaliteit moet bedienbaar zijn met het toetsenbord
- (2.4.3) De focus moet zich verplaatsen in een logische volgorde
- (2.4.7) De toetsenbordfocus moet altijd zichtbaar zijn
Voorbeeld broodkruimelpad
See the Pen Broodkruimelpad by Niek (@niekd) on CodePen.
Bronnen
- Breadcrumb Pattern | APG | WAI | W3C (Engelstalig)
- Accessible Breadcrumb Navigation (Engelstalig)