Spraakbeperking

Mensen met een spraakbeperking hebben problemen bij het produceren van spraak die herkenbaar is voor anderen of door spraakherkenningssoftware. Het volume of de duidelijkheid van iemands stem kan bijvoorbeeld moeilijk te verstaan zijn.

Mensen met een spraakstoornis hebben te maken met obstakels bij webapplicaties die worden bediend met behulp van spraakcommando’s of andere op spraak gebaseerde diensten. Om van dit soort diensten gebruik te kunnen maken, hebben mensen met een spraakbeperking alternatieve vormen van interactie nodig, zoals een tekstgebaseerde chat om te communiceren met medewerkers van de helpdesk.

Voorbeelden van drempels

  • Webgebaseerde diensten die uitsluitend op interactie met behulp van spraak berusten.
  • Websites die een telefoonnummer aanbieden als de enige manier om met de organisaties te communiceren.

Fysieke beperking

In de categorie fysieke of motorische beperking vallen onder andere mensen met coördinatieproblemen, onvrijwillige bewegingen (spasmen of tremors), verlamming, en mensen met ontbrekende ledematen.

Om gebruik te maken van een computer en het internet, gebruiken mensen met een fysieke of motorische beperking vaak gespecialiseerde hardware en software zoals:

  • spraakherkenning, eyetracking en andere oplossingen voor handsfree interactie;
  • een hoofdaanwijzer, mondstok en andere hulpmiddelen om te helpen bij het typen;
  • een ergonomisch of speciaal ontworpen toetsenbord of muis;
  • een on-screen toetsenbord met trackball, joysticks of andere aanwijsapparaten;
  • schakelaars bediend door middel van voet, schouder, slok en trek, of andere bewegingen.

Mensen met een fysieke of motorische beperking kunnen problemen hebben met het klikken op kleine knoppen en hebben meer kans om fouten te maken bij het typen en klikken.

In Nederland zijn naar schatting van het CBS (externe link) 472.000 mensen met een ernstige motorische beperking.

Voorbeelden van drempels

  • Websites die geen volledige toetsenbordondersteuning bieden.
  • Bedieningselementen die geen gelijkwaardige tekstalternatieven hebben.
  • Inconsistente, onvoorspelbare en ingewikkelde manieren van navigeren.
  • Tijdslimieten op de website voor bijvoorbeeld het invullen van online formulieren.

Cognitieve beperking

Mensen met een cognitieve, leer- en neurologische beperking hebben te maken met een beïnvloedt zenuwstelsel. Dit kan invloed hebben op hoe goed mensen horen, zien, spreken, bewegen of informatie begrijpen. Zij kunnen hierdoor moeite hebben met concentratie, het verwerken van informatie of het begrijpen van lastigere teksten.

Voor het gebruiken van een computer en het internet gebruiken zij verschillende soorten hulpmiddelen, afhankelijk van de specifieke behoeften. Sommige zullen een screenreader gebruiken, terwijl anderen schermvergrotingssoftware gebruiken of inzoomen op de website.

Mensen met een cognitieve beperking hebben baat bij:

  • een gestructureerde pagina dat oriëntatie gemakkelijk maakt;
  • een consistente naamgeving invoervelden en onderdelen op de website;
  • voorspelbare functionaliteit en links;
  • verschillende manieren om door website te navigeren, zoals een menu, een sitemap of zoekmogelijkheid;
  • de mogelijkheid om knipperende, bewegende en afleidende en storende content uit te schakelen.

Voorbeelden van drempels

  • Ingewikkelde navigatie en paginalay-outs.
  • Complexe zinnen en moeilijke woorden.
  • Lange teksten zonder afbeeldingen, grafieken of andere illustraties om de tekst te ondersteunen.
  • Bewegende, knipperende of flikkerende content en achtergrondgeluiden die niet kunnen worden uitgeschakeld.
  • Webbrowsers en mediaspelers die geen mechanismen bieden om animaties en audio te onderdrukken.
  • Visuele opmaak die niet kan worden aangepast met behulp van aangepaste stylesheets.

Formulieren

