Persona's: alle beperkingen kort uitgelicht
Om een beter beeld te krijgen wat een beperking voor belemmeringen kan geven in het online gebruik, lichten wij hieronder de diverse beperkingen uit. Wat betekent dit voor de online gebruiker met deze beperking, hoe kun je met je website rekening houden met deze beperking en welke succescriteria (WCAG richtlijnen) vallen hieronder. De beperkingen worden onderverdeeld in vier hoofdgroepen: visueel, auditief, motorisch en cognitief.
Visueel
Een visuele beperking heeft op het gebruik van de veelal op zicht gebaseerde online wereld een enorme impact. Een visuele beperking kan ontstaan als je ouder wordt maar kan ook vanaf geboorte of gedurende een ziekte zich ontwikkelen. Er zijn diverse uitingen en gradatie van visuele beperkingen hieronder lichten wij er een paar veelvoorkomende uit.
Blind
Blinde gebruikers maken gebruik van een brailleleesregel of spraaksoftware om de inhoud te ‘lezen’ en te navigeren. Voorbeelden van spraaksoftware zijn JAWS en NVDA (Windows) of VoiceOver (Mac). Goed om te weten is dat de zogenaamde ‘voorleesfunctie’ dat geselecteerde teksten voorleest, niet wordt door deze groep omdat ze hun eigen spraaksoftware gebruiken.
| Succescriteria | Wat heeft de gebruiker nodig? | Hoe ondersteun je dit? |
|---|---|---|
| Alternatieve tekst | Alles wat niet in tekst wordt weergegeven heeft een tekst alternatief nodig. Denk aan afbeeldingen, grafieken, video’s en knoppen. | Door elke niet tekstuele content (afbeelding/iconen) te voorzien van een alternatieve tekst. |
| Toetsenbord toegankelijkheid | De website moet volledig met het toetsenbord te gebruiken zijn. Een blinde gebruiker kan geen cursor zien en dus geen muis gebruiken. | Door alle interactie elementen beschikbaar te maken voor toetsenbord gebruik. Dit doe je door juist gebruik van HTML. |
| Geen automatische afspelende audio- of videofragmenten | Zelfregie over het bedienen van audio en video. | Laat een video of een audiofragment niet automatisch starten want dan hoort de gebruiker de stem van zijn of haar spraak-software niet meer. |
| Tekstuele instructies | Bij formulieren zijn begrijpelijke invoervelden, instructies en foutmeldingen die ook worden voorgelezen met de voorleessoftware nodig. | Zorg dat invoervelden een duidelijk label hebben, dat instructies beschrijvend zijn en foutmeldingen aanwijsbaar. |
| Skiplinks | Een mogelijkheid om direct naar de hoofd content te navigeren. | Zorg ervoor dat er functionaliteit is om herhaalde content (zoals de link naar home, zoekfunctie en het menu) van de webpagina over te slaan en direct naar de hoofd content te gaan. |
| Label in naam | Alle informatie op de website moet door de spraaksoftware waargenomen kunnen worden. | Biedt alle informatie op de website in de HTML-code aan om te voorkomen dat informatie verloren gaat in bijvoorbeeld een ontoegankelijke PDF en niet meer leesbaar is voor een spraaksoftware. |
| Koppen | Goede koppenstructuur op de webpagina zodat alle informatie goed te scannen is. | Zorg ervoor dat de header structuur op de webpagina goed is opgebouwd met HTML5 elementen zodat de gebruiker enkel alleen op basis van de header structuur beeld kan krijgen wat uw webpagina te bieden heeft. |
| Links | Duidelijke links om te begrijpen waar de link voor bedoeld is. | Zorg voor beschrijvende links met bijvoorbeeld de zin: “Neem contact op”, in plaats van een link zonder informatie zoals: “Klik hier”. |
Slechtziend
Slechtziende gebruikers vergroten de teksten of laten de inhoud voorlezen door een schermlezer.
Overzicht van toegankelijkheids-eisen/wensen voor slechtzienden.
| Succescriteria | Wat heeft de gebruiker nodig? | Hoe ondersteun je dit? |
|---|---|---|
| Goede contrastverhouding | Voldoende contrast van de teksten met de achtergrond. | Door rekening te houden met het contrast. Deze dient minimaal 4.5:1 te zijn. Let vooral ook op tekst wat op een afbeelding staat en dat het focus zichtbaarheid randen ook voldoende contrast bevat. |
| Schaalbaarheid website | De website dient herschaalbaar te zijn. Gebruikers die slechtziend zijn zoomen vaak in om de tekst (beter) te kunnen lezen. Gebruikers met kokervisie vinden het juist soms fijn om uit te zoomen om zo de gehele website te zien om overzicht te krijgen. | Alle content en functionaliteit dient in in- en uitgezoomde weergave nog steeds beschikbaar te zijn |
| Focus zichtbaarheid | Omdat iemand die slechtziend is vaker via het toetsenbord (tab-toets) door een website scrollt is het belangrijk dat je kunt zien waar de focus waar de gebruiker op het moment is zichtbaar is. |
Geef altijd een visuele focus aanduiding op het geselecteerde interactie element zodat de gebruiker weet waar hij of zij op de pagina is.Dit kan door bv een kader om het menu item of een onderstreping. |
| Info en relaties | Duidelijke uitleg en uiting van waar een knop voor bedoeld is |
Het is belangrijk dat informatie, structuur, en relaties die worden overgebracht door presentatie ook op een andere manier beschikbaar zijn. Denk aan het goed aangeven van een koppenstructuur of een sterretje bij een verplicht veld in een formulier.
|
Kleurenblind
Ongeveer 1 op 12 mannen en 1 op 250 vrouwen is kleurenblind. Voor gebruikers met kleurenblindheid is het belangrijk dat informatie in onder andere tabellen, legenda en grafieken niet afhankelijk is van kleur.
Overzicht van toegankelijkheids-eisen/wensen voor kleurenblinden.
| Succescriteria | Wat heeft de gebruiker nodig? | Hoe ondersteun je dit? |
|---|---|---|
| Gebruik van kleuren | Informatie, functionaliteiten en links die alleen met kleur aangeduid worden zijn verwarrend of niet te begrijpen voor iemand die kleurenblind is. | Gebruik kleur niet als het enige visuele middel om informatie over te brengen. Vermijd daarom zinnen zoals “Klik op de groen knop om door te gaan.” en “De groene lijn in de grafiek toont de bevolkingsgroei van de stad Utrecht, de rode lijn van de provincie Utrecht.”. |
| Goede contrastverhoudingen | Voldoende contrast van de teksten met de achtergrond. | Door rekening te houden met het contrast. Deze dient minimaal 4.5:1 te zijn. |
Auditief
Doof of slechthorend
Voor dove en slechthorende gebruikers dient alles wat via geluid wordt gecommuniceerd, ook op een andere manier weergegeven worden.
| Succescriteria | Wat heeft de gebruiker nodig? | Hoe ondersteun je dit? |
|---|---|---|
| Ondertiteling | Een alternatief voor alle informatie die gebaseerd zijn op geluid. | Bij video’s via ondertiteling of eventueel in de Nederlandse gebarentaal en audiofragmenten dienen uitgeschreven te worden. |
| Duidelijk taalgebruik | Voor mensen die doof geboren zijn, is Nederlands niet de moedertaal maar gebarentaal. Begrijpelijke tekst is voor hen heel belangrijk | Door ‘eenvoudig’ Nederlands taalgebruik te hanteren. Voorkom figuurlijke taal en spreekwoorden. |
| Geen succescriteria wel wenselijk | ||
|
Gebarentaal |
Voor mensen die doof geboren is gebarentaal hun moedertaal. | Ondersteun je een live uitzendingen met een gebarentolk. Mochten er video’s worden opgenomen zou het de voorkeur hebben om een gebarentolk in beeld te brengen die de boodschap vertaalt. |
| Contact | De mogelijkheid om via tekst of een tolk contact te kunnen leggen | Zorg voor contactformulieren of de mogelijkheid om een tolk aan te vragen in een gesprek. Vermijd telefoongesprek als enige optie. |
Motorisch
Reumaklachten of spierziekten etc.
Gebruikers met een motorische beperking gebruiken het toetsenbord en/of hulpmiddelen om websites te gebruiken. Voor hen is het belangrijk dat navigatie, links en knoppen zonder muis te bedienen zijn.
| Succescriteria | Wat heeft de gebruiker nodig? | Hoe ondersteun je dit? |
|---|---|---|
| Toetsenbord toegankelijkheid | De website moet ook volledig met het toetsenbord te gebruiken zijn.. | Door alle interactie elementen beschikbaar te maken voor toetsenbord gebruik. Dit doe je door juist gebruik van HTML. |
| Focus zichtbaarheid | Omdat iemand die motorisch beperkt is vaker via het toetsenbord (tab-toets) door een website scrollt is het belangrijk dat je kunt zien waar de focus waar de gebruiker op het moment is zichtbaar is. | Geef altijd een visuele focus aanduiding op het geselecteerde interactie element zodat de gebruiker weet waar hij of zij op de pagina is.Dit kan door bv een kader om het menu item of een onderstreping. |
| Label in naam |
Voor elementen waar tekst in voorkomt (denk bv aan een ‘verstuur’-knop) is het belangrijk dat de naam in de code hetzelfde is als de naam op het scherm om verwarring te voorkomen |
|
|
Timing aanpasbaar |
Mensen met een beperking hebben soms meer tijd nodig om door een pagina te navigeren. |
Op sommige websites en/of pagina’s (zoals formulieren) zit vanwege de veiligheid een tijdsbegrenzing om deze in te vullen of om ingelogd te blijven. Het is belangrijk dat deze tijd verlengd kan worden. |
| Auto complete attributen | Het helpt gebruikers als formulieren automatisch ingevuld worden. | Biedt de gebruiker aan om de formulier automatisch in te laten vullen met opgeslagen gegevens om de benodigde handelingen te minimaliseren. |
Cognitief
Autisme, ADHD en andere aandacht/concentratiestoornissen.
Gebruikers met een vorm van deze beperking hebben behoeften aan eenduidigheid en weinig prikkels.
| Succescriteria | Wat heeft de gebruiker nodig? | Hoe ondersteun je dit? |
|---|---|---|
| Geen tijdsdruk | Voldoende tijd om de content te lezen. | Bewegende, knipperende of actualiserende content kan gepauzeerd worden. |
| Focus zichtbaarheid | Omdat iemand die motorisch beperkt is vaker via het toetsenbord (tab-toets) door een website scrollt is het belangrijk dat je kunt zien waar de focus waar de gebruiker op het moment is zichtbaar is. | Geef altijd een visuele focus aanduiding op het geselecteerde interactie element zodat de gebruiker weet waar hij of zij op de pagina is.Dit kan door bv een kader om het menu item of een onderstreping. |
| Label in naam |
Voor elementen waar tekst in voorkomt (denk bv aan een ‘verstuur’-knop) is het belangrijk dat de naam in de code hetzelfde is als de naam op het scherm om verwarring te voorkomen |
|
|
Pauzeren, stoppen, verbergen |
Bewegende, knipperende, scrollende of automatisch actualiserende content zoals sliders kunnen bezoekers afleiden bij het gebruik van de rest van de pagina. |
Bewegende, knipperende of actualiserende content kan gepauzeerd worden. |
|
Timing aanpasbaar |
Mensen met een cognitieve beperking hebben soms meer tijd nodig om door een pagina te navigeren of een formulier in te vullen. . |
Op sommige websites en/of pagina’s (zoals formulieren) zit vanwege de veiligheid een tijdsbegrenzing om deze in te vullen of om ingelogd te blijven. Het is belangrijk dat deze tijd verlengd kan worden. |
|
Consistente navigatie en identificatie |
Een vaste structuur en herkenning is heel belangrijk om niet zoek te raken op een website. | Een heldere structuur en consistente lay-out en navigatie. Voorkom complexe en drukke vormgeving. |
| Goede contrastverhouding | Teveel of felle kleuren kunnen te veel afleiden en storend werken. Goed contrast helpt de zicht- en leesbaar. | Rustige en eenvoudige kleurgebruik in plaats van felle kleuren met weinig contrast. |
Dyslexie en laaggeletterdheid
| Succescriteria | Wat heeft de gebruiker nodig? | Hoe ondersteun je dit? |
|---|---|---|
| Geen tijdsdruk | Voldoende tijd om de content te lezen. | Bewegende, knipperende of actualiserende content kan gepauzeerd worden. |
|
Pauzeren, stoppen, verbergen |
Bewegende, knipperende, scrollende of automatisch actualiserende content zoals sliders kunnen bezoekers afleiden bij het gebruik van de rest van de pagina. |
Bewegende, knipperende of actualiserende content kan gepauzeerd worden. |
|
Timing aanpasbaar |
Mensen met een cognitieve beperking hebben soms meer tijd nodig om door een pagina te navigeren of een formulier in te vullen. . |
Op sommige websites en/of pagina’s (zoals formulieren) zit vanwege de veiligheid een tijdsbegrenzing om deze in te vullen of om ingelogd te blijven. Het is belangrijk dat deze tijd verlengd kan worden. |
|
Consistente navigatie en identificatie |
Een vaste structuur en herkenning is heel belangrijk om niet zoek te raken op een website. | Een heldere structuur en consistente lay-out en navigatie. Voorkom complexe en drukke vormgeving. |
| Goede contrastverhouding | Teveel of felle kleuren kunnen te veel afleiden en storend werken. Goed contrast helpt de zicht- en leesbaar. | Rustige en eenvoudige kleurgebruik in plaats van felle kleuren met weinig contrast. |
| Geen succescriteria wel wenselijk | ||
| Alternatieve informatie | Grote stukken tekst kunnen moeilijk of langzaam te lezen zijn. | Biedt de gebruiker aan om grote stukken tekst te kunnen beluisteren |
| Tesktopmaak | Teksten zijn lastig leesbaar. | Zorg voor links uitgelijnde en een consistente opmaak. Vermijd onnodige onderstreping, cursieve tekst of hoofdletters. |
Epilepsie
Voor gebruikers met epilepsie is het belangrijk dat content niet resulteert in een epileptische aanval.
| Succescriteria | Wat heeft de gebruiker nodig? | Hoe ondersteun je dit? |
|---|---|---|
|
Toevallen en fysieke reacties |
Mensen kunnen een epileptische aanval krijgen van lichtflitsen. |
Zorg dat webpagina’s niets bevatten wat meer dan drie keer in een seconde flitst.. |