Campus Design System

Appearance

2.5.1 Pointergebaren niveau A ​

Uitleg ​

Het WCAG-criterium 2.5.1 Pointergestures vereist dat webpagina’s en applicaties geen complexe pointergestures vereisen die niet eenvoudig te gebruiken zijn voor mensen met beperkte motorische vaardigheden. Dit criterium richt zich specifiek op de noodzaak om alternatieven te bieden voor bepaalde geavanceerde interacties die gebruikmaken van pointergestures, zoals multi-touchbewegingen of geavanceerde muisbewegingen. Dit geldt voor interacties zoals swipen, knijpen, draaien of andere complexe gebaren die moeilijk kunnen zijn voor mensen die gebruik maken van een muis, trackpad, of aanraakscherm, vooral bij gebruikers met motorische beperkingen.

Wat betekent dit in de praktijk? ​

Het doel van dit criterium is om ervoor te zorgen dat interactieve elementen op een website niet afhankelijk zijn van geavanceerde pointergestures die moeilijk te reproduceren zijn voor mensen met motorische of mobiliteitsbeperkingen. Het zorgt ervoor dat er alternatieven beschikbaar zijn voor gebruikers die geen gebruik kunnen maken van deze geavanceerde gebaren.

Bijvoorbeeld, als een website vereist dat gebruikers een specifieke swipe-beweging maken om een taak te voltooien, zou het nodig zijn om een alternatieve manier van interactie te bieden, zoals een knop om dezelfde actie uit te voeren.

Oplossing voor dit probleem ​

Een website kan voldoen aan dit criterium door ervoor te zorgen dat complexe gebaren niet vereist zijn voor de uitvoering van belangrijke acties. In plaats daarvan kunnen eenvoudigere gebaren of andere invoermethoden (zoals toetsenbordnavigatie, muisinteracties of knoppen) worden gebruikt.

  • Alternatieven voor complexe gebaren: Als je bijvoorbeeld een swipe-beweging gebruikt om tussen pagina’s te navigeren, kun je een knop of navigatielinks aanbieden als alternatief.
  • Gebruik van duidelijke en eenvoudige interacties: Vermijd het gebruik van gebaren die meerdere vingers vereisen of moeilijk te repliceren zijn op kleinere apparaten.
  • Verbeterde toegankelijkheid op touchscreens: Zorg ervoor dat gebruikers met beperkte motorische controle eenvoudig kunnen navigeren zonder complexe gebaren te hoeven maken.

Voorbeeld van het probleem ​

Een mobiel apparaat kan vereisen dat de gebruiker met twee vingers naar buiten schuift (pinch-to-zoom) om de tekst groter te maken of om in te zoomen op een afbeelding. Dit kan moeilijk zijn voor mensen met beperkte fijne motoriek.

html
<!-- Onjuiste implementatie -->
<div id="zoomable-image" style="touch-action: none;">
  <img src="image.jpg" alt="Afbeelding" />
</div>

In dit geval wordt de zoomfunctie alleen ondersteund door een geavanceerd touch-gebaar, wat ongeschikt is voor sommige gebruikers.

Oplossing voor dit probleem ​

In plaats van geavanceerde gebaren, kan een eenvoudigere oplossing worden geboden, zoals een zoomknop of schuifregelaar die eenvoudig kan worden bediend.

html
<!-- Verbeterde implementatie -->
<div id="zoomable-image">
  <img src="image.jpg" alt="Afbeelding" id="zoom-image" />
  <button id="zoom-in">Zoom In</button>
  <button id="zoom-out">Zoom Out</button>
</div>

<script>
  document.getElementById('zoom-in').addEventListener('click', function () {
    let img = document.getElementById('zoom-image');
    img.style.transform = 'scale(1.2)';
  });

  document.getElementById('zoom-out').addEventListener('click', function () {
    let img = document.getElementById('zoom-image');
    img.style.transform = 'scale(1)';
  });
</script>

In dit voorbeeld kunnen gebruikers de zoomfunctie bedienen met knoppen, in plaats van afhankelijk te zijn van complexe gebaren zoals pinchen.

Belangrijke overwegingen ​

  • Complexiteit van gebaren vermijden: Het gebruik van eenvoudige gebaren of toetsenbordnavigatie is essentieel om te voldoen aan de behoeften van gebruikers met beperkte motorische vaardigheden.
  • Alternatieve interactiemethoden aanbieden: Als er meerdere gebaren nodig zijn om een functie te bedienen (bijvoorbeeld het maken van een draaiende beweging om een afbeelding te roteren), moet je altijd alternatieve methoden aanbieden, zoals knoppen of schuifregelaars.
  • Flexibiliteit voor de gebruiker: Waar mogelijk, moeten websites flexibele methoden bieden die de gebruiker de keuze geven hoe ze willen interageren met de interface.

Tools en Hulpmiddelen ​

  • WAVE Accessibility Tool: Deze tool kan helpen bij het detecteren van complexere gebaren en het bieden van alternatieven. WAVE Tool.
  • aXe Accessibility Tool: Deze tool kan helpen bij het controleren van interacties die mogelijk niet toegankelijk zijn voor gebruikers die geen geavanceerde pointergestures kunnen uitvoeren. aXe Tool.

Referenties ​