WCAG 2.1 samenvatting

Op 5 juni 2018 zijn de Web Content Accessibility Guidelines (WCAG) geüpdated van versie 2.0 naar 2.1. Er komen 17 nieuwe succescriteria bij. We vatten de 12 criteria samen van niveau A en AA.

1.3.4 Weergavestand (AA)

De content beperkt de weergave en bediening niet tot een enkele presentatie-oriëntatie, zoals staand of liggend, tenzij een specifieke presentatie-oriëntatie essentieel is.

Citaat van een gebruiker:

Ik wil dit in landscape mode bekijken, maar mijn mobiel reageert niet wanneer ik het draai.

Verplicht de gebruiker niet om zijn mobiel of tablet in een bepaalde richting (portrait of landscape) te gebruiken. Iemand die zijn toestel bijvoorbeeld op een rolstoel heeft gemonteerd, kan het niet 90 graden draaien.

1.3.5 Identificeer het doel van de input (AA)

Het doel van elk invoerveld waarmee informatie van de gebruiker wordt verzameld, kan door software bepaald worden wanneer:

• Het invoerveld een doel dient dat is geïdentificeerd in de paragraaf Inputdoelen voor Componenten van de Gebruikersinterface; en
• De content wordt geïmplementeerd met behulp van technologieën die ondersteuning bieden bij het identificeren van de verwachte betekenis van formulier-invoergegevens.

Citaat van een gebruiker:

Ik vul mijn persoonlijke gegevens in dit formulier automatisch in via de browser. Snel en zonder fouten.

Geef formuliervelden een autocomplete-atribuut als er een waarde voor bestaat in de HTML5 specificatie onder Autofill. Dit is voorlopig de gemakkelijkste manier om aan dit punt te voldoen.

1.4.10 Reflow (AA)

Content kan zonder verlies van informatie of functionaliteit en zonder te moeten scrollen in twee dimensies, worden weergegeven voor:

• Verticaal scrollbare content met een breedte gelijkwaardig aan 320 CSS-pixels;
• Horizontaal scrollbare content met een hoogte gelijkwaardig aan 256 CSS-pixels;

Met uitzondering van delen van de content die voor het gebruik of de betekenis een tweedimensionale lay-out vereisen.

Citaat van een gebruiker:

Ik kan dit niet lezen. De tekst is veel te klein. Ik wil het vergroten zonder horizontaal te scrollen.

Dit komt neer op responsive webdesign. Alles moet blijven werken en leesbaar zijn zonder horizontaal te scrollen op een breedte van 320 CSS pixels. Makkelijkst te testen door het browservenster in te stellen op 1280 pixels en 400% in te zoomen (cmd of ctrl +).

1.4.11 Contrast van niet-tekstuele content (AA)

De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:

Componenten van de gebruikersinterface: Visuele informatie die vereist is om componenten van de gebruikersinterface en statussen te identificeren, met uitzondering van inactieve componenten of componenten waarvan de weergave van de component wordt bepaald door de user agent en niet wordt aangepast door de auteur;

Grafische objecten: Delen van afbeeldingen die vereist zijn om de content te begrijpen, behalve wanneer een specifieke weergave van afbeeldingen essentieel is voor de informatie die wordt overgebracht.

Citaat van een gebruiker:

De knoppen en icoontjes zijn moeilijk te herkennen. Ik heb meer contrast nodig.

Alle user interface componenten en belangrijke grafische elementen moeten een contrastratio van minimum 3 scoren ten opzichte van de omliggende kleur. Voorbeelden zijn invoervelden, knoppen, iconen en infografieken. Makkelijk te testen met een color contrast tool.

1.4.12 Tekstafstand (AA)

Bij content die wordt geïmplementeerd met opmaaktalen die de volgende stijleigenschappen voor tekst ondersteunen, is er geen sprake van verlies van content of functionaliteit door het instellen van alle volgende, en door het niet wijzigen van andere stijleigenschappen:

• Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;<:li>
• Afstand tussen alinea's naar ten minste 2 keer de lettergrootte;
• Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
• Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

Citaat van een gebruiker:

De tekst staat te dicht bij elkaar. Ik heb meer witruimte nodig om makkelijk te lezen.

De gebruiker moet de ruimte tussen letters, woorden, lijnen en paragrafen kunnen aanpassen. Dit kan bijvoorbeeld via een custom stylesheet of een browserextensie. Er mag geen tekst worden afgesneden of overlappen. Makkelijk te testen via deze bookmarklet van Steve Faulkner.

1.4.13 Content bij hover of focus (AA)

Wanneer aanvullende content zichtbaar wordt en daarna weer verborgen, door het gebruik van hover met de aanwijzer of focus met het toetsenbord, gelden de volgende zaken:

• Sluiten: Er is een mechanisme beschikbaar waarmee de aanvullende content kan worden gesloten zonder de aanwijzer hover of de toetsenbordfocus te verplaatsen, tenzij de aanvullende content een invoerfout communiceert of andere content niet verbergt of vervangt;
• Aanwijsbaar: Wanneer een aanwijzer hover aanvullende content kan activeren, dan kan de aanwijzer over de aanvullende content worden bewogen zonder dat deze verdwijnt;
• Aanhouden: De aanvullende content blijft zichtbaar totdat de oorzaak voor de hover of focus is verwijderd, de gebruiker de content sluit of de informatie niet langer geldig is.

Citaat van een gebruiker:

Ik kan de popup niet lezen. Die verschijnt buiten mijn scherm omdat ik vergroting gebruik en verdwijnt als ik er naartoe ga.

Dit punt geeft de gebruiker controle over de inhoud die bij hover of focus verschijnt. Die inhoud (bijvoorbeeld een tooltip) moet aan drie punten voldoen.

• De tooltip verschijnt bovenop de bestaande inhoud en maakt die onleesbaar. De gebruiker kan escape drukken om de tooltip te verbergen.
• De tooltip verschijnt als de muis boven een icoontje met een vraagteken staat. De tooltip mag niet verdwijnen als je de muis verplaatst van het icoontje naar de inhoud van de tooltip.
• De tooltip mag niet automatisch verdwijnen, tenzij de gebruiker escape drukt of wegnavigeert.

2.1.4 Enkel teken sneltoetsen (A)

Wanneer een sneltoets in content wordt geïmplementeerd door alleen letters (inclusief hoofdletters en kleine letters), leestekens, cijfers of symbolen te gebruiken, geldt ten minste één van de volgende zaken:

• Uitzetten: Er is een mechanisme beschikbaar waarmee de sneltoets kan worden uitgezet;
• Opnieuw toewijzen: Er is een mechanisme beschikbaar om de sneltoets opnieuw toe te wijzen aan één of meerdere niet-afdrukbare tekens (bijv. Ctrl, Alt, enz.);
• Alleen actief bij focus: De sneltoets voor een component van de gebruikersinterface is alleen actief wanneer de betreffende component de focus heeft.

Citaat van een gebruiker:

Als ik spraakcommando's in mijn webmail-applicatie gebruik, springt die onverwacht naar een andere e-mail.

Snelkoppelingen die aan een enkele toets zijn toegekend, zijn alleen nuttig in websites of applicaties die intensief worden gebruikt. Binnen Gmail spring je bijvoorbeeld met 'J' naar het volgende bericht. Wanneer je zulke snelkoppelingen toevoegt, moet de gebruiker ze kunnen uitschakelen, aan een andere toets koppelen of ze mogen enkel actief zijn wanneer de component de focus heeft.

2.5.1 Aanwijzergebaren (A)

Alle functionaliteit waarmee bij de bediening gebruik wordt gemaakt van meerpunts- of padgebaseerde gebaren, kan worden bediend met een enkele aanwijzer zonder een padgebaseerd gebaar, tenzij een meerpunts- of padgebaseerd gebaar essentieel is.

Citaat van een gebruiker:

Ik heb last van trillingen en kan niet swipen op mijn mobiel. Geef me een knop met dezelfde functie.

