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.
In de header staan knoppen zonder toegankelijke naam. Hierdoor kunnen bezoekers met een schermlezer niet vaststellen wat de functie van de knop is.
Hetzelfde probleem komt voor op het kleine scherm in het mobiele menu.
Web — Knop in de header heeft geen toegankelijke naam
Info en relaties ontbreken in de code
Informatie en relaties die je visueel ziet — dat een aantal velden bij elkaar horen, dat iets een kop is, dat iets een lijst is — moeten ook in de HTML staan. Anders is de samenhang alleen toegankelijk voor wie het scherm kan zien.
Op deze pagina staat een groep invoervelden onder de tekst "Verleend bedrag". Visueel vormen deze velden een groep, maar die relatie is niet vastgelegd in de HTML. Daardoor kan hulpsoftware de samenhang tussen de elementen niet bepalen.
Web — Relatie tussen een groep invoervelden is niet in de code vastgelegd
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.
In de header komt de toetsenbordfocus na de link "Toelichting" terecht op een onzichtbaar interactief element. Onzichtbare interactieve elementen mogen geen onderdeel zijn van de focusvolgorde. Dit kan leiden tot onbedoelde activering en verwarring, vooral voor bezoekers die met het toetsenbord navigeren.
Hetzelfde probleem komt voor op het kleine scherm in het mobiele menu.
Illustratie ter toelichting
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.
Op deze pagina is een horizontale scrollbalk aanwezig bij 400% zoom en delen van de tekst zijn niet zichtbaar, bijvoorbeeld "Subsidieregister".
Horizontaal scrollen op de hele pagina is niet toegestaan, ook niet als de viewport is ingesteld of ingezoomd op 320 CSS-pixels breed (voor verticale inhoud) of 256 CSS-pixels hoog (voor horizontale inhoud). Zorg ervoor dat de tekst binnen het scherm past. Alleen als scrollen in beide richtingen echt nodig is voor de betekenis of het gebruik van de inhoud mag het wel. Uitzonderingen zijn tabellen, betekenisvolle afbeeldingen en kaarten. Deze moeten leesbaar blijven, dus binnen deze elementen mag je wel scrollen.
Web — Bij 400% zoom verschijnt een horizontale scrollbalk
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.
Op deze pagina, in de zijbalk, is het element met de tekst "Filters resetten" niet met het toetsenbord te bedienen. De knop kan niet worden geactiveerd met de spatiebalk of de Enter-toets. Alle knoppen moeten met zowel de spatiebalk als de Enter-toets bediend kunnen worden. Dit is standaard toetsenbordgedrag bij knoppen en essentieel voor bezoekers die op toetsenbordnavigatie zijn aangewezen.
Illustratie ter toelichting
Status en waarden niet doorgegeven
Een schermlezer kan alleen aankondigen wat de code hem vertelt. Een geselecteerd filter dat alleen visueel oplicht, of een statusmelding die niet aan hulpsoftware wordt doorgegeven — voor wie niet ziet, gebeurt dat onzichtbaar.
Op deze pagina passen filters de zoekresultaten aan en verschijnt een melding zoals "1 t/m 20 getoond van de 5355 resultaten" zonder dat de pagina herlaadt. Deze melding is een statusbericht, maar wordt niet voorgelezen door schermlezers. Statusberichten moeten automatisch worden voorgelezen wanneer ze verschijnen of veranderen.
Web — Aangepaste zoekresultaten worden niet voorgelezen door schermlezers