Campus Design System

Appearance

2.5.8 Doelgrootte (Minimaal) niveau AA ​

Uitleg ​

Het WCAG-criterium 2.5.8 Doelgrootte (Minimaal) stelt dat de grootte van een klikbaar doelgebied (bijvoorbeeld een knop, link of ander interactief element) ten minste 24 bij 24 CSS-pixels moet zijn. Dit helpt ervoor te zorgen dat gebruikers, vooral die met motorische beperkingen of beperkte precisie, interactie kunnen hebben met de interface zonder per ongeluk op andere elementen te klikken of aanraken.

Er zijn echter uitzonderingen op deze regel. Het doel van dit criterium is om ervoor te zorgen dat de interactie met de elementen gemakkelijk en effectief is, vooral voor mensen die afhankelijk zijn van een muis, touchscreen of andere invoerapparaten.

Wat betekent dit in de praktijk? ​

In de praktijk betekent dit dat interactief inhoud, zoals knoppen en links, een minimale grootte van 24x24 pixels moet hebben. Als dit niet mogelijk is, moeten er alternatieven worden geboden of moet de manier waarop deze doelen gepresenteerd worden zo worden aangepast dat de gebruikerservaring toegankelijk blijft.

Uitzonderingen ​

Er zijn enkele gevallen waarin de minimale grootte van 24x24 pixels niet strikt vereist is:

  1. Spacing (afstand): Als het doelgebied kleiner is dan 24x24 pixels, moeten de doelgebieden zo gepositioneerd worden dat als je een cirkel met een diameter van 24 CSS-pixels zou plaatsen op het midden van elk doelgebied, deze cirkels elkaar niet raken. Dit voorkomt dat het moeilijk wordt om de juiste doelgebieden te selecteren.

  2. Equivalent: Als de functie die door het doel wordt uitgevoerd ook via een ander controlemechanisme op dezelfde pagina beschikbaar is dat wel voldoet aan de groottevereiste, wordt dit als een geldige uitzondering beschouwd. Bijvoorbeeld, als een klein doelgebied een actie uitvoert die ook met een grotere knop kan worden uitgevoerd, kan de kleinere knop als een alternatief worden geaccepteerd.

  3. Inline: Als het doelgebied deel uitmaakt van een tekstlijn, bijvoorbeeld een link binnen een zin, kan de grootte worden beperkt door de line-height van de omliggende tekst. In dit geval kan het doelgebied kleiner zijn dan 24x24 pixels zolang het geen negatieve invloed heeft op de bruikbaarheid.

  4. User agent control: Als de grootte van het doelgebied door de browser (user agent) wordt bepaald en de auteur de grootte niet kan wijzigen, geldt deze uitzondering. Dit kan bijvoorbeeld het geval zijn bij systeemgestuurde knoppen of andere besturingselementen die door de browser worden aangestuurd.

  5. Essential: Als de presentatie van het doelgebied essentieel is voor de informatie die wordt overgebracht (bijvoorbeeld voor een logo of een andere visuele presentatie die niet groter kan worden gemaakt zonder de betekenis te veranderen), kan de kleinere grootte gerechtvaardigd zijn.

Voorbeeld van het probleem ​

Stel je voor dat je een link hebt die erg klein is, zoals een tekstlink zonder voldoende ruimte eromheen. Dit zou moeilijk te selecteren zijn voor iemand die een touchscreen gebruikt, of voor iemand die een toetsenbord of muis gebruikt met beperkte precisie.

html
<!-- Onjuiste implementatie -->
<a href="#" style="font-size: 10px; padding: 2px 4px;">Klik hier</a>

In dit voorbeeld is de link te klein en heeft het weinig ruimte rondom de tekst, wat de kans vergroot dat gebruikers per ongeluk ergens anders op klikken.

Oplossing voor dit probleem ​

Zorg ervoor dat de interactieve elementen, zoals knoppen of links, minimaal 24x24 pixels groot zijn. Dit kan eenvoudig worden bereikt door de padding van het element te vergroten, zodat het gemakkelijker wordt om erop te klikken of aan te raken.

html
<!-- Correcte implementatie -->
<a href="#" style="font-size: 16px; padding: 10px 20px;">Klik hier</a>

Deze versie van de link is veel groter en gemakkelijker te gebruiken, zowel met de muis als op een touchscreen.

Testen en hulpmiddelen ​

Het is belangrijk om de grootte van je interactieve elementen te testen met verschillende hulpmiddelen om ervoor te zorgen dat ze toegankelijk zijn voor alle gebruikers.

  • WAVE Accessibility Tool: WAVE kan je helpen te controleren of je interactieve elementen groot genoeg zijn. WAVE Tool.
  • aXe Accessibility Tool: aXe biedt hulpmiddelen om de toegankelijkheid van je site te testen, inclusief de grootte van klikbare doelgebieden. aXe Tool.
  • Chrome DevTools: Gebruik Chrome DevTools om de afmetingen van je doelgebieden te inspecteren en te zorgen dat ze voldoen aan de vereisten van dit criterium.

Voorbeeld van toepassing van de uitzondering (Spacing) ​

Als de doelgebieden kleiner zijn dan 24x24 pixels, kunnen ze zo worden gepositioneerd dat de cirkels met een diameter van 24 pixels niet met elkaar in aanraking komen.

html
<!-- Uitzondering: Doelgebieden met voldoende afstand -->
<div style="display: flex; justify-content: space-between;">
  <button style="font-size: 12px; padding: 5px 10px;">Knop 1</button>
  <button style="font-size: 12px; padding: 5px 10px;">Knop 2</button>
</div>

In dit voorbeeld zijn de knoppen klein, maar de ruimte tussen de knoppen is zo groot dat je met een 24px cirkel geen andere knop raakt, wat voldoet aan de regels voor ruimte tussen kleinere doelgebieden.

Referenties ​