Het internetgebruik via mobiele apparaten, zoals smartphones en tablets, is inmiddels groter dan via desktop computers. Daarom werd het noodzakelijk dat er ook richtlijnen komen over de toegankelijkheid van informatie via mobiele apparaten. Deze nieuwe richtlijnen zijn gepubliceerd in een nieuwe versie van de richtlijnen voor toegankelijkheid van webcontent: WCAG 2.1.
De nieuwe eisen verbeteren ook de gebruikservaring voor mensen met een cognitieve, taal- of leerbeperking en voor mensen met een beperking aan het zicht.
WCAG 2.1 breidt WCAG 2.0 uit met 17 nieuwe succescriteria:
- 5 op niveau A;
- 7 op niveau AA;
- 5 op niveau AAA.
WCAG 2.1 voegt ook een nieuwe richtlijn toe. Richtlijn 2.5 gaat over het bedienen van een website of app met andere invoermethoden dan het toetsenbord.
Beknopte uitleg van de verplichte succescriteria
In de onderstaande lijst met succescriteria staat mijn interpretatie van de WCAG. Het legt de kern van de nieuwe succescriteria in WCAG 2.1 uit in duidelijke taal.
Succescriterium 1.3.4 Weergavestand
Niveau AA
De meeste mobiele apparaten werken met een portret- en landschapsmodus. Dit succescriterium vraagt dat content mee kan draaien met de weergavestand van het apparaat. Zo kan de content ook goed worden gebruikt als het apparaat wordt gedraaid.
Een responsive ontworpen website of app zal aan deze succescriteria voldoen.
Succescriterium 1.3.5 Identificeer het doel van de input
Niveau AA
Het doel van een invoerveld kan worden vastgelegd in de code. Hierdoor begrijpen browsers welke gegevens er worden gevraagd. Een browser kan het formulier dan al (deels) automatisch invullen.
Gebruik daarom het autocomplete-attribuut op invoervelden die veelgevraagde gegevens verzamelen. Dit geldt voor gegevens zoals naam, e-mailadres en telefoonnummer. Gebruik de lijst van suggesties van het W3C.
Succescriterium 1.4.10 Reflow
Niveau AA
Zorg dat de pagina kan worden herschaald tot een weergavekader van 320 pixels bij 256 pixels zonder dat content of functionaliteit verloren gaat én zonder dat scrollen in twee dimensies voorkomt.
Een responsive ontworpen website of app zal aan deze succescriteria voldoen.
Succescriterium 1.4.11 Contrast van niet-tekstuele content
Niveau AA
Bedieningselementen (zoals links, knoppen en invoervelden), statussen van deze bedieningselementen én belangrijke delen van afbeeldingen moeten ook genoeg contrast hebben.
Zorg dat deze componenten een contrastverhouding van ten minste 3:1 hebben met de aangrenzende kleuren.
Lees meer over contrast van niet-tekstuele content
Succescriterium 1.4.12 Tekstafstand
Niveau AA
Zorg dat de stijleigenschappen van tekst kunnen worden aangepast zonder dat content of functionaliteit verloren gaat. De stijleigenschappen moeten minimaal kunnen worden aangepast naar:
- een regelhoogte (regelafstand) van ten minste 1,5 keer de lettergrootte;
- een afstand tussen alinea’s van ten minste 2 keer de lettergrootte;
- een letterafstand (spatiëren van letters) van ten minste 0,12 keer de lettergrootte;
- een woordafstand van ten minste 0,16 keer de lettergrootte.
Houd hiermee rekening tijdens het ontwerp en de bouw van een website of app. Vermijd componenten met een vaste hoogte of breedte.
Succescriterium 1.4.13 Content bij hover or focus
Niveau AA
Als content (zoals tooltips, drop-down menu’s en popups) zichtbaar wordt bij hover met de muisaanwijzer of bij focus met het toetsenbord, dan moet deze content moet zichtbaar blijven totdat:
- de bezoeker het actief sluit;
- de bezoeker de muisaanwijzer of toetsenbordfocus zelf van het item af beweegt;
- de content geen belangrijke informatie meer bevat.
Houd hiermee rekening tijdens de bouw van een website of app.
Succescriterium 2.1.4 Enkel teken sneltoetsen
Niveau A
Met sneltoetsen kunnen gebruikers met een toetsenbord snel een opdracht uitvoeren. Een sneltoets die bestaat uit een enkel teken kan problemen veroorzaken. Ze kunnen bijvoorbeeld per ongeluk worden geactiveerd of botsen met functionaliteit van hulptechnologieën.
Geef bezoekers de mogelijkheid om sneltoetsen uit te zetten of opnieuw toe te wijzen aan een andere toets of toetscombinatie.
Succescriterium 2.5.1 Aanwijzergebaren
Niveau A
Met het swipen over, en tappen op, een touchscreen kan worden genavigeerd op een smartphone of tablet. Gebaren die twee vingers nodig hebben, of bestaan uit ingewikkelde bewegingen, kunnen moeilijk te bedienen zijn. Zorg daarom dat handelingen zijn uit te voeren met één contactpunt op het scherm of geef ook een alternatieve bediening.
Succescriterium 2.5.2 Aanwijzerannulering
Niveau A
Een klik of tap komt gemakkelijk eens per ongeluk voor. Om dit te voorkomen hoort voor alle functionaliteit die kan worden bediend met één contactpunt op het scherm ten minste één van de volgende punten te gelden:
- Er gebeurt niks bij het down-event van een klik of tap;
- Nog voordat het up-event plaats vindt kan de bezoeker controleren of de aanwijzer of vinger op de juiste plek staat;
- Met het up-event wordt het down-event ongedaan gemaakt.
Succescriterium 2.5.3 Label in naam
Niveau A
Bedieningselementen (zoals links, knoppen en invoervelden) moeten ook bediend kunnen worden met spraakcommando’s van bezoekers die gebruik maken van spraakherkenningsoftware. Zorg daarom dat de zichtbare tekst ook voorkomt in de toegankelijke naam van het bedieningselement.
Succescriterium 2.5.4 Bewegingsactivering
Niveau A
Met het schudden of kantelen van een smartphone of tablet kan soms een actie worden uitgevoerd. Dit kan moeilijk zijn voor bezoekers met een motorische beperking. Maak het daarom mogelijk om bediening door beweging van het apparaat uit te zetten en zorg ook voor een manier om de actie uit te voeren die geen beweging nodig heeft.
Succescriterium 4.1.3 Statusberichten
Niveau AA
Een statusbericht geeft informatie aan de gebruiker over:
- het succes of de resultaten van een actie;
- de wachttoestand van een applicatie;
- de voortgang van een proces;
- het bestaan van fouten.
Zorg dat deze statusberichten ook beschikbaar zijn voor mensen die gebruik maken van technologieën, zoals voorleessoftware of een brailleleesregel. Voeg hiervoor in de code een role=“status” of role=“alert” toe aan het statusbericht.
Bronnen
- WCAG 2.1 (NL)
- WCAG 2.1 (EN) (Engelstalig)
Aanpassingen
Aangepast op 26 mei 2020: Namen overgenomen van de Nederlandse vertaling van WCAG.