Succescriterium 2.5.8 Grootte van het aanwijsgebied (minimum)
De grootte van het aanwijsgebied voor aanwijzerinvoer is ten minste 24 bij 24 CSS pixels, behalve in de volgende gevallen:
- Afstand: Te kleine aanwijsgebieden (minder dan 24 bij 24 CSS-pixels) zijn gepositioneerd zodat als een cirkel met een diameter van 24 CSS-pixels wordt gecentreerd op het begrenzingskader van elk aanwijsgebied, de cirkels geen ander aanwijsgebied of de cirkel voor een ander te klein aanwijsgebied overlappen;
- Gelijkwaardig: De functie kan worden bereikt via een ander bedieningselement op dezelfde pagina dat aan dit criterium voldoet;
- Inline: Het aanwijsgebied bevindt zich in een zin of de grootte ervan wordt op een andere manier beperkt door de regelhoogte van tekst die geen deel uitmaakt van het aanwijsgebied;
- Bepaald door user agent: De grootte van het aanwijsgebied wordt bepaald door de user agent en is niet aangepast door de auteur;
- Essentieel: Een specifieke weergave van het aanwijsgebied is essentieel of is wettelijk vereist voor de betreffende informatie.
Noot 1Aanwijsgebieden waarmee waarden ruimtelijk kunnen worden geselecteerd op basis van de positie binnen het gebied, worden beschouwd als 1 aanwijsgebied voor het succescriterium. Voorbeelden zijn schuifregelaars, kleurenkiezers die een kleurverloop weergeven, of bewerkbare gebieden waar je de cursor in kunt positioneren.
Noot 2Voor inline aanwijsgebieden moet de regelhoogte worden geïnterpreteerd als zijnde loodrecht op de tekstrichting. Bijvoorbeeld, bij een taal die verticaal wordt weergegeven, zou de regelhoogte horizontaal zijn.
Grootte van het aanwijsgebied (minimum) begrijpen (Engelstalig)
Het aanwijsgebied van een bedieningselement moet groot genoeg zijn. Het aanwijsgebied is het deel van het scherm waarop je kunt klikken of tikken, zoals een knop of een link.
Mensen die een fysieke of motorische beperking hebben, kunnen kleine bedieningselementen niet altijd precies aanwijzen met een muis of vinger. Bijvoorbeeld door trillende handen, of omdat ze een aangepast invoerapparaat gebruiken. Staan 2 kleine bedieningselementen dicht bij elkaar? Dan klikken of tappen ze makkelijk op het verkeerde element.
Zorg daarom dat het aanwijsgebied minimaal 24 bij 24 pixels is. Als dat niet lukt, zorg dan voor voldoende ruimte rondom zodat gebruikers niet per ongeluk iets anders aanklikken.
Een gebied van 24 bij 24 pixels is zo groot:
Uitzonderingen zijn:
- elementen die in een lopende tekst staan
- elementen waarbij de grootte van het aanwijsgebied wordt bepaald door de user agent en niet wordt aangepast door de auteur
- elementen waarvan een specifiek aanwijsgebied essentieel is (of wettelijk vereist)
Hoe pas je dit toe?
- Zorg dat het aanwijsgebied van een bedieningselement minimaal 24 bij 24 pixels is.
- Lukt dat niet? Zorg dan voor voldoende afstand tot andere klikbare elementen. Centreer een denkbeeldige cirkel van 24 pixels diameter op het element. Deze cirkel mag geen ander klikbaar element raken.
- Lukt geen van beide? Zorg dan voor een gelijkwaardig bedieningselement op dezelfde pagina dat wel minimaal 24 bij 24 pixels is.
Aanwijsgebieden
Bedieningselementen en hun aanwijsgebied
Wat telt als aanwijsgebied en waar moet je op letten bij het meten?
| Element | Wat telt als aanwijsgebied |
|---|---|
| Knop | De volledige knop: inhoud, padding en border |
| Link | De volledige link: inhoud, padding en border |
| Selectievakje | Het vakje (+ label indien gekoppeld) |
| Keuzerondje | De cirkel (+ label indien gekoppeld) |
| Invoerveld | Het veld (+ label indien gekoppeld) |
| Keuzelijst | De keuzelijst (+ label indien gekoppeld) |
| Schuifregelaar | De volledige schuifregelaar (balk én handvat samen) |
Voor wie is dit belangrijk?
- Mensen die een fysieke of motorische beperking hebben.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Viewport ingesteld op 1280px bij 1024px
Uitzonderingen
Uitzonderingen zijn:
- aanwijsgebieden die in een lopende tekst staan of waarvan de grootte wordt bepaald door de regelhoogte van de tekst
- aanwijsgebieden waarvan de grootte wordt bepaald door de browser en niet wordt aangepast door de auteur
- aanwijsgebieden waarvan een specifieke weergave essentieel is of wettelijk verplicht is
Testprocedure
Test 1: Aanwijsgebieden
- Open de te testen webpagina
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Verken de pagina met muis en toetsenbord
- Open alle submenu’s, uitklapbare onderdelen, keuzelijsten en dialoogvensters
- Bepaal welke bedieningselementen er zijn:
- Links
- Knoppen
- Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars)
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- Maatwerk bedieningselementen
- Meet het aanwijsgebied van elk bedieningselement:
- Open de ontwikkelaarstools:
- Klik met rechtermuisknop op de link en kies Inspecteren of Inspecteer Element
- Bekijk in het paneel Indeling (Firefox) of Berekend (Chrome):
width(breedte)height(hoogte)padding(alle kanten)border(alle kanten)
- Gebruik als alternatief Command + Shift + C (macOS) of Control + Shift + C (Windows) en beweeg de muis over de bedieningselementen
- Open de ontwikkelaarstools:
- Controleer voor elk bedieningselement:
- Of er een vierkant van 24px bij 24px in het aanwijsgebied past
- Teken voor elk te klein aanwijsgebied een denkbeeldige cirkel met een diameter van 24px, met het middelpunt in het midden van het aanwijsgebied
- Controleer voor elk te klein aanwijsgebied:
- Of de cirkel geen ander aanwijsgebied raakt
- Of de cirkel geen cirkel van een ander te klein aanwijsgebied raakt
- Controleer voor elk aanwijsgebied dat niet slaagt bij stap 4 of 6:
- Of er op dezelfde pagina een ander bedieningselement met dezelfde functie is dat wel slaagt bij stap 4 of 6
- Herhaal stap 3 tot en met 7 in een andere browser
Belangrijk om te weten
- Width, height, padding en border tellen allemaal mee voor de grootte van het aanwijsgebied, ook als ze niet zichtbaar zijn.
- Je moet een vierkant van 24×24 pixels in het element kunnen tekenen. Let op bij afgeronde elementen.
- Enter is geen alternatief. De uitzondering voor een equivalent vraagt om een ánder bedieningselement op de pagina dat wél groot genoeg is.
Beoordeling
- Voor elk aanwijsgebied moet minstens één van de volgende zaken gelden:
- Er past een vierkant van 24px bij 24px in het aanwijsgebied
- Een cirkel met een diameter van 24px rond het middelpunt van het aanwijsgebied raakt geen ander aanwijsgebied en geen cirkel van een ander te klein aanwijsgebied
- Er is op dezelfde pagina een ander bedieningselement met dezelfde functie dat aan een van de twee zaken hierboven voldoet