Hoe maak je een website bruikbaar met een screenreader?
Door de juiste HTML te gebruiken. Dat klinkt saai, maar het is echt negentig procent van het werk.
Een echte kop, een echte knop en een gelabeld formulierveld worden vanzelf goed voorgelezen. Een aangeklede div niet.
De rest is aanvulling: alternatieve teksten, beschrijvende links en een logische volgorde.
Begin bij je HTML
Een schermlezer leest geen plaatje van je pagina; hij leest de code. Wat daarin een knop heet, is een knop, en wat een div heet is niets.
Paginabouwers maken hier de meeste fouten. Een blok dat eruitziet als een knop maar het niet is, kun je niet met de tabtoets bereiken. Meer daarover lees je bij html.
Koppen in volgorde
Schermlezergebruikers springen van kop naar kop om een pagina te verkennen. Dat werkt alleen als je koppen echt koppen zijn en in de goede volgorde staan.
Eén h1 per pagina, daarna h2 en h3 zonder niveaus over te slaan. Gebruik een kop nooit alleen omdat de tekst dan groter wordt.
Wat een schermlezer voorleest
Bij een afbeelding: de alternatieve tekst. Staat die er niet, dan hoort iemand de bestandsnaam of niets.
Bij een link: de linktekst. Drie keer lees meer achter elkaar is voor een zienden bezoeker duidelijk uit de context, maar voor iemand die alleen de links opvraagt is het drie keer hetzelfde.
Mijn vuistregels
- Gebruik echte knoppen, echte koppen en echte lijsten.
- Koppel elk formulierveld aan een zichtbaar label.
- Schrijf linkteksten die op zichzelf duidelijk zijn.
- Gebruik ARIA alleen als het met gewone HTML echt niet kan.
Die laatste is belangrijker dan hij klinkt. Verkeerd toegepaste ARIA maakt een pagina slechter bruikbaar dan helemaal geen ARIA. Meer daarover lees je bij aria.
Waar het misgaat
Bij pop-ups en menu’s die opengaan. Als de focus daar niet naartoe springt, weet een schermlezergebruiker niet dat er iets is verschenen.
En bij formulieren zonder labels. Iemand hoort dan invoerveld en moet raden wat er in moet.
Zelf uitproberen
Op Windows en Mac zit standaard een schermlezer ingebouwd. Zet je scherm uit en probeer je eigen contactformulier in te vullen.
Dat is confronterend en het kost twintig minuten. Meer over dat hulpmiddel lees je bij screenreader.