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 tikken 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:
- bedieningselementen in een zin, zoals een link in een alinea
- bedieningselementen die de browser zelf tekent en die niet zijn aangepast, zoals de datumkiezer van de browser
- bedieningselementen waarvan de grootte of plek essentieel of wettelijk verplicht is, zoals pinnen op een kaart
Hoe pas je dit toe?
- Zorg dat het aanwijsgebied van een bedieningselement minstens 24 bij 24 pixels is. Het zichtbare icoon mag kleiner zijn. Padding en border tellen ook mee.
- Lukt dat niet? Zorg dan voor genoeg ruimte. Teken een denkbeeldige cirkel met een doorsnede van 24 pixels op het midden van het element. Die cirkel mag geen ander klikbaar element overlappen, en ook niet de cirkel van een ander te klein element.
- Lukt ook dat niet? Zorg dan dat dezelfde functie op dezelfde pagina werkt via een ander bedieningselement dat wel aan deze eis voldoet.
Aanwijsgebieden
Bedieningselementen en hun aanwijsgebied
Wat telt als aanwijsgebied?
| 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 in een zin, of waarvan de grootte wordt beperkt door de regelhoogte van omringende tekst die geen deel uitmaakt van het aanwijsgebied
- 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, tekstgebieden, 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 elementkiezer van de ontwikkelaarstools met Ctrl + Shift + C (Windows) of Command + Shift + C (macOS)
- Beweeg de muis over het bedieningselement en lees de breedte en hoogte af in het label dat verschijnt
- Bekijk bij twijfel het boxmodel in het paneel Indeling (Firefox) of Berekend (Chrome) en tel de inhoud, padding en border bij elkaar op
- 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 begrenzingskader van het aanwijsgebied
- Controleer voor elk te klein aanwijsgebied:
- Of de cirkel geen ander aanwijsgebied overlapt
- Of de cirkel geen cirkel van een ander te klein aanwijsgebied overlapt
- Controleer voor elk te klein aanwijsgebied waarvan de cirkel overlapt:
- Of er op dezelfde pagina een ander bedieningselement met dezelfde functie is waarvan het aanwijsgebied groot genoeg is of genoeg ruimte heeft
- Herhaal stap 3 tot en met 7 in een andere browser
Belangrijk om te weten
- Width, height, padding en border tellen mee voor de grootte van het aanwijsgebied, ook als ze niet zichtbaar zijn. Margin telt niet mee.
- Padding en border mogen niet worden opgeteld bij
widthuit het paneel Berekend. Bijbox-sizing: border-boxzitten ze daar al in. Bij een inline element staat erauto. - Een pseudo-element (
::beforeof::after) kan het aanwijsgebied groter maken. Een element dat erover ligt kan het kleiner maken. Het gebied dat echt op een klik reageert, telt. - Overlappen 2 aanwijsgebieden met een verschillende actie, dan telt het overlappende deel niet mee. Dit staat in de definitie van aanwijsgebied.
- Het vierkant van 24px bij 24px moet recht staan en helemaal binnen het aanwijsgebied passen. Bij afgeronde hoeken past het vaak niet.
- Een cirkel die een ander aanwijsgebied of een andere cirkel precies raakt, slaagt. Alleen overlap is een fout.
- Links in een lijst, kruimelpad of footer staan niet in een zin. De uitzondering Inline geldt daar niet.
- Een sneltoets of Enter telt niet als slaagroute. Daarvoor is een ander bedieningselement op dezelfde pagina nodig.
- Een aanwijsgebied dat tijdelijk is afgedekt door een dialoogvenster, cookiemelding of uitklaplijst, hoeft in die toestand niet te slagen. De bedieningselementen in die content moeten wel slagen.
- Inzoomen is geen oplossing. De grootte in CSS-pixels verandert niet als de pagina wordt vergroot.
Beoordeling
- Voor alle aanwijsgebieden moet minstens één van de volgende zaken gelden:
- Er past een vierkant van 24 bij 24 CSS-pixels in het aanwijsgebied
- Een cirkel met een diameter van 24 CSS-pixels 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