Een toegankelijk formulier is essentieel voor mensen die gebruik maken van voorleessoftware of enkel het toetsenbord gebruiken. Er moet rekening worden gehouden met:

  • toetsenbordtoegankelijkheid
  • instructies
  • koppelen van label en invoerveld
  • groeperen van velden
  • foutmeldingen

Het toegankelijk maken van formulieren is niet ingewikkeld.

Toetsenbordtoegankelijk

Als een formulier niet toetsenbordtoegankelijk is, dan is deze doorgaans volledig ontoegankelijk voor gebruikers van screenreaders.

Zorg ervoor dat alle functionaliteit te bedienen is met het toetsenbord. Zorg daarnaast voor een logische tabvolgorde en zichtbare focus.

Instructies

Voor het gebruiken van een formulier zijn duidelijke instructies nodig. Bijvoorbeeld het aangeven van verplichte velden of een verplicht invoerformaat.

Het aangeven van een verplichte veld kan bijvoorbeeld met een asteriks (*) of in tekst. Er moet voorafgaand aan het eerste invoerveld worden gecommuniceerd op welke manier de verplichte velden zijn aangegeven.

Net als de verplichte velden, kunnen er ook verplichte invoerformaten zijn. Denk hierbij aan een postcode of een e-mailadres dat moet worden ingevuld. Ook hierbij is het belangrijk om voor het invoerveld duidelijk te maken wat de eisen zijn aan de invoer.

Invoervelden en labels

Invoervelden omvatten tekstvelden, checkboxen, radiobuttons, en alle andere velden die zijn ontworpen voor gebruikersinvoer. Enkele voorbeelden hiervan zijn:

<input type="text">
<input type="checkbox">
<input type="radiobutton">
<input type="password">
<input type="url">
<input type="color">
<input type="date">
<input type="image">

Bij een invoerveld hoort een label. Een label geeft aan welke gegevens er worden verwacht in een invoerveld. Hiervoor wordt het HTML-attribuut <label> gebruikt. Het label en invoerveld worden gekoppeld met een for/id-koppeling:

<label for="veld1">Naam:</label>
<input type="text" id="veld1">
<label for="veld2">Woonplaats:</label>
<input type="text" id="veld2">

Een label wordt naast of boven het betreffende invoerveld geplaatst.

Een placeholder mag niet worden gebruikt ter vervanging van een label. Een placeholder kan wel zeer waardevol zijn voor velden waarvoor gegevens in een specifiek formaat nodig zijn. De placeholder kan dan worden gebruikt om te communiceren welke formaat verwacht wordt.

Groeperen van velden

Heeft het formulier meerdere secties van gerelateerde invoervelden? Gebruik dan fieldset om ze te groeperen, en legend om een label te geven voor wat dit deel van het formulier.

Foutmeldingen

Het belangrijk om een duidelijke foutmelding te geven bij een foutieve invoer.

Testen

  • Controleer of alle invoervelden een bijbehorend label hebben

In ontwikkeling.

Gerelateerde succescriteria

  • 1.3.1 Info en relaties (A)
  • 2.4.6 Koppen en labels (AA)
  • 3.2.1 Wijziging bij focus (A)
  • 3.2.2 Wijziging bij input (A)
  • 3.3.1 Fout identificatie (A)
  • 3.3.2 Labels of instructies (A)
  • 3.3.3 Foutsuggesties (AA)
  • 3.3.4 Foutpreventie (wettelijk, financieel, gegevens) (AA)
  • 3.3.5 Hulp (AAA)
  • 3.3.6 Foutpreventie (AAA)
  • 4.1.2 Naam, rol, waarde (A)

Auditieve beperking

Mensen met een auditieve beperking hebben een gehoor dat in enige mate beperkt is. Hieronder vallen slechthorendheid en doofheid. Dove mensen hebben geen gehoor (meer) in beide oren. Slechthorende mensen hebben verminderd gehoor in één of beide oren.

Hierdoor is informatie die alleen via audio wordt overgebracht niet of beperkt toegankelijk voor mensen met een auditieve beperking, vooral als er achtergrondgeluid aanwezig is.

Mensen met een auditieve beperking maken onder andere gebruik van:

  • een transcript van de aanwezige audio, of een transcript of ondertiteling bij video;
  • een mediaspeler waarbij de tekstgrootte en tekstkleur van ondertiteling kan worden aangepast;
  • de mogelijkheid om het volume van audio te stoppen, pauzeren of aan te passen.

