Onderaan de pagina staan vier iconen naast elkaar: Facebook, Instagram, LinkedIn, YouTube. Elk zo’n 16 pixels groot, met 4 pixels ertussen. Op een laptop met muis is dat geen probleem. Op een telefoon, met een duim die al snel 40 of 50 pixels breed is, raakt u bijna altijd de buurman. Voor iemand met reuma, een tremor of gewoon een hobbelende tram wordt het een gok. Over dat klikgebied van knoppen gaat een van de nieuwe criteria in WCAG 2.2.
De regel: 2.5.8 Doelgrootte (minimum)
WCAG 2.2 werd in oktober 2023 gepubliceerd en voegde succescriterium 2.5.8 toe op niveau AA. De kern: alles waarop u kunt klikken of tikken heeft een doelgebied van minimaal 24 bij 24 CSS-pixels. Een CSS-pixel is de maat waarin ontwerpers en ontwikkelaars werken; op een telefoon met een scherp scherm zijn dat meerdere fysieke pixels, maar het gaat om de maat in de code.
Is een doel kleiner, dan kan het toch voldoen als er genoeg ruimte omheen is. De toets is: teken een cirkel met een diameter van 24 pixels in het midden van elk klein doel. Die cirkels mogen elkaar en andere doelen niet raken. Vier iconen van 16 pixels met 8 pixels ertussen halen dat net, met 4 pixels niet.
Wie meer wil weten over wat er verder nieuw is in deze versie, leest het overzicht van de nieuwe WCAG 2.2-criteria.
De uitzonderingen
De regel heeft een paar uitzonderingen. Ze zijn er om redelijke situaties niet onmogelijk te maken, niet om de regel te omzeilen.
- Gelijkwaardig alternatief. Is dezelfde functie elders op de pagina beschikbaar via een doel dat wel groot genoeg is, dan mag het kleine doel blijven.
- Links in lopende tekst. Een link midden in een zin hoeft niet 24 pixels hoog te zijn. De regelhoogte bepaalt hier de maat.
- Bediening door de browser. Standaard elementen die de browser zelf tekent en die u niet heeft aangepast, vallen erbuiten.
- Noodzakelijk. Als de kleine maat wezenlijk is voor de informatie, zoals pinnetjes op een kaart die precies op een locatie moeten staan.
Waar het in de praktijk misgaat
| Element | Typisch probleem |
|---|---|
| Sociale iconen in de footer | Klein en dicht op elkaar |
| Sluitknop van pop-up of cookiebanner | Een kruisje van 12 tot 16 pixels in de hoek |
| Plus en min bij aantallen in de winkelwagen | Kleine knoppen direct naast het invoerveld |
| Bolletjes onder een slider | Puntjes van 8 pixels met weinig ruimte |
| Kleurstalen bij productvarianten | Kleine vakjes strak tegen elkaar |
| Paginanummers onder een overzicht | Cijfers dicht op elkaar zonder opvulling |
| Info-icoontjes naast velden | Alleen het icoon zelf is klikbaar |
Iconen zonder tekst komen in die lijst vaak terug. Die zijn klein én onduidelijk; meer daarover in iconen die zonder tekst moeten werken.
Het klikgebied van knoppen vergroten zonder het ontwerp te veranderen
Een groter doelgebied betekent niet dat het icoon groter moet. U kunt het klikbare deel om het icoon heen uitbreiden met padding:
.social a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
}
.social svg {
width: 18px;
height: 18px;
}Het icoon blijft 18 pixels, maar de link eromheen is 44 bij 44. Wij nemen in nieuwe ontwerpen meestal 44 pixels als richtmaat. Dat is ruimer dan de AA-eis van 24 pixels en komt overeen met het strengere criterium 2.5.5 op niveau AAA. Voor mensen met motorische beperkingen en voor ouderen maakt dat merkbaar verschil; zie ook een website ontwerpen voor ouderen.
Let op een valkuil: vergroot u alleen het zichtbare vlak met een rand of schaduw, maar blijft de link zelf klein, dan helpt het niets. Het gaat om het element dat reageert op een klik.
Ruimte tussen knoppen die iets anders doen
Extra aandacht verdienen knoppen met tegengestelde gevolgen die naast elkaar staan. “Verwijderen” direct naast “Aantal verhogen”, of “Annuleren” pal tegen “Bevestigen”. Een misser is daar niet alleen vervelend, maar kan een bestelling of formulier ongedaan maken. Geef zulke knoppen meer ruimte dan het minimum, zet ze bij voorkeur niet strak naast elkaar en maak het verschil ook zichtbaar met tekst, niet alleen met een kleur of icoon. Bij een onomkeerbare actie helpt een bevestigingsstap of een “Ongedaan maken”-melding.
Denk ook aan elementen die vlak bij de rand van het scherm staan, zoals een vaste chatknop rechtsonder of een balk met knoppen onderaan. Die liggen dicht bij de systeemgebaren van de telefoon. Een paar pixels extra marge voorkomt dat iemand de app wegveegt in plaats van op de knop tikt.
Zo meet u het zelf
- Open de pagina in Chrome of Firefox en klik met de rechtermuisknop op een icoon. Kies “Inspecteren”.
- Selecteer in de code de link of knop, niet het icoon erin. De browser toont de afmetingen, bijvoorbeeld “a 16 × 16”.
- Is het kleiner dan 24 bij 24? Kijk dan naar de afstand tot het volgende klikbare element.
- Zet de ontwikkelaarshulpmiddelen op een telefoonweergave en tik met uw vinger, of beter: pak uw eigen telefoon en probeer de knoppen zonder in te zoomen.
Sommige automatische tools, zoals de toegankelijkheidscontrole in Lighthouse, signaleren te kleine doelen ook. Ze missen er wel eens een, en geven soms een melding bij een element dat onder een uitzondering valt. Gebruik ze als startpunt.
Een verwant criterium uit WCAG 2.2 gaat over handelingen waarbij iemand moet slepen, zoals een prijsschuif of een kaart. Daarvoor is altijd een alternatief met een enkele klik nodig, zie alternatieven voor sleepbewegingen.
Waarom dit verder gaat dan de regel
De 24-pixelregel is een minimum. Iedereen mist wel eens een knop op een telefoon, en het kost bijna niets om het iets ruimer te maken. Een grotere sluitknop bij een pop-up, iets meer ruimte tussen de plus en min in de winkelwagen, paginanummers met wat opvulling: het zijn kleine aanpassingen in de CSS die bezoekers direct merken.
Meer achtergrond over wat niveau AA verder inhoudt, leest u op de pagina over WCAG niveau AA. En wilt u weten hoe deze regel zich verhoudt tot de rest van de aanpak, dan is onze pagina over toegankelijkheid het startpunt.
Vraag een gratis websitecheck aan. Binnen één werkdag weet u waar uw website staat.
