Checklist toegankelijke website

Loop de punten na op de pagina’s die mensen het meest gebruiken: de startpagina, aanmelden en contact. Tussen haakjes staat het nummer van het succescriterium in WCAG 2.2. Punt 14 is geen eis voor niveau AA, maar wel belangrijk in de hulpverlening. Punt 20 gaat over documenten, zoals pdf-folders.

Doe het met z’n tweeën: de een test, de ander schrijft op wat er misgaat en op welke pagina. Zet bij elk punt “ja”, “nee” of “weet ik niet”. Een “weet ik niet” is een goede vraag voor je webbouwer.

Waarneembaar

1. Elke afbeelding heeft een passende alt-tekst. Die zegt wat de afbeelding betekent voor wie hem niet ziet. Is een afbeelding alleen versiering, dan blijft de alt-tekst leeg. Bij een knop met een plaatje zegt de alt-tekst wat de knop doet: “Zoeken”, niet “vergrootglas”. Staat er tekst in de afbeelding, zoals in een logo, dan staat die tekst ook in de alt-tekst. (1.1.1)

2. Video’s hebben ondertitels. Ook live uitzendingen, zoals een webinar. Zie je in een opgenomen video iets belangrijks dat niemand zegt, zoals een telefoonnummer of een naam in beeld? Dan is er ook audiodescriptie: een stem die vertelt wat er te zien is. (1.2.2, 1.2.4 en 1.2.5)

3. Tekst en knoppen hebben genoeg contrast. Gewone tekst heeft minstens 4,5:1 met de achtergrond, grote tekst minstens 3:1. Ook wat je nodig hebt om een knop of invulveld te herkennen, zoals de rand, heeft minstens 3:1, net als belangrijke iconen. Met de Contrastcheck kies je de kleur van de tekst en van de achtergrond, en zie je of ze voldoen. Let vooral op lichtgrijze tekst en op tekst over een foto. (1.4.3 en 1.4.11)

4. Kleur is nooit het enige signaal. “Verplichte velden zijn rood” werkt niet voor wie kleurenblind is. Zet er een woord of teken bij, zoals “(verplicht)”. Onderstreep ook links in een lopende tekst, dan zie je ze zonder op kleur te letten. (1.4.1)

5. Je kunt inzoomen zonder dat iets verdwijnt. Zoom in tot 200%: alles werkt nog. Zoom verder tot 400%: je hoeft niet zijwaarts te scrollen. Inzoomen doe je met Ctrl en + (op een Mac: Cmd en +), en meestal zit je na vier tot zes keer op 200%. Let op tekst die wegvalt of over andere tekst of een afbeelding heen komt te staan. (1.4.4 en 1.4.10)

6. Koppen zijn echte koppen. Een kop is in de code ook als kop gemaakt, niet alleen als grote of dikke tekst. Dan kunnen mensen met een schermlezer van kop naar kop springen. De koppen staan in een logische volgorde en zeggen waar het stuk eronder over gaat. Plak je de code van een pagina in de Structuurcheck, dan zie je wat er mist in de opbouw, zoals koppen. (1.3.1 en 2.4.6)

Bedienbaar

7. Alles werkt met alleen het toetsenbord. Klik in de adresbalk, leg je muis weg en ga met Tab door de pagina. Met Shift+Tab ga je terug. Je komt bij elke link, knop en elk veld, en je loopt nergens vast. Een bekend probleem is een videospeler waar je met Tab niet meer uit komt. (2.1.1 en 2.1.2)

8. Niets beweegt of verloopt ongemerkt. Moet iemand iets binnen een bepaalde tijd doen, zoals bij een cliëntportaal dat je na een tijdje uitlogt? Dan kan die de tijdslimiet uitzetten of ruim verlengen, of krijgt die op tijd een waarschuwing. Na die waarschuwing heeft iemand minstens 20 seconden om met één handeling meer tijd te vragen. Een slider die vanzelf start en langer dan vijf seconden beweegt, heeft een knop om te pauzeren of te stoppen. (2.2.1 en 2.2.2)

9. Je kunt het menu overslaan. Het menu staat op elke pagina, en wie met het toetsenbord of een schermlezer werkt, moet er anders steeds doorheen. Een bekende manier is een link “Naar de inhoud” bovenaan de pagina, die je soms pas ziet als je voor het eerst op Tab drukt. Zie je zo’n link niet, vraag dan je webbouwer hoe iemand het menu kan overslaan, want er zijn ook andere manieren. (2.4.1)

10. Titels en linkteksten zeggen waar het over gaat. Het tabblad noemt de pagina, zoals “Aanmelden bij het wijkteam”. Het belangrijkste staat vooraan, dus niet “Welkom op de website van … | Aanmelden”. Een link zegt waar hij heen gaat, dus niet alleen “klik hier”. (2.4.2 en 2.4.4)

11. Je ziet altijd waar je bent. De link of knop die je met Tab hebt bereikt, krijgt een duidelijk kader of een andere markering. Dat kader verdwijnt niet helemaal achter een vaste balk of chatknop. En met Tab ga je in een logische volgorde door de pagina, zoals je leest: van boven naar beneden en van links naar rechts. (2.4.3, 2.4.7 en 2.4.11)