Voor veel mensen met een auditieve beperking is gebarentaal de eerste taal. Een gebarentolk biedt dan een oplossing. Maar er is ook een groep mensen met een auditieve beperking die (nog) geen gebarentaal kan. Deze groep bestaat bijvoorbeeld uit ouderen en mensen die recent doof of slechthorend zijn geworden.

In Nederland zijn naar schatting 1,5 miljoen doven en slechthorenden volgens de Stichting Hoormij (externe link).

Voorbeelden van drempels

  • Audio zonder tekstueel alternatief, of video zonder tekstueel alternatief of ondertiteling.
  • Mediaspelers die geen ondertiteling weergeven en die geen volumeregeling bieden.
  • Mediaspelers die geen opties bieden voor het aanpassen van de tekstgrootte en kleuren van de bijschriften.
  • Web-gebaseerde diensten, waaronder webapplicaties, die alleen afhankelijk zijn van interactie met behulp van spraak.

Visuele beperking

Mensen met een visuele beperking kunnen een website beperkt, of helemaal niet, visueel waarnemen. Denk hierbij aan blindheid of slechtziendheid. Daarnaast hebben sommige moeite, of zijn niet in staat, om bepaalde kleuren te onderscheiden van elkaar. Dit noemen we kleurenblindheid.

Mensen met een visuele beperking gebruiken vaak een aangepaste weergave van websites zij het beter kunnen gebruiken.

Blindheid

Blinde mensen kunnen helemaal geen informatie visueel waarnemen. Zij luisteren doorgaans naar een voorgelezen versie van een website, bijvoorbeeld met een screenreader of een brailleleesregel. Blinde mensen zijn afhankelijk van een toetsenbord voor het bedienen van een website.

Uit cijfers van het Sociaal Cultureel Planbureau (externe link) blijkt dat er in Nederland naar schatting 76.000 blinde mensen zijn.

Slechtziendheid

Slechtziende mensen kunnen informatie maar beperkt waarnemen. Zij gebruiken doorgaans schermvergrotingssoftware of zoomen in op een website. Slechtziende mensen hebben baat bij een een website met een hoog kleurcontrast.

Slechtziendheid komt voor bij ongeveer 222.000 mensen van de Nederlandse bevolking volgens cijfers van het Sociaal Cultureel Planbureau (externe link).

Kleurenblindheid

Kleurenblinde mensen kunnen informatie doorgaans goed waarnemen. Toch heeft deze groep ook last van beperkingen als alleen kleur wordt gebruikt voor het overbrengen van belangrijke informatie.

Ook mensen met kleurenblindheid hebben baat bij een een website met een hoog kleurcontrast.

Kleurenblindheid komt in Nederland voor bij ongeveer 1 op de 12 mannen en bij ongeveer 1 op de 250 vrouwen. (bron: Wikipedia-Kleurenblindheid (externe link)). Dit komt neer op ongeveer 750.000 mensen van de Nederlandse bevolking.

Voorbeelden van drempels

  • Afbeeldingen en bedieningselementen die geen gelijkwaardige tekstalternatieven hebben.
  • Tekst, afbeeldingen en paginalay-outs die niet kunnen worden aangepast of die informatie verliezen bij het aanpassen van het formaat.
  • Ontbrekende visuele en niet-visuele oriëntatielijnen, paginastructuur en andere navigatiehulpmiddelen.
  • Video die geen tekst- of audio-alternatieven of een audiobeschrijvingsspoor heeft.
  • Inconsistente, onvoorspelbare en te ingewikkelde navigatiemechanismen.
  • Tekst en afbeeldingen met onvoldoende contrast tussen voor- en achtergrondkleur.
  • Websites en webbrowsers die het gebruik van aangepaste kleurencombinaties niet ondersteunen.
  • Websites en webbrowsers die geen volledige toetsenbordondersteuning bieden.

Afbeeldingen

Bij gebruik van niet-tekstuele content op een pagina (zoals afbeeldingen, maar ook knoppen en invoervelden) hoort er een tekstueel alternatief worden gegeven.

