Alle succescriteria die relevant zijn voor een ontwikkelaar.
Niet-tekstuele content is alles op een pagina wat geen gewone tekst is. Denk aan foto’s, illustraties, iconen, grafieken, emoji, geluiden en video’s. Geef deze content een tekstalternatief. Dat is een tekst die dezelfde informatie geeft als de content zelf, of hetzelfde doet. Mensen met een visuele beperking kunnen deze niet-tekstuele content niet (of niet goed) […]
Met vormgeving laat je veel structuur zien. Een kop is groot en vet. Een lijst heeft opsommingstekens. Een tabel heeft rijen en kolommen. En een label staat naast het veld waar het bij hoort. Die structuur en die relaties moeten ook in de code staan, of in de tekst zelf. Dan blijven ze bestaan als […]
De volgorde van de content in de code bepaalt de leesvolgorde. Een schermlezer leest de content in die volgorde voor. Zonder opmaak verschijnt de content ook in die volgorde. Met CSS kun je de content op het scherm in een andere volgorde zetten. Wat iemand ziet, kan dus afwijken van wat een schermlezer voorleest. Een […]
Zorg dat je website of app werkt in staande én in liggende weergavestand. Niet iedereen kan een apparaat draaien. Een rolstoelgebruiker heeft een tablet bijvoorbeeld soms in een vaste houder. De pagina moet daarom meedraaien met het apparaat. De opmaak mag per stand verschillen, zolang alle content en functies in beide standen werken. Er zijn […]
Leg in de code vast waar een invoerveld voor is. Dat geldt voor velden die gegevens over de gebruiker zelf vragen, zoals naam, e-mailadres, telefoonnummer of adres. Sommige mensen met een cognitieve beperking begrijpen niet altijd uit het label wat ze moeten invullen. Als het doel in de code staat, dan kan de browser de […]
Start er op je pagina geluid dat automatisch start en langer dan 3 seconden duurt? Dan moeten gebruikers dat geluid kunnen pauzeren of stoppen. Een volumeregelaar mag ook, als het geluid daarmee helemaal uit kan. Die regelaar moet los werken van het volume van de computer of telefoon. Automatisch betekent hier: het geluid start zonder […]
Gebruikers moeten tekst tot 200% kunnen vergroten met de functies van hun browser, zoals zoomen. Belangrijkste eis: alles blijft leesbaar en bruikbaar. Dus geen tekst die overlapt, wordt afgesneden of verdwijnt. Mensen die slechtziend zijn vergroten tekst soms om die beter te kunnen lezen. Zorg daarom dat je website goed meeschaalt als gebruikers inzoomen. Uitzonderingen […]
Mensen die slechtziend zijn, zoomen soms ver in om tekst te kunnen lezen. Het weergavekader wordt dan smaller. Past de content zich niet aan, dan lopen regels tekst buiten beeld. De gebruiker moet dan voor elke regel heen en weer scrollen en raakt snel de draad kwijt. Zorg daarom dat content bij 400% zoom past […]
Mensen die slechtziend zijn en mensen die dyslexie hebben, passen soms zelf de tekstweergave aan. Meer ruimte tussen regels, letters en woorden maakt tekst voor hen beter leesbaar. Ze doen dat met een browserextensie of een eigen stylesheet. Je website hoeft zelf geen instelling voor tekstafstand te hebben. Maar als iemand zelf de tekstafstand aanpast, […]
Soms verschijnt er extra content als je met de muis over een element beweegt, of als het element de toetsenbordfocus krijgt. Bijvoorbeeld een tooltip of een subnavigatie. Dit heet aanvullende content. Die content moet aan drie voorwaarden voldoen: De eis over sluiten geldt niet als de content: Content waarvan de browser de weergave bepaalt, valt […]
Niet iedereen kan een muis gebruiken. Mensen met een visuele beperking zien de muisaanwijzer bijvoorbeeld niet (of niet goed). Anderen kunnen door een fysieke of motorische beperking moeite hebben met nauwkeurige bewegingen. Zij bedienen de computer met het toetsenbord, of met software die werkt als een toetsenbord. Denk aan spraakbesturing, een schermtoetsenbord of een schakelaar. […]
Een toetsenbordval ontstaat als iemand met het toetsenbord ergens naartoe navigeert, maar er niet meer van weg kan komen of niet weet hoe. Dit is soms een probleem bij: Soms is het de bedoeling dat de focus binnen een onderdeel blijft, bijvoorbeeld in een (modaal) dialoogvenster. Dat is geen toetsenbordval, zolang je het venster met […]
Sommige websites gebruiken sneltoetsen die alleen uit een afdrukbaar teken bestaan: een letter, cijfer, leesteken of symbool. Bijvoorbeeld s om naar het zoekveld te gaan. Een reeks van zulke tekens telt ook mee, zoals eerst g en dan a. Zulke sneltoetsen gaan makkelijk per ongeluk af. Spraakherkenningssoftware zet gesproken woorden om in letters. Zegt iemand […]
Sommige mensen hebben meer tijd nodig om content te lezen of een taak af te ronden. Denk aan mensen die een schermlezer gebruiken, mensen die slechtziend zijn, en mensen met een motorische, cognitieve of taalbeperking. Een tijdslimiet is alles wat vanzelf gebeurt na een vaste tijd, zonder dat de gebruiker iets doet. Bijvoorbeeld: Ook een […]
Content die beweegt, knippert of vanzelf verandert, trekt de aandacht weg van de rest van de pagina. Mensen met een aandachts- of concentratiestoornis kunnen zich dan slecht richten op de andere content. Bewegende tekst is ook lastig voor mensen die langzaam lezen of bewegende dingen moeilijk kunnen volgen. Denk aan een carrousel, een animatie of […]
Veel pagina’s beginnen met dezelfde blokken: een header met logo, een navigatiemenu en een zoekveld. Navigeer je met het toetsenbord, dan moet je op elke pagina opnieuw langs al die links en velden. Dat kunnen wel eens tientallen toetsaanslagen zijn. Een schermlezer leest al die links ook elke keer opnieuw voor. Zorg daarom dat gebruikers […]
Elke webpagina heeft een titel nodig die beschrijft waar de pagina over gaat. Zo weten gebruikers waar ze zijn, zonder eerst de content te lezen. Die titel zie je in je browser als de naam van een tabblad. Zo kunnen mensen de pagina terugvinden, ook als er bijvoorbeeld meerdere tabbladen open staan. Ook hulptechnologieën maken […]
Focusvolgorde is de volgorde waarin bedieningselementen de focus krijgen als je met Tab door een pagina gaat. Die volgorde moet de betekenis en de bedienbaarheid van de content behouden. Klopt de volgorde niet, dan springt de focus onlogisch over de pagina. Dat is verwarrend voor mensen die alleen het toetsenbord gebruiken en voor mensen die […]
Gebruikers moeten begrijpen wat een link doet of waar die naartoe gaat, voordat ze de link volgen. Dat kan door een duidelijke linktekst te schrijven, of door de context van de link te gebruiken om het duidelijk te maken. Schermlezers kunnen een overzicht tonen van alle links op een pagina. In dit overzicht staan alle […]
Niet iedereen navigeert op dezelfde manier. Sommigen gebruiken liever de navigatie, anderen vinden het makkelijker om te zoeken. Zorg daarom dat elke pagina op je website op minstens twee manieren te vinden is. Dit kan bijvoorbeeld via: Dit geldt niet voor stappen in een proces, zoals een meerstapsformulier. Het geldt ook niet voor het resultaat […]
Koppen en labels beschrijven waar content over gaat of waar een bedieningselement voor is. Zo vinden gebruikers sneller wat ze zoeken. Het gaat om het label dat iedereen ziet: de tekst of het icoon bij een bedieningselement. Koppen en labels hoeven niet lang te zijn. Eén woord of zelfs één teken is genoeg, als het […]
Alle elementen die de toetsenbordfocus krijgen, moeten een zichtbare focusindicator hebben. Een focusindicator laat zien welk element de focus heeft. Vaak is dat een rand om het element. Mensen die het toetsenbord gebruiken, kunnen zo zien waar ze op de pagina zijn en weten welk element reageert als ze op Enter of de Spatie drukken. […]
Krijgt een bedieningselement de toetsenbordfocus? Dan mag het niet volledig bedekt worden door andere content op de pagina. Minstens een deel van het element moet op dat moment zichtbaar zijn. Dit gaat vaak mis bij content die op een vaste plek blijft staan als je scrolt, zoals: Heeft de gebruiker de content zelf geopend, zoals […]
Werkt een functie op je website met een gebaar van meerdere vingers? Of met een beweging in een bepaalde richting of langs een bepaalde route? Zorg dan dat dezelfde functie ook werkt met één aanwijzer, zonder zo’n beweging. Bijvoorbeeld met: Het gaat om twee soorten gebaren: Niet iedereen kan deze gebaren maken. Sommige mensen bedienen […]
Aanwijzerannulering gaat over het voorkomen van acties die je niet bedoelde. Klik of tap je per ongeluk op de verkeerde knop? Dan moet je dat nog kunnen herstellen. Dat lukt het makkelijkst als een actie pas start bij het loslaten van de muisknop of je vinger. Zie je dat je verkeerd zit? Beweeg de aanwijzer […]
Een bedieningselement heeft vaak twee soorten tekst. Het label is de tekst die je op het scherm ziet, op of vlak bij het element. De toegankelijke naam is de tekst waarmee hulptechnologie het element herkent, zoals een schermlezer of spraakbediening. Dit succescriterium vereist dat de toegankelijke naam de tekst van het label bevat: in zijn […]
Zorg dat functionaliteit op je website niet alleen werkt door beweging. Het gaat om twee soorten beweging: Sommige gebruikers kunnen hun apparaat niet goed vasthouden of bewegen. Bijvoorbeeld omdat het apparaat in een vaste houder aan hun rolstoel zit. Zij hebben een bedieningselement nodig, zoals een knop, dat hetzelfde doet. Andere gebruikers bewegen hun apparaat […]
Werkt een functie op je website met slepen? Zorg dan dat dezelfde functie ook werkt zonder slepen, met één aanwijzer. Bijvoorbeeld met tappen of klikken. Dat mogen ook meerdere klikken of taps achter elkaar zijn. Bij slepen doe je vier dingen: Voorbeelden van slepen zijn: Niet iedereen kan slepen. Sommige mensen gebruiken een trackball, een […]
Het aanwijsgebied van een bedieningselement moet groot genoeg zijn. Het aanwijsgebied is het deel van het scherm waarop je kunt klikken of tikken, zoals een knop of een link. Mensen die een fysieke of motorische beperking hebben, kunnen kleine bedieningselementen niet altijd precies aanwijzen met een muis of vinger. Bijvoorbeeld door trillende handen, of omdat […]
Geef in de code aan in welke taal je pagina is geschreven. Voorleessoftware gebruikt die taal om de tekst goed uit te spreken. Ontbreekt de taal of staat er een verkeerde taal? Dan leest het een Nederlandse tekst misschien voor met een Engelse uitspraak. Die is slecht te verstaan. Ook andere software gebruikt de taal. […]
Onverwachte veranderingen zijn verwarrend voor iedereen, maar extra hinderlijk voor mensen met een functiebeperking. Stel je voor: je navigeert met het toetsenbord door een pagina en opeens opent er een nieuw venster of je wordt naar een andere pagina gestuurd. Dat is verwarrend. Als een bedieningselement de focus krijgt, dan mag er geen contextwijziging plaatsvinden. […]
Onverwachte veranderingen zijn verwarrend voor iedereen, maar extra hinderlijk voor mensen met een beperking. Stel je voor: je kiest een optie in een keuzelijst en opeens verschijnt er een nieuw scherm, of de hele pagina ververst zonder waarschuwing. Dat is verwarrend. Als iemand de instelling van een bedieningselement wijzigt, mag er geen contextwijziging optreden, tenzij […]
Een consistente indeling maakt websites beter te navigeren en te begrijpen. Dit helpt gebruikers te begrijpen waar ze bepaalde knoppen of menu’s kunnen vinden. Het helpt hen om snel te vinden wat ze zoeken zonder elke keer de hele pagina te moeten scannen. Dit is vooral fijn voor mensen die maar een klein deel van […]
Onderdelen met dezelfde functie moeten op alle pagina’s van je website een consistente naam hebben. Heet de zoekknop op de ene pagina “Zoeken”? Noem hem dan op een andere pagina niet “Vind” of “Doorzoek website”. Dat geldt ook voor verschillende onderdelen die hetzelfde doen, zoals een link “Inloggen” in de header en een knop “Aanmelden” […]
Als je website hulp aanbiedt op meerdere pagina’s, zet die hulp dan dan steeds op dezelfde plek in de volgorde van de pagina. Staat de link “Contact” op de ene pagina in de header, direct na het logo? Dan moet hij op de andere pagina’s ook daar staan. Onder hulpfuncties vallen: Een link naar een […]
Als iemand een formulier verkeerd invult en de website ontdekt dat automatisch, dan moet de gebruiker in tekst lezen dat er een fout is, waar die zit en wat er fout is. Een rode rand of een icoon alleen is niet genoeg. Een foutmelding beschrijft wat er fout is. Daarnaast moet duidelijk zijn welk veld […]
Bij elk formulierelement moet zichtbaar zijn wat je moet invullen of kiezen. Dat doe je met een label, een instructie of allebei. Deze moeten zichtbaar zijn voor álle gebruikers. Denk aan een veld waar je je naam invult. Het woord “Naam” boven het veld is het label. Soms is een label niet genoeg. Geef dan […]
Weet de website hoe de gebruiker een fout kan oplossen? Zet dat dan in de foutmelding. Noem bijvoorbeeld het juiste formaat, het toegestane bereik of de mogelijke waarden. Een paar voorbeelden: Je mag géén suggesties geven als dit de beveiliging in gevaar brengt. Geef bij een verkeerd ingevuld wachtwoord bijvoorbeeld geen hints over wat het […]
Bij sommige acties op een website heeft een fout grote gevolgen. Denk aan een vliegticket voor de verkeerde datum, of een account dat per ongeluk is verwijderd. Zo’n fout is vaak niet meer terug te draaien. Zorg daarom dat gebruikers een fout kunnen voorkomen of herstellen. Bied dan minimaal één van deze opties aan: Dit […]
Vraag in één proces niet twee keer om dezelfde informatie. Is informatie later in het proces opnieuw nodig? Dan moet die informatie: Een voorbeeld: een gebruiker vult op stap 1 een naam in. Op stap 3 is die naam weer nodig. Dan staat de naam daar al ingevuld, of kan de gebruiker hem selecteren. Dit […]
Zorg dat mensen kunnen inloggen zonder iets te onthouden, over te typen of op te lossen. Vraag je dat toch, dan moet je ze daarbij helpen. Sommige mensen met een cognitieve beperking of leerbeperking, zoals dyslexie of dyscalculie, kunnen geen wachtwoord onthouden of een code foutloos overtypen. Zonder hulp komen ze niet binnen. Een cognitieve […]
Succescriterium 4.1.1 Parsen is op 21 september 2023 komen te vervallen in WCAG 2.1 voor alle HTML en XML content en is niet opgenomen in WCAG 2.2. Browsers en hulptechnologieën lezen de code van een website om de content te kunnen presenteren. Code heeft, net als menselijke taal, spelling- en grammaticaregels. Deze regels zijn vastgelegd […]
Bedieningselementen, zoals links, knoppen en formulierelementen, hebben vijf kenmerken die hulptechnologie moet kunnen uitlezen: naam, rol, toestand, eigenschappen en waarde. De naam identificeert het element, bijvoorbeeld “Zoeken”. De rol vertelt wat voor soort element het is, bijvoorbeeld een knop. De toestand vertelt in welke stand het element staat, bijvoorbeeld uitgeklapt of ingeklapt. De eigenschappen geven […]
Een statusbericht is een korte melding die verschijnt of verandert, zonder dat de focus verplaatst of de pagina opnieuw laadt. Het bericht geeft altijd informatie over één van deze vier dingen: Zorg dat een schermlezer deze berichten automatisch voorleest. Zo krijgt iemand die het bericht niet ziet dezelfde informatie. Dat doe je met een ARIA-rol […]