Elke website is anders, maar de toegankelijkheidsfouten die we bij controles vinden, lijken opvallend vaak op elkaar. Een kapsalon, een stichting, een webshop in fietsonderdelen: dezelfde tien problemen duiken steeds op. Dat komt doordat ze voortkomen uit dezelfde bronnen, zoals populaire thema’s, paginabouwers, gewoontes van redacteuren en plugins die iedereen gebruikt. Deze lijst is geen volledige audit. Het is wel een goede plek om te beginnen, want wie deze tien aanpakt, lost een groot deel van de drempels op zijn site op.
De volgorde zegt niets over hoe vaak ze precies voorkomen. Ze komen alle tien vaak voor.
Fouten die u met het oog kunt zien
1. Te weinig kleurcontrast
Lichtgrijze tekst op wit, witte tekst op een lichte foto, een oranje knop met witte letters, placeholdertekst die bijna onzichtbaar is. Normale tekst heeft een contrast van minimaal 4,5:1 nodig, grote tekst en bedieningselementen 3:1.
Zo vindt u het: met een contrastchecker of de inspectietools van uw browser. Oplossing: donkerdere tekstkleur of een donkere laag achter tekst op foto’s. Vaak is het één aanpassing in de kleuren van het thema.
2. Geen zichtbare focus
Wie met het toetsenbord navigeert, ziet niet waar hij is. Vaak is de standaardrand van de browser weggehaald omdat hij “lelijk” was, met een regel als outline: none. Uitleg en oplossing in focus zichtbaar maken.
Zo vindt u het: druk op Tab op uw homepage en kijk of u steeds ziet welk element actief is.
3. Tekst in afbeeldingen
Banners met een aanbieding, een openingstijdenblok als plaatje, een infographic zonder uitleg. Onleesbaar voor een screenreader, wazig bij vergroting en niet aan te passen in contrast. Oplossing: zet de tekst als echte tekst op de pagina. Een foto mag als achtergrond blijven, met de tekst eroverheen in HTML en voldoende contrast. Bij een infographic zet u de belangrijkste informatie ook in een lijst of tabel eronder.
Fouten in de inhoud
4. Ontbrekende of verkeerde alt-teksten
Afbeeldingen zonder alt-tekst, met de bestandsnaam als alt-tekst, of met een alt-tekst vol zoekwoorden. Ook het omgekeerde komt voor: decoratieve afbeeldingen die uitgebreid worden beschreven. Oplossing: beschrijf wat er voor de bezoeker toe doet en geef decoratieve afbeeldingen een lege alt-tekst. Zo vindt u het: in de mediabibliotheek van WordPress ziet u per afbeelding het veld voor de alt-tekst. Let op dat een alt-tekst die daar staat, niet altijd wordt overgenomen in blokken die al op een pagina staan.
5. Een rommelige kopstructuur
Koppen die worden gekozen op grootte in plaats van op betekenis. Een H4 direct na de H1, of vette tekst die eruitziet als een kop maar het niet is. Soms meerdere H1’s op één pagina, door het thema of de paginabouwer. Zo vindt u het: met een browserextensie die de koppen op een rij zet, of met WAVE.
6. Linkteksten die niets zeggen
“Lees meer”, “klik hier”, “meer info”, tien keer op een pagina. Een screenreadergebruiker die de lijst met links opvraagt, heeft er niets aan. Oplossing: maak de linktekst beschrijvend, zoals “Lees meer over onderhoud van uw webshop”.
Fouten in formulieren en bediening
7. Formuliervelden zonder label
Een veld met alleen een placeholder als “Uw naam”, die verdwijnt zodra iemand begint te typen. Of een label dat wel zichtbaar is, maar in de code niet aan het veld is gekoppeld. Een screenreader zegt dan alleen “invoerveld”. Uitleg in waarom een placeholder geen label is.
8. Knoppen zonder naam
De zoekknop met alleen een vergrootglas, het hamburgermenu, het winkelwagenicoon, de pijltjes van een slider, de knoppen naar sociale media. Visueel duidelijk, voor een screenreader alleen “knop”. Oplossing: een zichtbaar label of een toegankelijke naam. Zie iconen zonder tekst.
9. Onderdelen die niet met het toetsenbord werken
Uitklapmenu’s die alleen openen bij hover, keuzelijsten die een zelfgemaakt element zijn, pop-ups die niet te sluiten zijn met Escape, een cookiebanner waar de focus niet in komt. Zo vindt u het: leg de muis weg en probeer een gewone taak uit te voeren.
10. Foutmeldingen die niet helpen
Een formulier dat na versturen alleen een rode rand om een veld zet. Of een algemene melding bovenaan, “Er is iets misgegaan”, zonder te zeggen wat. Voor iemand die geen kleur ziet of een screenreader gebruikt, is dan niet te achterhalen wat er mis is. Oplossing: een tekstuele melding bij het veld, gekoppeld in de code, die zegt wat er moet gebeuren.
Wat ontbreekt er in deze lijst?
Een paar onderwerpen hadden er ook in kunnen staan, en komen we ook regelmatig tegen:
- een ontbrekende taalinstelling op de pagina;
- pdf’s die niet toegankelijk zijn;
- video’s zonder ondertitels;
- automatisch doorschuivende sliders zonder pauzeknop;
- een overlay-plugin die problemen eerder verbergt dan oplost.
Ook dat zijn bekende drempels, maar ze verschillen meer per site. De tien hierboven komen bijna overal voor.
Hoe u deze toegankelijkheidsfouten zelf opspoort
Met drie eenvoudige tests vindt u een groot deel:
- Een automatische scan met een gratis tool als WAVE of de toegankelijkheidscontrole in de browser. Die vindt veel van de fouten bij contrast, alt-teksten, labels en koppen.
- Een toetsenbordtest: alleen Tab, Shift+Tab, Enter, spatie en Escape. Die vindt de fouten bij focus en bediening.
- Een korte screenreadertest op uw belangrijkste pagina. Die vindt knoppen zonder naam en linkteksten die niets zeggen.
Een stappenplan voor die tests vindt u op uw website zelf testen. Een automatische scan vindt niet alles, dus de handmatige tests zijn geen overbodige luxe.
Waar begint u?
Begin bij de fouten die in het thema of in de sjablonen zitten, zoals contrast, focus en knoppen zonder naam. Eén aanpassing lost het dan op alle pagina’s op. Ga daarna naar de inhoud: alt-teksten, koppen, linkteksten. Dat is meer werk, maar u kunt het pagina voor pagina doen, te beginnen met de pagina’s die het meest bezocht worden.
Ziet u door de bomen het bos niet meer, of wilt u weten welke van deze fouten op uw site spelen? Op onze pagina over toegankelijke websites leest u hoe wij een site doorlichten en herstellen.
Vraag een gratis websitecheck aan. Binnen één werkdag weet u waar uw website staat.
