Bedieningselementen van voldoende grootte

Silktide meet de knoppen, links en formulierelementen op je pagina's en meldt alle elementen die kleiner zijn dan 44 bij 44 pixels. Grotere bedieningselementen zijn voor iedereen gemakkelijker nauwkeurig in te drukken, vooral op aanraakschermen.

Waarom dit belangrijk is

Kleine doelen vereisen een precisie waar veel mensen niet over beschikken. Bezoekers met trillingen, beperkte handvaardigheid of grotere vingers op apparaten met aanraakbediening missen kleine bedieningselementen vaak, activeren het verkeerde element of hebben meerdere pogingen nodig. Ruime doelgroottes maken je site sneller en minder frustrerend voor elke bezoeker, niet alleen voor mensen met motorische beperkingen.

Dit is succescriterium 2.5.5 (Doelgrootte (verbeterd)) van WCAG, een vereiste van niveau AAA. AAA is een ambitieuze standaard: de meeste sites slagen standaard niet voor deze controle, omdat 44 bij 44 pixels groter is dan gebruikelijke links en knoppen. Als je toewerkt naar niveau AA, richt je dan eerst op de gerelateerde controle Afstand tussen interactieve componenten, die de AA-vereiste van 24 bij 24 pixels test.

Zo los je het op

1. Vergroot belangrijke bedieningselementen tot minimaal 44 bij 44 CSS-pixels met min-width, min-height of padding. Geef prioriteit aan primaire acties zoals navigatie, zoeken en formulierknoppen.
2. Als het vergroten van een bedieningselement niet praktisch is, bied dan op dezelfde pagina een gelijkwaardige link of een gelijkwaardig bedieningselement aan dat wel aan de grootte-eis voldoet. Silktide slaat kleine links automatisch over als er een voldoende grote link naar dezelfde bestemming bestaat.
3. Als je hebt besloten dat een bedieningselement acceptabel is zoals het is, bijvoorbeeld omdat het onder een WCAG-uitzondering valt die deze controle niet kan detecteren, kun je de bevinding goedkeuren of het element uitsluiten van de controle.

/* Probleem: een pictogramknop van 30x30 */
.search-button {
  width: 30px;
  height: 30px;
}

/* Oplossing: voldoe aan de aanbeveling van 44x44 */
.search-button {
  min-width: 44px;
  min-height: 44px;
}

Zo test Silktide dit

1. Test zowel de mobiele als de desktopversie van elke pagina; de resultaten kunnen tussen beide verschillen.
2. Zoek de interactieve elementen: links, knoppen, formuliervelden en gebieden van afbeeldingskaarten.
3. Negeer elementen die normaal gesproken niet zichtbaar zijn, zoals inhoud die buiten het scherm is geplaatst voor schermlezers, en alle elementen die je van de controle hebt uitgesloten.
4. Negeer bedieningselementen die direct naast tekst staan, omdat WCAG doelen vrijstelt die in een zin of tekstblok voorkomen.
5. Negeer bij links alle links met een equivalent: een andere zichtbare link op dezelfde pagina die naar dezelfde bestemming verwijst en minimaal 44 bij 44 pixels groot is.
6. Meld elk overgebleven element dat minder dan 44 pixels breed of 44 pixels hoog is. De afmetingen worden vóór vergelijking afgerond op één decimaal, overeenkomstig wat je in de resultaten ziet.

Problemen oplossen

Er worden maar enkele fouten vermeld

Silktide meldt maximaal 100 voorbeelden per pagina. Omdat fouten bij deze controle vaak voorkomen, kan een pagina er meer bevatten; door gedeelde stijlen te herstellen los je veel bevindingen tegelijk op.

WCAG staat uitzonderingen toe die deze controle niet kan zien

WCAG stelt doelen vrij waarvan de grootte essentieel is, die door de browser in plaats van door je stijlen wordt bepaald, of die elders op de pagina door een gelijkwaardig bedieningselement worden gedupliceerd. Silktide detecteert de uitzonderingen voor tekst in de regel en gelijkwaardige links automatisch; voor de andere uitzonderingen is je eigen beoordeling nodig. Keur bevindingen goed die hiervoor in aanmerking komen.

Meer informatie

• Understanding Target Size (Enhanced) (WCAG 2.5.5)
• Afstand tussen interactieve componenten