• Uitleg
  • Met je cliënt

Bijgewerkt op

In het kort

Begrijpelijk is het derde principe van WCAG. Bezoekers moeten snappen wat er staat en wat er gebeurt als ze iets doen. Daarbij horen een vaste plek voor hulp, formulieren met duidelijke uitleg en foutmeldingen die zeggen hoe je het oplost. Het voorbeeld gaat over een sms-code die je niet kunt plakken.

Wat is het

Begrijpelijk is het derde principe van WCAG. Twee dingen moeten duidelijk zijn: wat er staat, en hoe de website werkt. Pagina’s gedragen zich zoals je verwacht, en als er iets misgaat, snap je wat je moet doen.

Het heeft drie richtlijnen: leesbaar (3.1), voorspelbaar (3.2) en hulp bij het invullen (3.3). Daaronder vallen 13 succescriteria op niveau A en AA: eisen waarop je een website kunt testen. Hieronder staan de belangrijkste, met hun nummer. Drie ervan zijn nieuw in WCAG 2.2, dus oudere regels en checklists die uitgaan van WCAG 2.1, noemen ze niet. Welke versie de regels voor de overheid vragen, lees je in Wat is WCAG?

Waarom het ertoe doet

Mensen met een cognitieve beperking, die bijvoorbeeld moeite hebben met onthouden, leren of nieuwe informatie begrijpen, kunnen op een website vastlopen. Ze weten niet meer wat ze eerder invulden, of vinden de hulp niet terug. Een formulier met veel stappen is vermoeiend, en dat gaat sneller als je onderweg ook nog dingen moet onthouden. Zonder hulp stoppen sommige mensen halverwege, en melden ze zich dus niet aan.

Zo doe je het

Stap 3 tot en met 6 kun je zelf nalopen, ook zonder kennis van code. Voor de rest vraag je je webbouwer of leverancier.

  1. Zet de taal in de code (3.1.1, niveau A). Dan leest een schermlezer je tekst in de juiste taal voor. Staat er een stuk in een andere taal op de pagina, bijvoorbeeld uitleg in het Turks? Geef dat ook aan (3.1.2, AA).
  2. Laat niets vanzelf veranderen (3.2.1 en 3.2.2, A). Kiest iemand een wijk in een keuzelijst? Ga dan pas naar een nieuwe pagina na een druk op de knop, of vertel vooraf wat er gebeurt.
  3. Houd het menu en de namen overal gelijk (3.2.3 en 3.2.4, AA). Het menu staat op elke pagina in dezelfde volgorde. Heet een knop “Aanmelden”, noem hem dan niet elders “Inschrijven”.
  4. Zet hulp steeds op dezelfde plek (3.2.6, A, nieuw in 2.2). Hulp kan je telefoonnummer zijn, het contactformulier, de chat of de veelgestelde vragen. Staat de link naar contact op de ene pagina bovenin, zet hem dan ook op de andere pagina’s bovenin.
  5. Geef elk invulveld een label (3.3.2, A). Zet er uitleg bij als dat nodig is: “Geboortedatum, bijvoorbeeld 03-05-1980”. Een grijze voorbeeldtekst in het veld, die verdwijnt als je gaat typen, is geen label.
  6. Maak foutmeldingen duidelijk (3.3.1, A). Zeg in tekst welk veld fout is en wat er mis is, niet alleen met rood. “Het e-mailadres klopt niet” is genoeg voor deze eis. Weet je hoe het beter kan? Zeg dat dan ook (3.3.3, AA): “Vul je e-mailadres in zoals [email protected]”.
  7. Laat belangrijke invoer controleren (3.3.4, AA). Wijzigt of verwijdert iemand gegevens in het cliëntportaal? Laat die persoon het dan eerst nakijken, of maak het terug te draaien.
  8. Vraag niets twee keer (3.3.7, A, nieuw in 2.2). Heeft iemand het adres al ingevuld in stap 1? Vul het dan in stap 3 zelf in, of laat het kiezen. Een vinkje “Mijn postadres is hetzelfde als mijn woonadres” is ook goed. Een nieuw wachtwoord dat je niet ziet terwijl je typt, mag je wel twee keer laten intypen.
  9. Maak inloggen makkelijk (3.3.8, AA, nieuw in 2.2). Inloggen mag niet alleen afhangen van onthouden, overtypen of een puzzel oplossen: er moet een andere manier zijn, of hulp daarbij. Laat daarom wachtwoordbeheerders toe, programma’s die je wachtwoorden bewaren en invullen, en laat kopiëren en plakken toe. Een inloglink per e-mail kan ook. Dat geldt ook voor een code die je per sms krijgt: die moet je kunnen plakken.

