WCAG-succescriteria uitgelegd

Introductie van de pagina met informatie over de WCAG-succescriteria.

Zorg bij niet-tekstuele content voor een tekstalternatief.

Bied je een vooraf opgenomen video aan zonder geluid of een vooraf opgenomen audio aan zonder beeld, zorg er dan voor dat deze informatie ook op een andere manier beschikbaar is.

Voor vooraf opgenomen audio en video zijn ondertitels beschikbaar, behalve als deze informatie al op een andere manier beschikbaar is.

Wordt er in een video informatie getoond die niet wordt voorgelezen? Zorg er dan voor dat een blinde of slechtziende gebruiker deze informatie ook meekrijgt.

Voor alle live audio-streams zijn ondertitels beschikbaar.

Vooraf opgenomen video's hebben een extra audiotrack, de audiodescriptie, die belangrijke informatie beschrijft, als deze informatie niet in de originele video wordt uitgesproken.

Voeg gebarentaal toe aan een vooraf opgenomen video met gesproken woord.

Is er te weinig tijd om audiodescriptie uit te spreken, voeg dan een verlengde audiodescriptie toe. Deze pauzeert de video zodat er tijd is om de aanvullende informatie toe te voegen.

Voeg bij opgenomen video's de inhoud ook als uitgeschreven tekst toe.

Maak bij een live audio-opname de inhoud ook als uitgeschreven tekst beschikbaar, als live ondertitels of vooraf als tekstdocument.

Alle gebruikers moeten over dezelfde informatie kunnen beschikken.

Geef toetsenbordgebruikers de mogelijkheid om binnen een pagina sneller te navigeren door onderdelen te kunnen overslaan.

Geef instructies op een inclusieve manier. De instructies kunnen begrijpen moet niet afhankelijk zijn van eigenschappen die sommige gebruikers niet ervaren, zoals vorm, kleur, afmeting, locatie op het scherm, richting, of geluid.

Zorg ervoor dat een gebruiker het scherm niet fysiek hoeft te draaien om de inhoud van de webpagina te goed kunnen zien. Je moet een de website kunnen bekijken in zowel landschap-modus als in portret-modus.

Zorg dat de browser kan begrijpen wat een gebruiker moet invoeren, zodat die kan helpen en het makkelijker kan maken.

Maak ten volste gebruik van de mogelijkheden van bijvoorbeeld HTML en ARIA om het doel van onderdelen van een webpagina duidelijk te maken voor software.

Zorg ervoor dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan kleuren zien of verandering in kleur of kleurcontrast opmerken.

Speelt er automatisch geluid af op de webpagina en duurt dit langer dan 3 seconden? Zorg er dan voor dat de gebruiker het geluid kan stoppen, pauzeren of het volume kan regelen.

Het contrast van de tekstkleur ten opzichte van de achtergrondkleur moet hoog genoeg zijn, zodat de tekst in het algemeen goed leesbaar wordt gevonden.

De gebruiker moet tekst twee keer (200%) kunnen vergroten en nog steeds goed kunnen lezen.

Gebruik geen afbeeldingen van tekst, wanneer je ook gewone tekst kan gebruiken met vergelijkbare visuele opmaak.

Maak het contrast van de tekstkleur ten opzichte van de achtergrondkleur hoog, zodat de tekst goed gelezen kan worden door gebruikers die een hoog contrast nodig hebben.

Zorg ervoor dat opgenomen en uitgesproken tekst te verstaan is en niet gehinderd wordt door achtergrondgeluid.

Een gebruiker moet de visuele weergave van tekstblokken zelf kunnen aanpassen om deze beter te kunnen lezen.

Gebruik geen afbeelding voor tekstweergave, behalve als het echt niet anders kan.

De gebruiker moet de webpagina 400% kunnen vergroten in de browser en inhoud nog steeds kunnen lezen en de website goed kunnen gebruiken.

Zorg voor voldoende kleurcontrast tussen de achtergrondkleur en de kleur van componenten die visueel betekenis hebben.

Tekst kan op een aantal manieren aangepast worden, door mensen voor wie dat prettig is.

Als de inhoud wijzigt wanneer een gebruiker over een element hovert met de muis of het de toetsenbordfocus geeft, zorg er dan voor dat de interactie voorspelbaar is.

Zorg dat alle functionaliteit met een toetsenbord te bedienen is.

Wanneer een gebruiker met het toetsenbord de focus verplaatst naar een deel van de pagina, dan moet deze ook weer weg kunnen gaan met het toetsenbord. De gebruiker kan daarvoor bijvoorbeeld de Tab-toets, Escape-toets of de pijltjestoetsen gebruiken. Zo niet, beschrijf dan met welke toets het wel kan.

Zorg dat alle functionaliteit met een toetsenbord te bedienen is. Hier gelden geen uitzonderingen.

Maak geen extra sneltoetsen aan die bestaan uit één letter. Dit geldt voor hoofdletters en kleine letters, leestekens, cijfers of symbolen. Sneltoetsen van één letter worden bijvoorbeeld al gebruikt door screenreaders.

Geldt er een tijdslimiet voor een onderdeel van de pagina? Zorg er dan voor dat de gebruiker de tijdslimiet kan uitzetten of verlengen. Waarschuw de gebruiker tenminste 20 seconden voor het verstrijken van de tijdslimiet en maak verlengen simpel.

Zorg ervoor dat gebruikers zich op de inhoud van de website kunnen concentreren en niet worden afgeleid voor animaties, automatisch scrollen, knipperende onderdelen of voortdurende automatische updates.

Geef geen tijdslimiet voor het uitvoeren van een taak, zoals het invullen van een formulier of het lezen van de tekst in een carrousel.

