Geef alle niet-tekstuele content een passend tekstalternatief. Denk hierbij aan afbeeldingen (zoals foto’s, illustraties en iconen), voortgangsbalken en andere elementen die niet uit tekst bestaan. Uitzonderingen zijn: Mensen met een visuele beperking kunnen deze niet-tekstuele content niet (of niet goed) zien. Daarom is het belangrijk om bij elke niet-tekstuele content een geschreven alternatief te maken. […]
Tag: Ontwikkelaar
Alle richtlijnen die relevant zijn voor een ontwikkelaar.
Info en relaties
Als je een website maakt, is het belangrijk dat de indeling en opmaak niet alleen voor bezoekers, maar ook voor computers begrijpelijk zijn. Wat je met vormgeving laat zien, moet ook in de code van je website duidelijk zijn. Denk hierbij bijvoorbeeld aan koppen, lijsten, tabellen en andere elementen die betekenis overbrengen. Schermlezers zijn namelijk […]
Betekenisvolle volgorde
Leesvolgorde is volgorde waarin teksten en elementen op een website worden gepresenteerd aan een schermlezer. Als deze volgorde belangrijk is voor het begrijpen van een tekst, zorg dan dat die volgorde ook in de code (de DOM) goed staat. Dit helpt hulpmiddelen zoals schermlezers om je content in de juiste volgorde te presenteren aan gebruikers. […]
Weergavestand
Nieuw in WCAG 2.1 Maak je website of app zo dat mensen deze zowel in landschap (liggend) als portret (staand) formaat kunnen bekijken. 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 […]
Identificeer het doel van de input
Nieuw in WCAG 2.1 Zorg dat het doel van invoervelden waarmee informatie van de gebruiker wordt verzameld in de code is vastgelegd. Onder informatie van de gebruiker 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 […]
Geluidsbediening
Als je een website maakt met automatisch afspelend geluid, zorg dan dat bezoekers 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 […]
Herschalen van tekst
Webpagina’s moeten zo worden ontworpen dat gebruikers de tekst tot 200% kunnen vergroten. Belangrijkste eis: alles moet leesbaar en bruikbaar blijven. Uitzonderingen zijn: Mensen met een visuele beperking willen de tekst soms flink kunnen vergroten om het beter te lezen. Zorg daarom dat je website goed meeschaalt als mensen inzoomen. Hoe pas je dit toe? […]
Afbeeldingen van tekst
Als het met eenvoudige code is op te lossen, gebruik dan altijd echte tekst in plaats van een afbeelding van tekst. Mensen kunnen echte tekst op een webpagina aanpassen naar hun eigen behoeften. Zo kunnen mensen die slechtziend zijn of mensen die dyslexie hebben bijvoorbeeld de grootte, de kleur of de regelafstand van de tekst […]
Reflow
Nieuw in WCAG 2.1 Webpagina’s moeten zo worden ontworpen dat de content bij een weergavekader van 320px bij 256px weergegeven kan worden zonder dat er iets wegvalt of niet meer werkt en zonder dat scrollen in twee richtingen voorkomt. Mensen die slechtziend zijn willen de tekst soms (flink) kunnen vergroten om het beter te kunnen […]
Tekstafstand
Nieuw in WCAG 2.1 Mensen die slechtziend zijn en mensen die dyslexie hebben vinden het vaak fijn om zelf de tekstweergave aan te passen. Dit helpt hen om de tekst beter te kunnen lezen. Zorg daarom dat de afstand tussen regels, alinea’s, letters en woorden kan worden aangepast zonder dat er iets wegvalt of niet […]
Content bij hover of focus
Nieuw in WCAG 2.1 Als je content toont wanneer iemand met de muis ergens overheen gaat of met het toetsenbord ergens op focust, moet dit voorspelbaar zijn. Deze tijdelijke content moet makkelijk te sluiten, te bereiken en lang genoeg zichtbaar zijn. Wanneer content verschijnt bij hover of focus, moet je aan drie voorwaarden voldoen: Hoe […]
Toetsenbord
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. Voor hen is het toetsenbord een uitkomst om de computer te gebruiken. Zorg er daarom voor dat alle functionaliteit van de content (ook) […]
Geen toetsenbordval
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: Als een onderdeel speciale toetsen nodig heeft om te verlaten, moet je dit duidelijk vermelden. Hoe pas je dit toe? Voor wie is dit belangrijk? Wie is verantwoordelijk? Bronnen Andere […]
Enkel teken sneltoetsen
Nieuw in WCAG 2.1 Sneltoetsen die alleen uit letters, cijfers, leestekens of symbolen bestaan kunnen problemen veroorzaken. Vooral voor mensen die spraakherkenningssoftware gebruiken en mensen die moeite hebben met nauwkeurig typen. Zij kunnen per ongeluk een toets indrukken. Het probleem zit in de ‘karakter-toetsen’. Dit zijn toetsen die direct een teken typen (zoals a, b, […]
Timing aanpasbaar
Mensen die gebruik maken van een schermlezer of mensen met een fysieke of motorische beperking hebben soms meer tijd nodig voor het uitvoeren van een taak. Als je een tijdslimiet gebruikt, zorg dan dat gebruikers tijd kunnen aanpassen of uitzetten zodat ze in hun eigen tempo kunnen werken. Als je een tijdslimiet gebruikt, zorg dan […]
Pauzeren, stoppen, verbergen
Bewegende of automatisch bijwerkende content kan afleidend zijn. Gebruikers moeten zelf kunnen bepalen of ze deze content willen zien. Dit is belangrijk voor mensen die moeite hebben met concentratie. Zorg daarom voor een pauze-, stop- of verberg-knop bij alle bewegende content die automatisch start, langer dan 5 seconden duurt en tegelijk met andere content wordt […]
Drie flitsen of beneden drempelwaarde
Content dat meer dan 3 keer flitst in 1 seconde kan een epileptische aanval veroorzaken bij mensen die daar gevoelig voor zijn. Gebruik daarom geen flitsende onderdelen. Hoe pas je dit toe? Voor wie is dit belangrijk? Wie is verantwoordelijk? Bronnen Andere richtlijnen
Blokken omzeilen
Als je met het toetsenbord door een website navigeert, is het vervelend om steeds door het logo, de hele navigatie en eventueel een zoekveld te moeten gaan. Daarom is het belangrijk dat je deze blokken kunt overslaan. Zorg daarom dat deze herhalende blokken met content kunnen worden overgeslagen. Denk aan een “Ga naar de inhoud”-link […]
Paginatitel
Geef webpagina’s een titel hebben die duidelijk maakt waar de pagina over gaat. Dit helpt gebruikers om te begrijpen waar ze zijn zonder de inhoud helemaal te hoeven 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 […]
Focus volgorde
Focus volgorde is de volgorde waarin elementen op een webpagina actief worden bij toetsenbordnavigatie. Deze volgorde moet kloppen met hoe de content bedoeld is. De volgorde waarin je door elementen tabt moet dus logisch zijn en de betekenis van de content bewaren. Als de focus volgorde niet logisch is, dan kan dit verwarrend zijn voor […]
Linkdoel (in context)
Het linkdoel moet kunnen worden bepaald uit alleen de linktekst of uit de linktekst samen met de context van de link. Schermlezers kunnen een overzicht van alle links op een webpagina presenteren. In dit overzicht staan alle linkteksten. Een linktekst zoals ‘lees meer’ of ‘klik hier’ is dan niet direct duidelijk. Links kunnen toegankelijker worden […]
Meerdere manieren
Websites moeten op verschillende manieren te navigeren zijn. Je moet minimaal twee manieren geven om dezelfde inhoud te bereiken. Dit kan bijvoorbeeld via: Dit is belangrijk omdat niet iedereen op dezelfde manier door een website navigeert. Zelfs kleine websites met maar een paar pagina’s moeten een tweede vorm van oriëntatie bieden. Hoe pas je dit […]
Focus zichtbaar
Alle bedieningselementen moeten een zichtbare indicator van de toetsenbordfocus hebben. Onder bedieningselementen vallen (onder andere) links, knoppen, formulierelementen en andere bedieningselementen. Mensen die gebruik maken van het toetsenbord kunnen zich oriënteren op een webpagina als gemakkelijk te zien is welk element de toetsenbordfocus heeft. Gebruik daarom een duidelijk zichtbare indicator van de toetsenbordfocus. Vaak wordt […]
Focus niet bedekt (minimum)
Nieuw in WCAG 2.2 Als iemand met het toetsenbord door een website navigeert, dan mag het element dat de focus heeft niet worden verborgen achter andere content. Denk hierbij aan zwevende content (sticky headers en sticky footers of een cookiemelding) of meebewegende content (back-to-top-knoppen). Het element moet altijd gedeeltelijk zichtbaar zijn. Hoe pas je dit […]
Aanwijzergebaren
Nieuw in WCAG 2.1 Als je een website maakt waar bezoekers speciale bewegingen met de vinger of muis moeten maken om een functie uit te voeren, zorg dan dat ze dezelfde functie ook kunnen gebruiken met een simpele actie zoals een klik, dubbele klik of klik vasthouden. Niet iedereen kan zulke aanwijzergebaren maken. Sommige mensen […]
Aanwijzerannulering
Nieuw in WCAG 2.1 Aanwijzerannulering gaat over het voorkomen van een ongewenste actie. Geef gebruikers de mogelijkheid om een actie te stoppen of ongedaan te maken als ze per ongeluk klikken of tikken. Als gebruikers iets met hun muis of vinger kunnen bedienen, moet er minimaal één van deze opties zijn: Hoe pas je dit […]
Label in naam
Nieuw in WCAG 2.1 Zorg dat de tekst die je ziet bij een element (knop, link, invoerveld) overeenkomt met de naam in de code. Dit is belangrijk voor mensen die spraaksoftware gebruiken. Stel je hebt een knop met de tekst ‘Verstuur’. In de code moet deze knop dan ook ‘Verstuur’ heten. Zo kunnen mensen met […]
Bewegingsactivering
Nieuw in WCAG 2.1 Zorg dat je website niet alleen werkt als gebruikers hun telefoon of tablet bewegen. Sommige bezoekers kunnen hun apparaat niet goed vasthouden of bewegen. Bijvoorbeeld rolstoelgebruikers met een apparaat in een vaste houder. Zorg daarom altijd een alternatieve manier om dezelfde functies te gebruiken. Ook belangrijk: gebruikers moeten de bewegingsactivering kunnen […]
Sleepbewegingen
Nieuw in WCAG 2.2 Als jij een website maakt waar mensen een sleepbeweging met de vinger of muis moeten maken, zorg dan dat ze dezelfde functies ook kunnen gebruiken met simpele acties zoals een klik, dubbele klik of klik vasthouden. Een sleepbeweging is een beweging die je maakt met een muis. Hierbij doe je eigenlijk […]
Grootte van het aanwijsgebied (minimum)
Nieuw in WCAG 2.2 Het klikbare gebied van bedieningselementen moet minimaal 24 bij 24 pixels groot zijn. Uitzonderingen zijn: Mensen met een fysieke of motorische beperking kunnen mogelijk niet goed gebruik maken van een muis door bijvoorbeeld onvrijwillige bewegingen of coördinatieproblemen. Hierdoor bestaat de kans dat per ongeluk een verkeerd bedieningselement wordt geactiveerd als 2 […]
Taal van de pagina
Voorleessoftware kan tekst omzetten in spraak. Als je de taal goed vastgelegd in de code, dan kan voorleessoftware de tekst op je pagina in de juiste taal uitspreken. Hoe pas je dit toe? Lees het artikel over taal in de code vastleggen Voor wie is dit belangrijk? Wie is verantwoordelijk? Bronnen Andere richtlijnen
Bij focus
Onverwachte veranderingen zijn verwarrend voor iedereen, maar extra hinderlijk voor mensen met een beperking. Stel je voor: je navigeert met het toetsenbord door een webpagina en opeens opent er een nieuw venster, of je wordt naar een andere pagina gestuurd. Dat is verwarrend! Dit soort onverwachte veranderingen noemen we een contextwijziging. Deze mogen niet voorkomen. […]
Bij input
Onverwachte veranderingen zijn verwarrend voor iedereen, maar extra hinderlijk voor mensen met een beperking. Bijvoorbeeld: als iemand een optie kiest in een keuzelijst, mag er niet zomaar een nieuw scherm verschijnen zonder waarschuwing. Of als iemand een selectievakje aanvinkt, moet niet plotseling de hele pagina vernieuwen zonder dat je dit hebt aangegeven. Hoe pas je […]
Consistente navigatie
Een consistente indeling maakt websites beter te navigeren en te begrijpen. Dit helpt gebruikers om te weten welke elementen ze kunnen verwachten en in welke volgorde. Hoe pas je dit toe? Voor wie is dit belangrijk? Wie is verantwoordelijk? Bronnen Andere richtlijnen
Consistente identificatie
Dit gaat over het consistent benoemen van dezelfde functies op verschillende webpagina’s. Als een knop of functie op meerdere pagina’s voorkomt, moet deze overal dezelfde naam en label hebben. Dit geldt ook voor de alternatieve teksten bij iconen en andere niet-tekstuele elementen. Hoe pas je dit toe? Voor wie is dit belangrijk? Wie is verantwoordelijk? […]
Consistente hulp
Nieuw in WCAG 2.2 Consistente hulp betekent dat je hulpfuncties (zoals contactinfo) op dezelfde plek zet op alle pagina’s van je website. Als iemand op één pagina ziet dat de telefoonnummer rechtsonder staat, dan verwacht die dat het op andere pagina’s ook daar staat. Dit criterium gaat over: Als je deze opties aanbiedt op meerdere […]
Foutidentificatie
Als er iets misgaat bij het invullen van een formulier, moet de gebruiker weten wat er fout is gegaan. Je moet daarom fouten duidelijk aanduiden met tekst. Gebruik bijvoorbeeld niet “Dit veld is verplicht” als foutmelding, maar wees zo specifiek mogelijk: Je kunt foutmeldingen op verschillende manieren tonen: Het doel is dat gebruikers weten dat er een […]
Labels of instructies
Labels of instructies moeten worden weergegeven bij formuliervelden. Het invullen van formulieren kan moeilijk zijn. Maak het gemakkelijker door precies te beschrijven wat er in een invoerveld moeten ingevuld en of het veld verplicht is. Ook als een invoerveld in een specifiek formaat moet worden ingevuld moet dit worden aangegeven. Bijvoorbeeld een datum in het […]
Foutsuggestie
Zorg dat je bij foutmeldingen altijd aangeeft hoe de gebruiker het probleem kan oplossen. Gebruik bijvoorbeeld: “Het e-mailadres is niet geldig. Controleer of je een @ hebt gebruikt.” in plaats van alleen “Ongeldig e-mailadres”. De suggesties mogen alleen weggelaten worden als dit de veiligheid of het doel van de inhoud in gevaar brengt. Hoe pas […]
Foutpreventie (wettelijk, financieel, gegevens)
Als je iets belangrijks invult op een website bij bestellingen of financiële transacties, wil je geen fouten maken. Sommige fouten kun je namelijk niet meer terugdraaien. Bij belangrijke acties op je website moet je altijd zorgen dat gebruikers hun invoer kunnen controleren en verbeteren voordat het definitief wordt verzonden. Bied minimaal één van deze opties aan: […]
Lees verder over Foutpreventie (wettelijk, financieel, gegevens)
Overbodige invoer
Nieuw in WCAG 2.2 Informatie moet maar één keer moet worden ingevuld. Mensen met een cognitieve of leerbeperking hebben mogelijk moeite met het invullen van een formulier met meerdere stappen. Als informatie uit een eerdere stap moet worden onthouden en nog een keer moet ingevuld dan kan dit zorgen voor problemen. Voor mensen met een fysieke […]
Toegankelijke authenticatie (minimum)
Nieuw in WCAG 2.2 Cognitieve functietests moet niet worden gebruikt voor het inloggen op een website. Onder een cognitieve functietest vallen taken taak die vereist dat iemand: Mensen met een cognitieve, taal- of leerbeperking hebben behoefte aan een laagdrempelige manier van inloggen. Zij kunnen moeite hebben met het uitvoeren van bijvoorbeeld een rekensom. Hoe pas […]
Parsen
Let op: 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 […]
Naam, rol, waarde
Onderdelen van websites moeten de juiste naam, rol, status en waarde hebben zodat hulptechnologie, zoals een schermlezer, ze goed kan interpreteren. Bij standaard HTML-elementen gaat dit automatisch. Als je zelf maatwerk componenten ontwikkelt, dan moet je de informatie over naam, rol en waarde handmatig toevoegen. Lees het artikel over naam, rol, waarde Hoe pas je […]
Statusberichten
Nieuw in WCAG 2.2 Een statusbericht is een melding die een verandering in de content aangeeft, zonder dat hiervoor de focus wordt verplaatst of de pagina wordt herladen. Statusberichten geven bijvoorbeeld informatie over het succes of de resultaten van een actie, over fouten of over de voortgang van een proces. Denk aan meldingen zoals “Bezig […]