Afbeeldingen die zijn voorzien van een tekstueel alternatief zijn toegankelijker voor mensen met een visuele beperking. Zij kunnen afbeeldingen niet visueel waarnemen maar door een beschrijving te geven krijgen zij via voorleessoftware of braille-uitvoer toch dezelfde informatie.

Alt-teksten

Een tekstueel alternatief voor afbeeldingen wordt doorgaans gegeven met behulp van het alt-attribuut. De inhoud van het alt-attribuut hangt af van het doel van afbeelding.

<img src="hond.jpg" alt="Hond speelt met een bal">

Alle img-, een area- of een input type=”image”-element moeten worden voorzien van een alt-attribuut.

Informatieve afbeelding

Een informatieve afbeelding is een afbeelding die een informatie overdraagt. Geef een informatieve afbeelding een tekstueel alternatief dat beschrijvend van aard is. De tekst moet verwoorden wat er op de afbeelding te zien is.

Geef afbeeldingen die als link worden gebruikt een alt-tekst die het doel van de link beschrijft.

Decoratieve afbeeldingen

Afbeeldingen zijn decoratief als deze niet noodzakelijk zijn voor het begrijpen van de tekst.

Gebruik voor een afbeelding die alleen ter decoratie wordt geplaatst geen alternatieve tekst. Het alt-attribuut wordt dan wel geplaatst maar het mag geen tekst bevatten.

<img src="horizontale-lijn.jpg" alt="" />

Vaak is het beter om decoratieve afbeeldingen met een stylesheet (CSS) te plaatsen.

Complexe afbeeldingen

Complexe afbeeldingen, zoals bijvoorbeeld een grafiek of infographic, kunnen doorgaans niet beknopt worden beschreven. Beschrijf complexe afbeeldingen in de omringende tekst of op een aparte pagina. Soms is een samenvatting van de grafiek voldoende.

Afbeelding als onderdeel van een link

Als een afbeelding wordt gebruikt naast een link (bijvoorbeeld een icoon om een categorie aan te duiden), dan is dit een decoratieve afbeelding. De alt-tekst zal namelijk gelijk zijn aan de linktekst. Dit wordt dubbel voorgelezen door een screenreader.

<a href="wcag.nl"><img src="logo-wcag.nl" alt="" />WCAG.nl</a>

Afbeeldingen van tekst

Afbeeldingen van tekst zijn voor mensen met een visuele beperking niet voldoende toegankelijk. Gebruik daarom geen afbeeldingen van tekst, tenzij het niet anders kan. In de meeste gevallen kan dezelfde visuele weergave worden bereikt met CSS.

Tekst kan gemakkelijk worden vergroot zonder dat de kwaliteit achteruit gaat.

Flitsen

Felle, flitsende beelden kunnen epileptische aanvallen veroorzaken. Gebruik daarom geen flitsende content.

Testen

  1. Controleer of alle informatieve afbeeldingen zijn voorzien van een gelijkwaardig tekstueel alternatief.
  2. Controleer of alle aanklikbare afbeeldingen zijn voorzien van een tekstueel alternatief dat de bestemming beschrijft.
  3. Controleer of decoratieve afbeeldingen zijn voorzien van een leeg alt-attribuut of zijn plaatst met een stylesheet (CSS).
  4. Controleer of er geen afbeeldingen van tekst zijn gebruikt.
  5. Controleer of er geen flitsende content aanwezig is.

Gerelateerde succescriteria

  • 1.1.1 Niet-tekstuele content (A)
  • 1.4.5 Afbeeldingen van tekst (AA)
  • 1.4.9 Afbeeldingen van tekst (geen uitzondering) (AAA)
  • 2.3.1 Drie flitsen of onder de drempelwaarde (A)

Toetsenbordtoegankelijk

Toetsenbordtoegankelijkheid is essentieel voor de bruikbaarheid van een website. Alle functionaliteit en informatie die toegankelijk is met een muis moet ook toegankelijk zijn met enkel het toetsenbord. Bijvoorbeeld het navigeren op de website of het invullen van een formulier.

Websites die volledig met het toetsenbord te bedienen zijn, zijn toegankelijk voor mensen die geen muis (kunnen) gebruiken. Dat zijn bijvoorbeeld mensen met een visuele of motorische beperking.

