Målstorlek (förbättrad)
Interaktiva mål bör vara minst 44×44 CSS-pixlar. Det här är AAA-nivåns förbättrade krav på målstorlek; AA-nivåns golv i 2.5.8 är 24×24.
Vad det kräver
Varje interaktivt mål måste ha en träffyta på minst 44×44 CSS-pixlar. Samma undantag som för AA-nivå 2.5.8 gäller: likvärdigt mål tillgängligt, inline-text, user-agent-kontroll, nödvändig och överensstämmande.
44×44 är det mått som Apple, Google och Microsoft konvergerar kring i sina egna designriktlinjer, så att uppfylla det här framgångskriteriet tenderar att harmoniera med plattformens UI-normer snarare än att motarbeta dem.
Hur du uppfyller det
- Sätt
min-width: 44px; min-height: 44pxpå knappar, ikon-only-kontroller, formulärfält och alla tryckmål. - Använd padding inuti små ikonknappar för att öka träffytan till 44×44 även när ikonglyfen är 16–24px.
- Granska sidnumrering, brödsmulor, mobilnavigering, åtgärdsikonerna i tabellrader, chip-ta-bort-knappar och flytande åtgärdsknappar först.
- För kontroller som måste vara visuellt små, se till att det finns 44×44 fritt utrymme runt dem (inga andra mål inom den radien).
Vanliga fel
- 24×24 eller 32×32 ikonknappar i verktygsfält — uppfyller AA men misslyckas på AAA.
- Sidnumreringsrader med 30-pixelboxar.
- Täta tabellradsåtgärder där Redigera / Duplicera / Ta bort sitter axel mot axel.
- Chip-ta-bort-×-knappar stilsatta till 12–20px.
Varför det spelar roll
44×44-golvet är den tröskel vid vilken feltryck sjunker till nära noll för användare med Parkinsons sjukdom, essentiell tremor, MS och andra motoriska tillstånd, och för alla som använder en telefon med en hand i rörelse. AAA-nivåkriterier krävs normalt inte för efterlevnad, men många reglerade sektorer (bank, myndigheter, hälsovård) siktar på AAA i mobil UI specifikt på grund av hur oproportionerligt mobila gränssnitt misslyckas för användare med motoriska funktionsnedsättningar. Om du redan uppfyller 2.5.8 är steget från 24 till 44 vanligtvis en Tailwind-klassändring.