Niet iedereen kan bewegingen maken die een bepaald pad vereisen (vegen, schudden) of meerdere vingers gebruiken (pinch). Voorzie een andere manier om deze acties uit te voeren, bijvoorbeeld knoppen om in en uit te zoomen op een kaart in plaats van te pinchen.

2.5.2 Aanwijzerannulering (A)

Voor functionaliteit die kan worden bediend met een enkele aanwijzer, geldt ten minste één van de volgende zaken:

• Geen down-event: Het down-event van de aanwijzer wordt niet gebruikt om enig onderdeel van de functie uit te voeren;
• Afbreken of ongedaan maken: De functie wordt voltooid door het up-event en er is een mechanisme beschikbaar om de functie af te breken voordat deze wordt voltooid of om de functie ongedaan te maken als deze is voltooid;
• Up reversal: Met het up-event wordt elk resultaat van het voorgaande down-event ongedaan gemaakt;
• Essentieel: Het voltooien van de functie met het down-event is essentieel.

Citaat van een gebruiker:

Ik heb last van trillingen en activeer vaak de verkeerde knoppen op mobiel.

Je moet tijdens een klik met de muis of via touch de actie kunnen annuleren, bijvoorbeeld door geen actie te koppelen aan het down-event.

2.5.3 Label in Naam (A)

Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.

Citaat van een gebruiker:

Ik kan dit formulier niet verzenden via een spraakcommando. Het heeft een 'verzenden' knop, maar 'Klik op verzenden' werkt niet.

De naam van een component in de code moet overeenkomen met de tekst die de gebruiker ziet, of moet minstens die tekst bevatten. Een knop die bestaat uit een afbeelding "verzenden", moet als alt-tekst ook "verzenden" bevatten. Je mag de naam van een component wel aanvullen, maar niet vervangen. Een link "lees meer" mag eventueel aangevuld worden tot "lees meer over artikel xyz". Je mag die naam echter niet vervangen door een andere tekst. Bijvoorbeeld via aria-label="artikel xyz".

2.5.4 Bewegingsactivering (A)

Functionaliteit die kan worden bediend door de beweging van een apparaat of beweging van een gebruiker, kan ook worden bediend met componenten van de gebruikersinterface. De reactie op de beweging kan worden uitgeschakeld om onbedoelde activering te voorkomen, behalve wanneer:

• Ondersteunde interface: De beweging wordt gebruikt om de functionaliteit te bedienen via een door toegankelijkheid ondersteunde interface;
• Essentieel: De beweging is essentieel voor de functie en wanneer de reactie op de beweging wordt uitgeschakeld, wordt de activiteit ongeldig gemaakt.

Citaat van een gebruiker:

De 'shake to undo' functie is niet nuttig voor mij, want ik bedien mijn tablet met mijn stem. Gelukkig is er ook een 'undo' knop.

Als een toepassing de beweging van het toestel of van de gebruiker detecteert om een functie uit te voeren, dan moet je dezelfde functie ook op een andere manier kunnen uitvoeren. Bijvoorbeeld via een knop. Het moet mogelijk zijn om de detectie van bewegingen stop te zetten.

4.1.3 Statusberichten (AA)

In content die is geïmplementeerd met opmaaktalen kunnen statusberichten door software bepaald worden met behulp van rol (role) of eigenschappen (properties), zodat hulptechnologieën de berichten aan de gebruiker kunnen presenteren zonder dat ze de focus krijgen.

Citaat van een gebruiker:

Ik gebruik een screenreader en probeer dit formulier te versturen. Er gebeurt niets en ik krijg geen foutmelding.

Blinde of slechtziende gebruikers zien enkel het deel van het scherm waar de focus op staat. Als er elders iets verschijnt, gaat dat verloren, behalve als de screenreader de instructie krijgt om het voor te lezen. Als er een belangrijke statusmelding verschijnt op het scherm zonder dat de focus ernaartoe springt, dan moet die bekend gemaakt worden voor assistive technology. Dit gebeurt door middel van juist gebruik van roles en properties (bijvoorbeeld role="alert"). Dit geldt niet voor meldingen die in een dialoogvenster verschijnen waar de focus naartoe springt.