Een toetsenbord gebruiker maakt meestal gebruik de tabtoets om te navigeren door alle links, knoppen, invoervelden, en multimedia.

Focus

Als er met het toetsenbord over de pagina wordt genavigeerd dan moet dit visueel zichtbaar zijn. Hierdoor kan men zien waar men zich op de pagina bevindt. Dit wordt de focus of de toetsenbord-focus genoemd.

Een focus-indicator is standaard aanwezig in een webbrowser en wordt standaard weergegeven met een outline. Met CSS kan de standaard outline visueel beter zichtbaar worden gemaakt.

Tabvolgorde

De volgorde waarin onderdelen van de webpagina focus krijgen moet logisch zijn als er met het toetsenbord wordt genavigeerd. Als de visuele volgorde van de onderdelen gelijk is aan de volgorde in de broncode dan is de focusvolgorde vaak ook logisch.

Skiplink

Voor mensen die enkel het toetsenbord gebruiken of die gebruik maken van hulptechnologieën zoals voorleessoftware of braille-uitvoer, is het belangrijk dat zij onderdelen die vaak herhaald worden kunnen overslaan. Denk hierbij aan de navigatiebalk van een website of andere herhalende content. Deze zijn vaak groot waardoor het lang duurt voordat de  

Blokken overslaan kan door middel van zogenaamde ‘skiplinks’. Dit is een link op de pagina die direct leidt naar een anker met de belangrijkste content van de pagina. Een skiplink is vaak alleen zichtbaar op het moment dat de link focus krijgt door er met de tabtoets naar te navigeren.

Testen

  1. Controleer of alle pagina functionaliteit te bedienen is met de toetsen tab, enter, spatie, escape, en de pijltoetsen.
  2. Controleer of de focus van de toetsenbord altijd zichtbaar is.
  3. Controleer of de focus zich in een logische volgorde over de pagina beweegt.
  4. Controleer of de focus niet blijft steken op een item of groep van items.

Gerelateerde succescriteria

  • 1.3.2 Betekenisvolle volgorde (A)
  • 2.1.1 Toetsenbord (A)
  • 2.1.2 Geen toetsenbordval (A)
  • 2.1.3 Toetsenbord (geen uitzondering) (AAA)
  • 2.1.4 (A)
  • 2.4.1 Blokken overslaan (A)
  • 2.4.3 Focus volgorde (A)
  • 2.4.7 Focus zichtbaar (AA)

Vormgeving

Er zijn twee belangrijke aandachtspunten met betrekking tot de toegankelijkheid van kleur en contrast, namelijk kleurcontrast en kleurafhankelijkheid. 

Gebruik van kleur

Kleur is een goede manier voor het overbrengen van informatie maar mensen met een visuele beperking hebben beperkte of zelfs geen toegang tot deze informatie. Denk hierbij aan kleurenblindheid of blindheid.

Zorg er daarom voor dat kleur niet wordt gebruikt als enige visuele manier om informatie over te brengen. Maak ook gebruik van aanvullende manieren zoals het onderstrepen van een linktekst en het markeren van verplichte velden met een asterisk (*).

Contrast

Een goed contrast tussen tekstkleur en achtergrondkleur is belangrijk om content toegankelijk te maken voor mensen met een visuele beperking zoals kleurenblindheid.

WCAG 2.1 vereist op niveau AA een contrastverhouding tussen tekst en achtergrond van ten minste 4,5:1.

De richtlijnen worden soepeler als het gaat om grote of vetgedrukte tekst omdat deze gemakkelijker te lezen zijn. Een lettergrootte van 18pt of groter of 14 dikgedrukt vereist een contrastverhouding van ten minste 3:1.

Er zijn veel tools beschikbaar om de contrastverhouding te controleren:

Testen

  • Controleer of kleur niet als enige visuele manier wordt gebruikt om informatie over te brengen.
  • Controleer met een contrast checker de contrastverhouding tussen test en achtergrond.

Gerelateerde succescriteria

  • 1.4.1 Gebruik van kleur (A)
  • 1.4.3 Contrast (minimum) (AA)
  • 1.4.6 Contrast (versterkt) (AAA)