Test in 5 stappen of jouw website toegankelijk is

Sinds 23 september 2020 moeten de websites van instanties binnen de overheid en semi-overheid voldoen aan de richtlijnen van de WCAG 2.1. Ook commerciële websites krijgen de komende jaren te maken met scherpere wetgeving rondom toegankelijkheid. Het is best een klus om al deze richtlijnen goed te begrijpen én om er vervolgens ook iets mee te doen. Daarom deel ik in dit artikel vijf eenvoudige manieren om zelf te testen hoe toegankelijk je website is. Na het uitvoeren van deze tests begrijp je beter wat toegankelijkheid inhoudt en waar jouw website nog tekortschiet.

De volgende onderwerpen komen aan bod:

• Stap 1. Kleur en contrast testen
• Stap 2. Lettertype vergroten
• Stap 3. Met een toetsenbord navigeren
• Stap 4. Automatisch testen
• Stap 5. Testen met een screenreader
• Hoe toegankelijk is jouw website?

Stap 1. Kleur en contrast testen

Voor de leesbaarheid van websites is het belangrijk dat er genoeg contrast is tussen de tekstkleur en de achtergrondkleur. Dat is natuurlijk belangrijk voor slechtzienden, maar ook voor bijvoorbeeld kleurenblinden. In Nederland is 8% van de mannen en 2% van de vrouwen kleurenblind. Overigens hebben ook mensen met gezonde ogen baat bij een goed contrast. Bijvoorbeeld als ze hun scherm op energiebesparing hebben gezet of als ze in omstandigheden werken met veel tegenlicht of lichtinval.

Minimale contrasteisen voor maximale toegankelijkheid

Volgens de WCAG (Web Content Accessibility Guidelines) begint een goede contrastverhouding bij 4,5:1 voor gewone tekst. 1,0:1 betekent dat iets contrastloos is en 21,0:1 betekent dat iets het maximaal mogelijke contrast heeft. Grote teksten (vanaf 18pt) en vette tekst (vanaf 14pt) zijn beter leesbaar en hebben daarom een lagere minimale contrastverhouding van 3,0:1. Minimale contrastverhoudingen gelden ook voor elementen in de website zonder tekst, zoals tabellen en grafieken. Hiervoor geldt een minimaal contrastverschil van 3,0:1. Wel zijn er een aantal uitzonderingen. Je hoeft je logo bijvoorbeeld niet aan te passen om te voldoen aan de toegankelijkheidseisen.

Benieuwd of jouw website voldoet aan deze richtlijnen? Dit zijn handige, gratis tools waarmee je jouw kleurcontrast kunt testen.

• Contrast-ratio.com: website waarop je eenvoudig de voor- en achtergrondkleur kunt invullen om het kleurcontrast te berekenen.
• Contrast Checker: website van Acard Communication, een Canadees reclamebureau, waarop je kleuren kunt invullen en het contrast kunt berekenen.
• Colour Contrast Analyser: deze gratis tool vertelt je de contrastwaarde van twee geselecteerde kleuren. Ook zie je direct of de combinatie voldoet aan de eisen van WCAG 2.1.

Stap 2. Lettertype vergroten

Mensen met een visuele beperking hebben vaak moeite met het lezen van kleine letters. Het is daarom belangrijk dat gebruikers het lettertype op je website zonder problemen kunnen vergroten. Soms gebruiken zij daarvoor een loepje, maar vaker vergroten ze de letters op de website zelf. Dat kan op allerlei manieren. Bijvoorbeeld met digitale vergrootglazen in de browser of met vergrotingssoftware. Ook mensen met gezonde ogen hebben soms behoefte aan grotere letters. Bijvoorbeeld als hun ogen vermoeid zijn.

Kunnen jouw bezoekers het lettertype probleemloos vergroten?

In succescriterium 1.4.4 van de WCAG 2.1 wordt het volgende genoemd over het vergroten van het lettertype:

Alle tekst moet zonder software tot 200% te vergroten zijn, zonder verlies van content of functionaliteit. Captions of afbeeldingen van tekst vallen niet onder dit criterium.

