Zet een screenreader aan op je eigen website en luister een minuut mee. Voor de meeste ondernemers is dat een ongemakkelijke ervaring. Je hoort knop, knop, link, afbeelding, knop. Er komt geen enkele bruikbare zin uit.
Dat is precies wat een blinde bezoeker hoort. Hij hoort geen mooie vormgeving en geen strak lettertype.
Hij hoort alleen de structuur die eronder zit. Klopt die niet, dan is je site voor hem onbruikbaar.
Het goede nieuws: het meeste is bij het bouwen op te lossen en kost nauwelijks extra tijd. Achteraf repareren is wel duur.
Een programma dat je site voorleest, en meteen laat horen wat er rammelt.
Wat is een screenreader?
Het is voorleessoftware die voorleest wat er op je scherm staat. Hij zet tekst om in gesproken woord of in braille.
Op elk toestel zit er tegenwoordig een ingebouwd. Op een telefoon zet je hem aan in je instellingen.
Wie hem gebruikt
Blinde en slechtziende mensen in de eerste plaats. Daarnaast mensen met dyslexie of een motorische beperking.
In Nederland gaat het om honderdduizenden mensen. Dat is meer dan het aantal bezoekers dat de meeste bedrijfssites per jaar krijgen.
Hoe iemand ermee werkt
Niet door de pagina van boven naar beneden te laten voorlezen. Dat zou veel te traag zijn.
Hij springt van kop naar kop, net zoals jij een pagina scant. Daarna kiest hij het stuk dat hij wil horen.
Daarom is je koppenstructuur cruciaal
Je koppenstructuur is voor hem het menu van je pagina. Staan er alleen dikgedrukte regels in plaats van echte koppen, dan is dat menu leeg.
Precies daarom werk ik met een vaste opbouw. Een H1 per pagina, daaronder H2 voor de hoofdstukken en H3 voor de onderdelen.
Koppen die zijn gekozen op grootte in plaats van op niveau.
Die derde is de meest voorkomende. Een screenreader kan alle links op een rij zetten, en dan hoor je twaalf keer hetzelfde.
Knoppen zonder naam
Een prullenbakje of een vergrootglas zegt een machine niets. Zonder tekst eronder hoort iemand alleen het woord knop.
De oplossing is een verborgen naam meegeven. Dat is een kleine toevoeging bij het bouwen, zie frontend.
Hoe je het zelf test
Je hoeft niets te installeren. Op een Mac en op een iPhone zit er een ingebouwd, op Windows ook.
Zet hem aan, sluit je ogen en probeer een offerte aan te vragen. Dat is de eerlijkste test die er bestaat.
De snellere test
Doe eerst het testen met je toetsenbord. Loop je hele site door met alleen de tabtoets en kijk waar je vast komt te zitten.
Zie je niet welk element geselecteerd is, dan is dat al een probleem. Wat met een toetsenbord niet werkt, werkt met voorleessoftware ook niet.
Wat de wet zegt
Voor overheidssites gelden al langer harde eisen. Voor commerciele partijen komen er Europese regels aan.
Die raken vooral webshops en dienstverleners van formaat. Voor een kleine bedrijfssite is de verplichting beperkter.
Waarom ik het toch adviseer
Omdat het bij het bouwen bijna niets kost. Nette koppen, echte knoppen en beschrijvingen bij beeld zijn gewoon goed vakwerk.
Het helpt bovendien je vindbaarheid, want zoekmachines lezen dezelfde structuur. Meer daarover lees je bij accessibility en navigatie.
Begin bij de toetsenbordtest
Die kost je vijf minuten en vangt het merendeel van de problemen. Pak de voorleessoftware er daarna pas bij.
Kom je met de tabtoets ergens niet, dan komt een screenreader daar ook niet. Het zijn dezelfde onderliggende fouten.
Waarom links geen lees meer heten
Een screenreader kan alle links op een rij zetten. Staat er twaalf keer lees meer, dan is die lijst waardeloos.
Schrijf dus waar de link naartoe gaat. Lees meer over dakgoot reinigen zegt iets, lees meer zegt niets.
Achteraf repareren is duur
Bij het bouwen kost dit nauwelijks extra tijd. Achteraf zit het in je hele sjabloon en raak je elke pagina.
Neem het dus mee in je opdracht en niet in een verbeterronde over twee jaar. Dat scheelt een veelvoud, ook bij een site die volgens mobile first is gebouwd.
Meer vragen over Screenreader
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een screenreader?
Hoe gebruikt iemand een screenreader?
Hoe test je je website met een screenreader?
Wat gaat er meestal mis?
Hoeveel mensen gebruiken een screenreader?
Moet mijn website toegankelijk zijn volgens de wet?
Wat is een screenreader?
Niet door de pagina van boven naar beneden te laten voorlezen. Dat zou veel te traag zijn.
Hij springt van kop naar kop, net zoals jij een pagina scant met je ogen. Daarna kiest hij het stuk dat hij wil horen.
Daarom is je koppenstructuur cruciaal. Die is voor hem het menu van je pagina.
Staan er alleen dikgedrukte regels in plaats van echte koppen, dan is dat menu leeg. Dan blijft alleen voorlezen van begin tot eind over.
Precies daarom werk ik met een vaste opbouw. Een H1 per pagina, daaronder H2 voor de hoofdstukken en H3 voor de onderdelen.
Controleer daarom of je koppen echte koppen zijn en geen dikgedrukte regels. Dat is in je tekstverwerker zichtbaar.
Een H1 per pagina, daaronder H2 voor je hoofdstukken en H3 voor de onderdelen. Kies op niveau en niet op lettergrootte. Loop je belangrijkste pagina na in je tekstverwerker. Zie je alleen dikgedrukte regels, dan weet je wat er moet gebeuren.
Hoe gebruikt iemand een screenreader?
Het is software die voorleest wat er op je scherm staat. Hij zet tekst om in gesproken woord of in braille.
Op elk toestel zit er tegenwoordig een ingebouwd. Op een telefoon zet je hem aan in je instellingen.
Hij wordt gebruikt door blinde en slechtziende mensen in de eerste plaats. Daarnaast door mensen met dyslexie of een motorische beperking.
In Nederland gaat het om honderdduizenden mensen. Dat is meer dan het aantal bezoekers dat de meeste bedrijfssites per jaar krijgen.
Belangrijk om te snappen: hij leest geen vormgeving voor. Hij leest de structuur die eronder zit, en klopt die niet, dan is je site onbruikbaar.
Zet er een keer een aan op je eigen site en luister een minuut mee. Voor de meeste ondernemers is dat een ongemakkelijke ervaring.
Je hoort dan precies wat een blinde bezoeker hoort, en dat is zelden wat je verwacht. Doe dat op je belangrijkste pagina en niet op je homepage. Daar wil je bezoeker iets bereiken.
Wat gaat er meestal mis?
Vijf dingen kom ik telkens tegen.
Afbeeldingen zonder beschrijving. Knoppen met een icoon en geen naam. Links die allemaal lees meer heten. Formuliervelden zonder gekoppeld label.
En koppen die zijn gekozen op grootte in plaats van op niveau, dus een H4 omdat die toevallig mooi staat.
Die derde is de meest voorkomende. Een screenreader kan alle links op een rij zetten, en dan hoor je twaalf keer hetzelfde woord.
Een prullenbakje of een vergrootglas zegt een machine niets. Zonder tekst eronder hoort iemand alleen het woord knop. De oplossing is een verborgen naam meegeven bij het bouwen.
Loop je site na op links die lees meer heten en schrijf ze om. Dat is werk dat je zelf kunt doen.
Vraag je bouwer daarnaast om namen bij knoppen met alleen een icoon. Dat is een kleine toevoeging bij het bouwen. Begin bij je meest bezochte pagina, want daar levert het het meeste op. De rest volgt vanzelf.
Hoe test je je website met een screenreader?
Je hoeft niets te installeren. Op een Mac en op een iPhone zit er een ingebouwd, op Windows ook.
Zet hem aan, sluit je ogen en probeer een offerte aan te vragen. Dat is de eerlijkste test die er bestaat.
Doe eerst de snellere versie. Loop je hele site door met alleen de tabtoets en kijk waar je vast komt te zitten.
Zie je niet welk element geselecteerd is, dan is dat al een probleem. Wat met een toetsenbord niet werkt, werkt met voorleessoftware ook niet.
Die toetsenbordtest kost je vijf minuten en vangt het merendeel van de problemen. Begin daar dus, en pak de voorleessoftware er daarna bij.
Begin met de tabtoets voordat je voorleessoftware aanzet. Dat kost vijf minuten en levert het meeste op.
Zie je niet welk element geselecteerd is, meld dat dan meteen. Een onzichtbare focus is een fout in je vormgeving. Doe die test met je handen van de muis af. Dat klinkt flauw en het is de enige manier om eerlijk te testen.
Moet mijn website toegankelijk zijn volgens de wet?
Voor overheidssites gelden al langer harde eisen. Voor commerciele partijen komen er Europese regels aan.
Die raken vooral webshops en dienstverleners van formaat. Voor een kleine bedrijfssite is de verplichting beperkter.
Ik adviseer het toch, en niet vanwege de regels. Bij het bouwen kost het bijna niets.
Nette koppen, echte knoppen en beschrijvingen bij beeld zijn gewoon goed vakwerk. Achteraf repareren is wel duur, want dan zit het in je hele sjabloon.
Het helpt bovendien je vindbaarheid, want zoekmachines lezen dezelfde structuur. Je doet het dus voor twee groepen tegelijk.
Neem het mee in je opdracht bij een nieuwe site en niet in een verbeterronde later.
Bij het bouwen kost het bijna niets. Achteraf zit het in je hele sjabloon en raak je elke pagina, en dat is een veelvoud aan kosten. Vraag bij een offerte expliciet of toegankelijkheid is meegenomen. Zonder die vraag wordt het meestal overgeslagen. Het is een vraag van een zin die je veel geld kan schelen.
Wil je weten hoe jouw site klinkt voor iemand die hem niet kan zien? Stuur me de link via het formulier hieronder. Ik loop hem na met het toetsenbord en met voorleessoftware, en stuur je terug wat er misgaat. Vermeld je plaats, dan weet ik meteen waar je zit.
