Knoppen zonder toegankelijke naam
Voor wie een schermlezer of spraakbediening gebruikt, bestaat een knop pas zodra hij een naam heeft. Zonder naam kondigt de schermlezer alleen "knop" aan — de gebruiker weet niet wat er gebeurt als hij hem activeert.
Op alle pagina's staat bovenaan een link met een icoon van drie horizontale streepjes die het menu opent. Het icoon heeft geen tekstalternatief en de link heeft geen toegankelijke naam. Wanneer een link alleen uit een afbeelding bestaat, moet het tekstalternatief van de afbeelding de functie van de link beschrijven. Hulpsoftware kondigt nu alleen "link" aan, zonder dat duidelijk is dat deze het menu opent.
Web — Link bestaat alleen uit een afbeelding zonder tekstalternatief
Focusproblemen en focus-trap in dialoog
Toetsenbordgebruikers en schermlezer-gebruikers volgen de focus om te weten waar ze zijn. Verdwijnt de focus uit beeld of springt hij onverwacht ergens heen, dan verliezen ze hun oriëntatiepunt.
Op alle pagina's van deze website is de standaard toetsenbordfocus uit het CSS verwijderd voor alle interactieve elementen, en er is geen alternatieve focusindicator voorzien. Bezoekers die met het toetsenbord navigeren, kunnen daardoor niet zien op welk element de focus staat.
Illustratie ter toelichting
Onvoldoende kleurcontrast
Niet iedereen heeft perfecte ogen — denk aan slechtzienden of iedereen die de site in fel zonlicht bekijkt. Met genoeg contrast (4,5:1 voor tekst, 3:1 voor randen en iconen) blijven knoppen en links voor iedereen leesbaar.
In de zoekresultaten staan links met afbeeldingen. Bij het klikken op een afbeelding opent een dialoogvenster. Bovenaan dat dialoogvenster staat een link met een lichtgrijs (#CCCCCC) "x"-icoon op een witte achtergrond. De contrastverhouding van 1,6:1 is te laag. Hetzelfde probleem komt voor bij de dialoogvensters die verschijnen na klikken op de links "reageer op deze foto", "aanpassen" en de "share"-link, en op de pagina's:
* https://beeldbank.zuid-holland.nl/yourpp.pp, bij het klikken op "mijn gegevens aanpassen" en "wachtwoord aanpassen"
* https://beeldbank.zuid-holland.nl/yourdeliveries.pp?id=42199, na het klikken op de knop met het hartje-icoon
Web — Contrast van icoon op link is te laag
Tekst schaalt niet mee
Veel mensen vergroten tekst — via de browser, via systeeminstellingen, of via een loep. Werkt jouw site daar niet aan mee, dan sluit je iedereen uit die geen kleine tekst kan lezen.
Wanneer een bezoeker de pagina voor het eerst bezoekt, verschijnt een modaal inlog-dialoogvenster. Op een scherm van 1280 bij 1024 pixels met 400% zoom is het onderliggende inlogformulier niet zichtbaar en niet bedienbaar. Inzoomen tot 400% mag de functionaliteit of zichtbaarheid van informatieve elementen niet aantasten.
Web — Functie verdwijnt of is niet meer zichtbaar bij 400% zoom
Niet bedienbaar met toetsenbord
Niet iedereen kan een muis gebruiken. Werkt een knop of dropdown alleen met klikken of slepen, dan is hij onbruikbaar voor toetsenbordgebruikers, schermlezer-gebruikers en spraakbesturing.
In de zoekresultaten staan knoppen met een winkelwagen-icoon die niet via het toetsenbord te bedienen zijn: ze reageren niet op de spatiebalk of de Enter-toets. Alle knoppen moeten met beide toetsen activeerbaar zijn — dat is de standaardinteractie voor knoppen en essentieel voor bezoekers die op toetsenbordnavigatie aangewezen zijn.
Illustratie ter toelichting