Voorbeeld: een sms-code in zes vakjes

Je helpt een cliënt om voor het eerst in te loggen op het cliëntportaal van je organisatie. Ze krijgt een code per sms. Die moet ze in zes losse vakjes typen, en als ze hem plakt, komt alleen het eerste cijfer in het eerste vakje. Daarna vult ze in haar profiel haar telefoonnummer in, met streepjes. Bovenaan verschijnt “Ongeldige invoer”, zonder uitleg.

Twee van die dingen zijn eisen in WCAG. De code moet in één keer te plakken zijn (3.3.8). De foutmelding noemt het veld en zegt hoe het wel moet (3.3.1 en 3.3.3). Dat het telefoonnummer met of zonder streepjes of spaties mag, is geen harde eis in WCAG, maar wel een aanbeveling: door een melding als “Ongeldige invoer” kan iemand gaan twijfelen aan het eigen nummer, en stoppen.

Maak je een schermafbeelding voor de leverancier, zorg dan dat er geen gegevens van je cliënt op staan.

Let op

  • Schrijf op taalniveau B1, ook al is het voor niveau AA geen eis. Het succescriterium over leesniveau (3.1.5) hoort bij AAA. Toch hebben in Nederland ongeveer 3 miljoen mensen van 16 tot en met 75 jaar moeite met lezen, schrijven en/of rekenen.
  • Gebruik ook de aparte handleiding van W3C. Die beschrijft websites voor mensen met een cognitieve beperking of leerproblemen, en gaat verder dan WCAG. Het is geen eis, maar het maakt je website wel voor meer mensen bruikbaar.
  • Vermijd een plaatjespuzzel bij het inloggen, zoals “kies alle foto’s met een fiets”. Op niveau AA mag die nog, als uitzondering.

Meer weten

Hulpmiddelen die hierbij passen

  • Tekstcheck

    Taalcheck

    Check of je tekst makkelijk te lezen is. Je ziet lange zinnen en moeilijke woorden, met een makkelijker woord ernaast.

  • Generator

    Toegankelijk­heids­verklaring maken

    Zet op een rij wat je organisatie al heeft gedaan om de website toegankelijk te maken, en wat nog moet. Je krijgt een eenvoudige verklaring in gewone taal, als pdf. Voor overheden geldt een eigen, officieel model.

Bronnen

  1. Web Content Accessibility Guidelines (WCAG) 2.2  (externe website)W3C
  2. What's New in WCAG 2.2  (externe website)W3C Web Accessibility Initiative
  3. Understanding Success Criterion 2.5.3: Label in Name  (externe website)W3C Web Accessibility Initiative
  4. Understanding Success Criterion 3.2.6: Consistent Help  (externe website)W3C Web Accessibility Initiative
  5. Understanding Success Criterion 3.3.1: Error Identification  (externe website)W3C Web Accessibility Initiative
  6. Understanding Success Criterion 3.3.7: Redundant Entry  (externe website)W3C Web Accessibility Initiative
  7. Understanding Success Criterion 3.3.8: Accessible Authentication (Minimum)  (externe website)W3C Web Accessibility Initiative
  8. Making Content Usable for People with Cognitive and Learning Disabilities  (externe website)W3C
  9. Easy Checks – A First Review of Web Accessibility  (externe website)W3C Web Accessibility Initiative
  10. EN 301 549 en WCAG  (externe website)Digitoegankelijk
  11. Laaggeletterdheid in Nederland  (externe website)Stichting Lezen en Schrijven

Meer over dit onderwerp

Samen iets bouwen?

Stuur ons een berichtje als je een idee hebt, iets mist of een hulpmiddel wilt uitproberen met je team. Vertel in een paar zinnen waar het om gaat. We lezen alles, en het verplicht je tot niets.

Stuur een berichtje [email protected]