Alle succescriteria die relevant zijn voor een ontwikkelaar.
Geef alle niet-tekstuele content een tekstalternatief dat hetzelfde doel dient. Niet-tekstuele content is alles wat geen gewone tekst is. Denk hierbij aan afbeeldingen (zoals foto’s, illustraties en iconen), emoji, afbeeldingen van tekst, geluiden en andere elementen die niet uit tekst bestaan. Voor sommige content geldt een aangepaste eis: Mensen met een visuele beperking kunnen deze […]
Met vormgeving kun je veel structuur laten zien. Een kop is groot en vet. Een lijst heeft opsommingstekens. Een tabel heeft rijen en kolommen. Die structuur moet ook in de code staan, of in de tekst zelf. Dan blijft de structuur bestaan als de vormgeving wegvalt of verandert. Schermlezers zijn namelijk afhankelijk van de onderliggende […]
De volgorde van de content in de code bepaalt de leesvolgorde. Een schermlezer leest de content in die volgorde voor, en ook zonder opmaak blijft dezelfde volgorde over. 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. Als de […]
Maak je website of app zo dat mensen deze zowel in landschap (liggend) als portret (staand) formaat kunnen bekijken en bedienen. Niet iedereen kan namelijk hun apparaat draaien. Bijvoorbeeld rolstoelgebruikers met een apparaat in een vaste houder. Zorg daarom dat alle functies beschikbaar blijven, ongeacht de oriëntatie van het apparaat. Er zijn een paar uitzonderingen […]
Leg het doel van invoervelden die persoonlijke informatie van de gebruiker verzamelen vast in de code. Hieronder vallen persoonsgegevens zoals naam, voornaam, achternaam, e-mailadres, telefoonnummer, enz. Voor mensen die gebruik maken van een schermlezer en voor mensen met een fysieke of motorische beperking kan het invullen van een formulier een flinke opgave zijn. Als je […]
Als je een website maakt met automatisch afspelend geluid, zorg dan dat gebruikers dit geluid kunnen uitzetten. Geluid dat automatisch en langer dan 3 seconden speelt, moet je kunnen: Waarom is dit belangrijk? Sommige mensen gebruiken een schermlezer die tekst voorlezen. Als een website automatisch muziek of geluid afspeelt, kunnen zij hun schermlezer niet goed […]
Webpagina’s moeten zo worden ontworpen dat gebruikers de tekst tot 200% kunnen vergroten. Belangrijkste eis: alles moet leesbaar en bruikbaar blijven. Dus geen overlappende, afgesneden of verdwenen tekst. Mensen die slechtziend zijn vergroten tekst soms om deze beter te kunnen lezen. Zorg daarom dat je website goed meeschaalt als mensen inzoomen. Uitzonderingen zijn: Hoe pas […]
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 bieden. Maar past iemand de tekstafstand aan, dan […]
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 subnavigaties. Dit heet aanvullende content. Die content moet aan drie voorwaarden voldoen: De eis over sluiten geldt niet als de content: Uitzonderingen zijn: Hoe pas je dit toe? Voor […]
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. 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 het toetsenbord kunt sluiten. […]
Sneltoetsen die alleen uit letters, cijfers, leestekens of symbolen bestaan, of uit een reeks van zulke tekens, kunnen een probleem veroorzaken. Vooral voor mensen die spraakherkenningssoftware gebruiken en mensen die moeite hebben met nauwkeurig typen omdat zij per ongeluk een toets kunnen activeren. Het probleem zit in de ‘karakter-toetsen’. Dit zijn toetsen die meteen een […]
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: Gebruik je […]
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 door al die links heen. Dat kan tientallen toetsaanslagen kosten. Een schermlezer leest al die links ook elke keer opnieuw voor. Zorg daarom dat je deze herhalende blokken […]
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 […]
Focus volgorde 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 onverwacht over de pagina. Dat is verwarrend voor mensen die alleen het toetsenbord gebruiken en voor mensen […]
Gebruikers moeten begrijpen wat een link doet of waar hij naartoe gaat, voordat ze erop klikken. Dat kan als de linktekst duidelijk is, of als de tekst rondom de link het verduidelijkt. Schermlezers kunnen een overzicht van alle links op een webpagina presenteren. In dit overzicht staan alle linkteksten. Als linkteksten zoals ‘klik hier’ of […]
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: Heb je de content zelf geopend, zoals een […]
Werkt een functie op je website met een gebaar van meerdere vingers? Of met een beweging langs een vast pad? Zorg dan dat dezelfde functie ook werkt met één aanwijzer, zonder vast pad. Bijvoorbeeld met: Het gaat om twee soorten gebaren: Niet iedereen kan deze gebaren maken. Sommige mensen bedienen een touchscreen met één vinger, […]
Aanwijzerannulering gaat over het voorkomen van acties die je niet bedoelde. Klik of tik 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 mensen die een rolstoel gebruiken met het apparaat in een vaste houder. Zij hebben een bedieningselement nodig, zoals een knop, dat hetzelfde doet. Andere gebruikers bewegen hun […]
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. Bij slepen doe je vier dingen: Voorbeelden van slepen zijn: Niet iedereen kan slepen. Sommige mensen gebruiken een trackball, een hoofdaanwijzer, oogbesturing of een muis die ze met spraak bedienen. […]
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. Staat de taal er niet of verkeerd in? Dan leest voorleessoftware een Nederlandse tekst misschien voor met een Engelse uitspraak. Die is niet zo goed te verstaan. Ook brailleleesregels en browsers gebruiken […]
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 […]