Vergroot het lettertype op jouw website eens met 200% en stel jezelf deze vragen:

• Is de tekst nog leesbaar?
• Kun je nog steeds eenvoudig de weg vinden op je site?
• Functioneert alles nog naar behoren?

Binnen ieder besturingssysteem wordt een gratis mogelijkheid geboden om in te zoomen:

• Lettertype vergroten en zoomen in Windows
• Lettertype vergroten en zoomen in MAC O

Stap 3. Met een toetsenbord navigeren

Veel mensen met een motorische beperking kunnen geen muis gebruiken. Ze zijn volledig afhankelijk van hun toetsenbord, ook voor de navigatie op je website. Ook blinden en slechtzienden maken vaak gebruik van een toetsenbord om snel te kunnen navigeren.

De belangrijkste toetsen

Als je gaat testen is het belangrijk dat je weet hoe mensen met een beperking hun toetsenbord gebruiken.

• De belangrijkste toets voor toetsenbordnavigatie is de TAB-toets. Met deze toets kun je binnen een website navigeren tussen elementen, links en binnen formulieren.
• Met SHIFT-TAB ga je terug.
• De ENTER-toets en de SPATIE-balk worden vaak gebruikt om items te selecteren en om te klikken.
• De PIJLTJES-toetsen zijn bedoeld voor de overige navigatie in een website.

Onderaan dit artikel van WebAIM vind je een overzicht van veelgebruikte toetscombinaties.

Elementen in focus

Het is belangrijk dat gebruikers kunnen zien welk element de focus van het toetsenbord heeft. Meestal krijgt dat element een omlijning, maar je kunt het ook op andere manieren extra opvallend maken. Bijvoorbeeld door de achtergrondkleur te veranderen.

Volgorde navigatie

De gebruiker verwacht meestal dat elementen focus krijgen van links naar rechts en van boven naar onder.

Naar content springen

Tegenwoordig zorgen veel toegankelijke websites ervoor dat gebruikers met hun toetsenbord meteen naar de hoofdinhoud kunnen springen. Vooral als er boven de hoofdinhoud veel interactieve elementen aanwezig zijn.

Beschrijvende links

Blinden en slechtzienden zijn afhankelijk van de beschrijving van de elementen op je website. Bij beschrijvingen als ‘klik hier’ hebben deze gebruikers geen idee wat ze activeren of waar ze naartoe navigeren.

Stap 4. Automatisch testen

Er bestaan ook tools waarmee je jouw website automatisch kunt testen. Belangrijk om te weten is dat je op deze manier slechts 15-25% van de toegankelijkheidseisen kunt testen.

Hoe werken automatische accessibility tests?

Automatische accessibility tests voeren een aantal scripts uit, die de inhoud van je webpagina’s naast bepaalde criteria leggen. Het W3C houdt een lijst bij met internationale testinstrumenten.

Er bestaan verschillende soorten accessibility testing-tools.

Browserextensies

Testen via browserextensies is meestal de makkelijkste manier van automatisch testen. Ze zijn vaak gratis te gebruiken en over het algemeen heb je er geen technische expertise voor nodig. Vaak moet je eerst naar een pagina navigeren en op een knop klikken. Daarna genereert de extensie een testrapport met toegankelijkheidsproblemen specifiek voor die pagina. Als je veel pagina’s wil testen, kost deze manier van testen daardoor veel tijd.

Command line tools

Command line tools worden vaak door developers gebruikt en vereisen meer technische kennis. Je kunt hiermee meerdere URL’s of een heel domein in één keer testen. Je kunt er ook webpagina’s mee controleren die nog lokaal draaien (en dus nog niet via de browser kunnen worden getest).

Voorbeelden van zulke tools zijn A11y, aXe-cli en Pa11y.

Alleen automatisch testen is niet genoeg

