Je weet nu wat de WCAG is, maar waar begin je als je de toegankelijkheid van je website wilt verbeteren? Met een paar praktische checks die je direct kunt uitvoeren. In dit artikel lopen we vier basiscontroles langs waarmee je direct inzicht krijgt in de toegankelijkheid van je website.
Koppenstructuur (hiërarchie)
Bezoekers scannen een pagina om te zien of deze relevant is. Koppen helpen je daarbij. Voor iemand met een screenreader geldt precies hetzelfde – aan de hand van koppen stellen zij de relevantie van een pagina vast. Daarom is een correcte hiërarchie zo belangrijk.
Een pagina heeft één kop van het hoogste niveau (een <h1>), en de daaropvolgende koppen slaan geen niveaus over. De koppenstructuur van de pagina die je nu leest, ziet er (ingekort) als volgt uit:
<h1>Eerste controle op toegankelijkheid<h2>Koppenstructuur<h3>Hoe controleer je of je structuur in orde is?
<h2>Contrastratio<h3>Hoe controleer je contrasten?
Hoe controleer je of je structuur in orde is?
Normaal gesproken zie je aan de opmaak van welk niveau een kop is. Daarmee is snel vast te stellen of de structuur klopt. Wil je zekerheid? Dan kijk je in de HTML-code en controleer je of de juiste elementen gebruikt zijn.
Er zijn ook browserplug-ins die je daarbij helpen, zoals de WAVE Evaluation Tool. Die geeft de koppenstructuur visueel weer, zoals in het volgende screenshot (van verrukkelijke15.nl/achtergronden, de teksten zijn ingekort voor het voorbeeld).
Contrastratio
Om teksten goed te kunnen lezen, is voldoende contrast tussen letters en achtergrond essentieel. De WCAG 2.1 AA-richtlijn adviseert een minimumratio van 4,5:1. Voor grotere letters (minimaal 18 pixel) en vetgedrukte tekst (minimaal 14 pixel) mag deze verhouding 3:1 zijn.
Hoe controleer je contrasten?
De zojuist genoemde WAVE Evaluation Tool is hier handig voor. Ook zijn er online applicaties zoals siegemedia.com/contrast-ratio waar je kleurcontrasten snel kunt testen.
Tekstalternatieven van afbeeldingen
Niet iedereen ziet afbeeldingen even goed. Dat kan komen door een visuele beperking of doordat een afbeelding niet laadt. In beide gevallen is het belangrijk dat bezoekers begrijpen wat de afbeelding betekent en hoe deze zich verhoudt tot de tekst.
Daarom voeg je een alternatieve tekst toe aan de afbeelding. In de code doe je dit met het alt-attribuut van het img-element.
Hoe controleer je of je alternatieve tekst goed is?
Ook hiervoor is de WAVE Evaluation Tool handig. Je ziet dan van iedere afbeelding direct de alternatieve tekst, zoals op de getoonde illustratie.
Er zijn ook bookmarklets (javascript die je als bookmark opslaat) die de alternatieve teksten weergeven. Een goed voorbeeld is die van Paul J. Adams. Hij stelt overigens meer bookmarklets voor toegankelijkheid beschikbaar.
En je kunt ook in de HTML-code kijken: <img src="logo_0.png" alt="Het tweede logo van de Verrukkelijke 15 uit de jaren 80">.
Let op: als de afbeelding alleen ter illustratie dient en niet nodig is om de inhoud te begrijpen, laat het het alt-attribuut leeg (maar verwijder het niet).
Toetsenbordnavigatie en visuele focus
Niet iedereen bedient je website of applicatie met een muis of aanraakscherm. Afhankelijk van de situatie gebruikt iemand een toetsenbord of een ander hulpmiddel. Als de pagina is opgebouwd met correcte HTML, hoeft hier eigenlijk geen extra aandacht aan besteed te worden.
Hoe controleer je of je site met het toetsenbord te bedienen is?
Met de Tab-toets navigeer je door de site. Als het goed is, spring je dan in de juiste volgorde naar links, formuliervelden en knoppen op de pagina. Met Enter of de spatiebalk bedien je de link of knop.
Tip: Heb je een Apple? Stel dan eerst in dat je met de Tab-toets door alle elementen kunt navigeren: Systeeminstellingen > Toetsenbord > Toetsenbordnavigatie.
Als de styling goed is geïmplementeerd, zie je ook welk element focus heeft – bijvoorbeeld door een rand om het element of een achtergrondkleur. Ontbreekt dit? Dan wordt direct duidelijk waarom het lastig is om de site of app te bedienen: je weet nu niet welk element actief is.
Samenvattend
Met deze vier controles heb je een goede basis om de toegankelijkheid van je pagina te verbeteren:
- Koppenstructuur: zorg voor één
<h1>per pagina en sla geen niveaus over. - Contrastratio: test of je tekst voldoende contrast heeft met de achtergrond.
- Alternatieve teksten: voeg betekenisvolle
alt-teksten toe aan afbeeldingen. - Toetsenbordnavigatie: test of je hele site met de Tab-toets te bedienen is en of de focus goed zichtbaar is.
Kleinere aanpassingen maken vaak al een groot verschil voor je bezoekers. En je hoeft niet eerst uitgebreide documentatie te bestuderen. Deze praktische checks geven je direct inzicht in wat er beter kan.
Meer weten?
Wil je meer inzicht en concreet weten wat er nodig is om jouw site of app toegankelijker te maken? Neem dan contact met me op via LinkedIn.