Nieuw in WCAG 2.1

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.

Daarnaast verbeteren deze richtlijnen voor toegankelijkheid ook de gebruikservaring voor mensen met een cognitieve, taal- of leerbeperking en voor mensen met verminderd 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.

Met WCAG 2.1 is ook een nieuwe richtlijn ontstaan. Richtlijn 2.5 richt zich op het bedienen van functionaliteit via andere invoermethoden dan het toetsenbord.

Met de invoering WCAG 2.1 zijn ook 11 nieuwe begrippen geïntroduceerd.

Let op: WCAG 2.1 is vanaf 23 december 2018 verplicht.

Nieuwe succescriteria

De volgende succescriteria zijn nieuw in WCAG 2.1:

1.3.4 Orientation (AA)
1.3.5 Identify Input Purpose (AA)
1.3.6 Identify Purpose (AAA)
1.4.10 Reflow (AA)
1.4.11 Non-Text Contrast (AA)
1.4.12 Text Spacing (AA)
1.4.13 Content on Hover or Focus (AA)
2.1.4 Character Key Shortcuts (A)
2.2.6 Timeouts (AAA)
2.3.3 Animation from Interactions (AAA)
2.5.1 Pointer Gestures (A)
2.5.2 Pointer Cancellation (A)
2.5.3 Label in Name (A)
2.5.4 Motion Actuation (A)
2.5.5 Target size (AAA)
2.5.6 Concurrent Input Mechanisms (AAA)
4.1.3 Status Messages (AA)

1.3.4 Orientation (AA)

De meeste apparaten hebben de optie om de schermoriëntatie te vergrendelen op portret- of landschapmodus. Apps en websites moeten deze instelling respecteren en in de gekozen oriëntatie weergeven.

Een responsive ontworpen app of website zal aan deze succescriteria voldoen.

1.3.5 Identify Input Purpose (AA)

De meeste browsers kunnen goed gelabelde invoervelden herkennen. Als de gebruiker de browser toestaat om persoonlijke informatie automatisch in te vullen, zal de browser hiervoor suggesties geven. Dit maakt het invoeren van gegevens sneller en nauwkeuriger.

Gebruik daarom een autocomplete op invoervelden die persoonlijke gegevens verzamelen. Gebruik de lijst van suggesties (externe link) van het W3C.

1.4.10 Reflow (AA)

Veel websites gebruiken een responsive design om de weergave van de website aan te passen aan de grootte van het scherm. De minimale eisen aan de afmeting die worden gesteld zijn 320 pixels breed bij 256 pixels hoog. 

320 pixels breed bij 256 pixels hoog komt overeen met een standaardresolutie van 1280 pixels bij 1024 pixels bij 400% zoom.

1.4.11 Non-Text Contrast (AA)

Dit nieuwe succescriterium breidt de richtlijn voor kleurcontrast (1.4.3 Contrast (minimum)) verder uit. Voor iconen, buttons én de verschillende statussen van deze elementen wordt een contrastverhouding van 3:1 verwacht.

Gebruik daarom voldoende kleurcontrast op alle interface-elementen.

1.4.12 Text spacing (AA)

Mensen met een laag gezichtsvermogen gebruiken in de browser vaak een groter standaardlettertype om het leesbaarder te maken. Ook andere elementen kunnen worden aangepast om de leesbaarheid te beïnvloeden. Denk hierbij aan:

  • regelafstand;
  • afstand tot de volgende alinea;
  • letterafstand;
  • en woordafstand.

Er mag door deze wijzigingen geen content verloren gaan. Hou hiermee rekening tijdens het ontwerp en ontwikkelproces. Gebruik een responsive design en vermijd elementen met een vaste hoogte of breedte. 

1.4.13 Content on Hover or Focus (AA)

Tooltips, drop-down menu’s en popups worden meestal zichtbaar gemaakt als de muisaanwijzer op een knop of link wordt geplaatst (of wanneer het focus krijgt). Deze dynamische content moet zichtbaar blijven totdat:

  • de gebruiker het actief sluit;
  • de gebruiker de muisaanwijzer zelf van het item af beweegt;
  • of als de content geen belangrijke informatie meer bevat.

2.1.4 Character Key Shortcuts (A)

Met sneltoetsen kunnen gebruikers met een toetsenbord snel een opdracht uitvoeren. Deze sneltoetsen kunnen problemen veroorzaken voor gebruikers van spraakinvoer. Ook kunnen mensen met motorische problemen deze sneltoetsen per ongeluk activeren.

Bied daarom een manier om sneltoetsen uit te schakelen en opnieuw toe te wijzen aan een andere toets of toetscombinatie.

2.5.1 Pointer Gestures (A)

Met het swipen over, en tappen op, een touchscreen kan worden genavigeerd op een smartphone of tablet. Alle handelingen moeten te uit te voeren zijn met slechts één gebaar. Gebaren die twee vingers of ingewikkelde bewegingen nodig hebben, kunnen moeilijk te bedienen zijn.

Als er toch multi-touch gebaren worden gebruikt, zorg er dan voor dat er ook een eenvoudige interface beschikbaar is.

2.5.2 Pointer Cancellation (A)

Links en buttons werken met een up- en down-event. Om er voor te zorgen dat per ongeluk op een verkeerde button of link wordt geklikt of getapt geldt ten minste één van de volgende punten:

  • Er gebeurt niks bij het down-event van een klik of tap;
  • Voordat een up-event plaats vindt kan de gebruiker controleren of de aanwijzer of vinger op de juiste locatie is;
  • Het up-event is ongedaan te maken als de aanwijzer van de link of button wordt verwijderd.

2.5.3 Label in Name (A)

De tekst die wordt weergegeven op component van de gebruikersinterface, zoals een knop, moet kunnen worden gelezen door schermlezers en worden geactiveerd door spraakcommando’s voor gebruikers die spraakherkenningssoftware gebruiken.

Gebruik ARIA-labels om screenreaders het label correct voor te laten lezen.

In ontwikkeling.

2.5.4 Motion Actuation (A)

Met het schudden of kantelen van een smartphone of tablet kan soms een actie worden uitgevoerd. Dit kan moeilijk zijn voor mensen met een motorische beperking. Ook kunnen mensen met motorische problemen deze beweging per ongeluk activeren.

Bied daarom een manier om apparaatbewegingen voor het uitvoeren van een actie uit te schakelen. Zorg ook voor een manier om de actie uit te voeren die geen beweging nodig heeft.

4.1.3 Status Messages (AA)

Een statusbericht geeft informatie aan de gebruiker over:

  • het succes of de resultaten van een actie;
  • over de wachttoestand van een applicatie (icoon);
  • over de voortgang van een proces (balk);
  • of over het bestaan van fouten.

Het succescriterium 4.1.3 Status Messages is een uitbreiding op succescriterium 4.1.2 Naam, rol en waarde.

Zorg dat statusberichten ook beschikbaar zijn voor mensen die gebruik maken van ondersteunende technologieën.