Alleen automatisch testen is niet voldoende. Het is een ‘aanvulling op’ en geen ‘vervanging van’ handmatig testen. Ze geven soms valse of misleidende resultaten, ze kunnen niet alle toegankelijkheidseisen testen en het advies is vaak vrij vaag. Een automatische test is daarom ook niet genoeg voor het afgeven van een toegankelijkheidsverklaring.

Stap 5. Testen met een screenreader

De screenreader is een veelgebruikt hulpmiddel, vooral voor blinden en slechtzienden. Het is voor veel van hen een essentieel hulpmiddel om toegang te krijgen tot de digitale wereld. Een screenreader leest de HTML-structuur en de inhoud van een webpagina van boven naar beneden uit. Hij zet dit vervolgens om in tekst, leest het voor en stuurt het eventueel door naar een brailledisplay. Blinden en slechtzienden gebruiken de screenreader niet alleen voor het lezen van tekst, maar ook voor communicatie, navigatie, het aanvragen van diensten en het kopen van producten.

Zo wordt een screenreader gebruikt

Screenreadergebruikers lezen een website lineair, van linksboven naar rechtsonder. Ze hebben geen overzicht en kunnen niet de gehele webpagina overzien. De hele pagina wordt in tekst als een lichtkrant voorgelezen. Hierdoor is de visuele opmaak en de positie van de informatie niet meer van belang.

Hoe iemand met een screenreader navigeert, verschilt.

• Blinden gebruiken eigenlijk alleen het toetsenbord voor navigatie.
• Slechtzienden zijn meestal gewend aan het gebruik van een muis.
• Screenreaders op smartphones en tablets gebruiken speciale gestures om door een website te navigeren.

Met welke screenreader kun je het beste testen?

Populaire screenreaders:

• JAWS (Windows, betaald)
• NVDA (Windows, gratis)
• Verteller (Windows, gratis)
• Apple VoiceOver (macOS/iOS, gratis)
• Google TalkBack (Android, gratis)
• Google ChromeVox (Chrome)

Screenreaders zijn meestal specifiek ontwikkeld voor een bepaald besturingssysteem. Daardoor gebruiken mensen vaak meerdere screenreaders. Hoewel het goed zou zijn om met zoveel mogelijk screenreaders te testen, is de aanbeveling meestal om er één of twee te gebruiken.

Let hierop tijdens het testen

Check of je website aan de volgende punten voldoet:

• Je kunt door de website navigeren met alleen het toetsenbord.
• De pagina is goed gestructureerd. Je kunt makkelijk van element naar element springen.
• De koppen zijn duidelijk en beschrijvend.
• Het is duidelijk waar elke link naartoe verwijst.
• Het is duidelijk waar knoppen voor dienen.
• Dynamisch gegenereerde inhoud is ook toegankelijk met de screenreader.
• Alle afbeeldingen zijn voorzien van een goede alternatieve tekst (alt-attribuut).
• Tekst staat niet in de afbeeldingen, maar erbij. Tekst in afbeeldingen wordt namelijk niet voorgelezen.
• Formuliervelden hebben de juiste labels. Het is duidelijk wat je in het veld moet invullen.
• Het formulier kan verzonden worden met alleen het toetsenbord.
• De autofill-functionaliteit van formulieren werkt goed.
• De formuliervelden hebben duidelijke foutmeldingen die worden voorgelezen.
• Carrousels, video’s en audio die automatisch afspelen kunnen worden gepauzeerd.
• Grafieken zijn niet te complex en hebben een duidelijke omschrijving.
• Belangrijke informatie in tabellen is toegankelijk.

Het testen met een screenreader kan trouwens best lastig zijn als je nooit eerder met een screenreader gewerkt hebt. Trek dus niet te snel conclusies als iets niet lukt en kijk eerst of je misschien zelf iets verkeerd doet.

Hoe toegankelijk is jouw website?

Vallen de resultaten mee of tegen? Voor veel websites zal er nog aardig wat werk aan de winkel zijn, maar de eerste stap is nu gezet. Je weet waar je moet beginnen en snapt beter waarvoor je het doet. De 4,5 miljoen Nederlanders met een beperking zullen je heel erg dankbaar zijn!