Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung
Toegankelijkheid
Hoe groot moet een knop voor vingers en wankele handen zijn?
Een knop van 20 pixels hoogte raakt een vinger op de telefoon alleen met geluk, een wankele hand met de muis ook niet. Niveau AA (2.5.8, nieuw in WCAG 2.2) vereist 24 × 24 pixels of voldoende afstand. Het AAA-criterium van niveau 2.5,5 vereist 44 × 44 CSS-pixels voor elk doel dat met een pointer wordt bediend. Uitgesloten zijn links in de flow tekst, elementen met een equivalent groter alternatief en elementen waarvan de grootte de browser specificeert.
Wat het criterium vereist
Elk doel getypt of geklikt is ten minste 44 CSS pixels breed en hoog. Dit komt overeen met ongeveer 9 millimeter op een mobiele telefoon, de breedte van een vingertop. Uitzonderingen: links in een zin of paragraaf; doelen waarvoor een gelijkwaardig alternatief bestaat van 44 pixels op dezelfde pagina; doelen waarvan de grootte niet wordt bepaald door de auteur (browsercontrole); en doelen waarvoor de concrete weergave essentieel is, zoals punten op een kaart.
Voor wie dit telt
Mensen met tremor, artritis, spasticiteit of na een beroerte raken geen kleine doelen of raken naast hen. Aan de telefoon heeft dit invloed op iedereen die met zijn duim tikt, op de bus, met een handschoen, met een dikke vinger. De 44 pixels zijn afkomstig van de ontwerprichtlijnen van de grote besturingssystemen en hebben zich bewezen als een limiet waaruit bedrijfsfouten aanzienlijk afnemen. Grotere doelen verminderen ook het foutenpercentage voor iedereen.
Zo gaan we ermee om
Vandaag meet de meetkern elk werkoppervlak in het testgebied Responsive tegen de 24-pixelgrens van niveau AA en specificeert breedte en hoogte voor elke locatie. Dezelfde meting zegt welke gebieden 44 pixels bereiken. Het criterium is automatisch decideerbaar, met uitzondering van de vraag of een alternatief gelijkwaardig is. Het behoort tot de categorie AAA in kennis; Het verslag stelt de normen vast.
Voorbeelden
Knop met 24 pixels
.symbol-knopf { width: 24px; height: 24px; } /* Stufe AA */.symbol-knopf { min-width: 44px; min-height: 44px; } /* Stufe AAA */44 × 44 CSS-pixels per doel, exclusief intervallen. Links in de tekst zijn uitgesloten.
- Voer knoppen, menu-items en pictogram links in met een minimale hoogte en breedte van 44 pixels (min-hoogte, min-breedte) of gelijkwaardige binnenafstand.
- Verhoog het klikgebied van pictogrammen met interne klaring, niet het pictogram zelf.
- Laat links in de stroomtekst zoals ze zijn; ze zijn uitgesloten.
- Controleer regels in tabellen en lijsten met pictogramacties: er zijn kleine doelen meest voorkomende.