12. Knoppen zijn makkelijk te raken, ook zonder slepen. Knoppen en links zijn minstens 24 bij 24 CSS-pixels (de maat die webbouwers gebruiken), of er zit genoeg ruimte omheen. Een link midden in een zin telt niet mee. Zo raakt iemand met een trillende hand minder snel de verkeerde knop. Wat je met slepen doet, zoals een afspraak verplaatsen in een agenda, kan ook met een klik of tik. (2.5.7 en 2.5.8)

Begrijpelijk

13. De website weet in welke taal hij is geschreven. Dan spreekt een schermlezer de woorden goed uit. Staat er een stuk tekst in een andere taal? Dan is dat ook aangegeven. Dit zie je niet op het scherm, dus vraag het na bij je webbouwer. (3.1.1 en 3.1.2)

14. Je teksten zijn in duidelijke taal. In Nederland hebben 3 miljoen mensen van 16 tot en met 75 jaar moeite met lezen, schrijven of rekenen. Schrijf daarom op taalniveau B1. De Taalcheck wijst lange zinnen en moeilijke woorden aan, en de checklist B1 helpt je verder. Voor niveau AA is dit geen eis: leesniveau (3.1.5) hoort bij AAA.

15. Menu en hulp staan op elke pagina op dezelfde plek. Denk aan het menu, je telefoonnummer, de chat en de link naar contact. Wie vastloopt, vindt de hulp dan altijd terug. Het gaat om de volgorde: staat het telefoonnummer op de ene pagina onder het menu, dan staat het op de andere pagina ook daar. (3.2.3 en 3.2.6)

16. Formulieren leggen uit wat je moet doen. Elk veld heeft een zichtbaar label. Klik je op het label, dan kom je in het veld of vink je het vakje aan, en dat helpt ook bij kleine keuzerondjes. Een foutmelding zegt in woorden welk veld fout is en hoe je het oplost, bijvoorbeeld “Vul je geboortedatum in als dag-maand-jaar, zoals 03-11-1985”. (3.3.1, 3.3.2 en 3.3.3)

17. Je hoeft niets twee keer in te vullen. Bestaat een formulier uit meerdere stappen? Dan staat wat je eerder invulde er al, of kun je het overnemen, bijvoorbeeld met een vinkje “Mijn postadres is hetzelfde als mijn woonadres”. Ook na een foutmelding blijft staan wat je al had ingevuld. Een nieuw wachtwoord nog een keer typen ter controle mag wel. (3.3.7)

18. Inloggen lukt zonder dat je iets moet onthouden of overtypen. Test het: kopieer een wachtwoord en plak het in het inlogveld, en kijk of een wachtwoordbeheerder het mag invullen. Dat is een programma dat wachtwoorden bewaart. Ook een inlogcode uit een sms moet je kunnen plakken. Werkt dat niet, en kun je op geen andere manier inloggen zonder iets te onthouden, dan voldoet het inloggen niet. (3.3.8)

Robuust

19. De code vertelt hulptechnologie wat er staat. Hulptechnologie is software die mensen helpt een website te gebruiken, zoals een schermlezer. Zelfgebouwde knoppen en menu’s hebben een naam en rol (4.1.2). Een melding als “Je bericht is verstuurd” is in de code als melding aangegeven, zodat een schermlezer hem voorleest zonder dat je ernaartoe hoeft (4.1.3). Dit kun je zelf moeilijk zien: vraag het na bij je webbouwer.

Documenten

20. Pdf’s en andere documenten zijn ook toegankelijk. Voor een pdf gelden dezelfde eisen als voor een webpagina. Vraag je eerst af of het een pdf moet zijn. Volgens Digitoegankelijk is een gewone webpagina meestal de betere keuze, onder meer omdat die beter werkt op een klein scherm. Heb je veel oude pdf’s, ruim dan eerst op wat verouderd is.

Let op

• Deze checklist is geen volledig onderzoek. Een website kan alle punten halen en toch drempels hebben. Laat voor een compleet beeld een specialist je website toetsen aan alle eisen van WCAG.
• Automatische testprogramma’s helpen, maar kunnen niet alles controleren. Ze zien bijvoorbeeld of een alt-tekst ontbreekt, niet of hij klopt. Een mens moet het altijd beoordelen.
• Een plug-in lost het niet op. Er zijn plug-ins die beloven je website in één keer toegankelijk te maken. Volgens Digitoegankelijk lukt dat niet, en kunnen ze zelfs nieuwe problemen veroorzaken.
• Test met de mensen voor wie het is. Laat een cliënt of ervaringsdeskundige een afspraak aanvragen op je website. Kijk mee waar het misgaat. Eén persoon spreekt niet voor iedereen met een beperking, dus nodig liefst mensen met verschillende beperkingen uit.
• Leg vast wat je hebt gevonden. Zet in een toegankelijkheidsverklaring wat al goed gaat en wat je nog gaat verbeteren. Met Toegankelijkheidsverklaring maken maak je in een paar stappen een verklaring.

Meer weten

• Je website toegankelijk maken: de stappen voor je organisatie.
• Wat is WCAG?
• Uitleg per principe: waarneembaar, bedienbaar, begrijpelijk en robuust.
• Easy Checks van W3C ↗ (in het Engels): meer eenvoudige controles, stap voor stap.