Stel onderbrekingen uit of zorg ervoor dat de gebruiker onderbrekingen kan uitzetten, behalve in noodsituaties.

Zorg ervoor dat de website geen onderdelen bevat met meer dan drie flitsen per seconde.

Geef toetsenbordgebruikers de mogelijkheid om binnen een pagina sneller te navigeren door onderdelen te kunnen overslaan.

Webpagina's hebben titels die het onderwerp of doel beschrijven.

Wanneer een toetsenbordgebruiker binnen de webpagina navigeert, bijvoorbeeld met de Tab-toets, moet de tabvolgorde logisch en voorspelbaar zijn.

De linktekst vertelt aan de gebruiker waar de link naar toe gaat (het linkdoel).

Zorg ervoor dat er meer dan één manier is om een webpagina binnen website te vinden. Bijvoorbeeld via de hoofdnavigatie, het zoekveld en de sitemap.

Koppen en labels beschrijven het onderwerp of het doel.

Zorg dat het goed zichtbaar is welk element de toetsenbordfocus heeft, wanneer je door de website navigeert met een toetsenbord of vergelijkbare bediening. Dit kan bijvoorbeeld door het gebruik van een focusring (outline).

Gebruik paragraafkoppen (kopjes) om de content te structureren.

Zorg ervoor dat een element dat de toetsenbordfocus heeft zichtbaar is en niet volledig bedekt is door andere inhoud.

Zorg dat het goed zichtbaar is welk element de toetsenbordfocus heeft, wanneer je door de website navigeert met een toetsenbord of vergelijkbare bediening. Het moet duidelijk te zien zijn waar de toetsenbordfocus zich bevindt.

Aanwijsgebaren zijn bijvoorbeeld het slepen van inhoud binnen bepaalde kaders, het swipen van foto's of het vergroten van een kaart met twee vingers. Zorg ervoor dat de gebruiker deze acties ook kan doen met één aanwijzer zoals een muis of een vinger zonder deze extra gebaren te hoeven maken.

Zorg ervoor dat, als de gebruiker bijvoorbeeld een link of button indrukt met een aanwijzer zoals een muis of vinger, er de mogelijkheid is om actie te voorkomen of ongedaan te maken.

Voor bedieningselementen met een zichtbaar label, moet de zichtbare labeltekst aanwezig zijn in of overeenkomen met de toegankelijke naam.

Als de gebruiker een actie kan uitvoeren door een beweging te doen met het apparaat, dan moet er ook een manier zijn om die actie te doen zonder beweging. Niet iedereen kan bijvoorbeeld schudden met een mobiel.

Maak het aanwijsgebied van buttons, links en formuliervelden groot genoeg, zodat het makkelijker is om deze te selecteren.

Acties die werken met sleepbewegingen, waarbij de aanwijzer ingedrukt moet blijven terwijl je van de ene plek naar de andere plek sleept, hebben ook een manier om de handeling zonder sleepbeweging uit te voeren.

Zorg ervoor dat de aanklikbare elementen op een pagina groot genoeg zijn om makkelijk aan te klikken met een muis of vinger. Hierbij geldt dat het aan te klikken gebied ten minste 24 bij 24 pixels groot is.

Geef de menselijke taal waarin de tekst van een webpagina is geschreven aan. Dit kan door in het html-element het attribuut ‘lang’ mee te geven.

Als je pagina tekst bevat in een andere taal dan de hoofdtaal, geef dit dan aan. Dit kan door in het html-element waarbinnen de tekst staat het attribuut ‘lang’ mee te geven.

Maak functionaliteit voorspelbaar en daardoor goed te begrijpen. Als een gebruiker een component focus geeft met het toetsenbord of door erop te klikken met de muis, zorg dan dat die actie niet automatisch een contextwijziging veroorzaakt.

Verras een gebruiker niet, maar maak functionaliteit voorspelbaar en daardoor goed te begrijpen. Als een gebruiker een formuliercomponent of -optie selecteert of een invoerveld invult met het toetsenbord of met de muis, veroorzaakt dit niet automatisch een contextwijziging.

Zorg ervoor dat navigatie-componenten die voorkomen op meerdere pagina's overal op dezelfde manier werken. De navigatie staat op dezelfde plek op elke pagina, en de onderdelen staan in dezelfde volgorde.

Zorg ervoor dat componenten die dezelfde functie hebben binnen een website, er hetzelfde uitzien en ook hetzelfde werken.

Bied je hulp aan, of manieren om contact op te nemen op de website? Zorg er dan voor dat die informatie, of een link naar deze informatie, consistent op elke pagina binnen de website op dezelfde plek terugkomt.

Laat een gebruiker weten als er fouten zijn bij het invullen van een formulier.

Toon een label voor alle invoervelden, en geef aanvullende instructies wanneer het label niet voldoende helpt om een veld goed in te vullen.

Laat een gebruiker op een toegankelijke manier weten hoe een formulierveld goed in te vullen.

Wanneer een gebruiker een formulier invult met juridische, financiële of persoonlijke gegevens, zorg er dan voor dat gebruiker de ingevulde gegevens kan controleren en corrigeren.

Zorg ervoor dat een gebruiker geen informatie dubbel hoeft in te vullen in een formulier.

Maak inloggen makkelijk. Zorg dat inloggen niet afhankelijk is van een cognitieve functietest, zoals het onthouden van een wachtwoord.

Zorg dat er geen fouten in de HTML-code zijn.

Geef interactieve elementen een toegankelijke naam en een rol. Geef daarnaast, afhankelijk van de functionaliteit, het element een toestand (state), eigenschappen en een waarde mee.

Je kunt updates met belangrijke informatie met de gebruiker delen via een statusbericht. Zorg er dan voor dat gebruikers die de melding niet zien, deze informatie toch meekrijgen.