Kohteen koko (minimi)

Mitä vaaditaan

Jokaisen sivun vuorovaikutteisen ohjausobjektin on täytettävä osumaalue, joka on vähintään 24 × 24 CSS-pikseliä — tai sen ympärillä on oltava riittävästi tyhjää tilaa niin, että kohteen keskipisteeseen sijoitettu 24 × 24 pikselin ympyrä ei leikkaa muita kohteita. Tarkoituksena on estää käyttäjiä, joilla on rajoittunut hienomotoriikka, vapina tai kosketusnäyttö liikkeessä, osumasta väärään kohteeseen ja käynnistämästä väärää toimintoa.

WCAG 2.2 asettaa minimiarvoksi 24 × 24 pikselin; olemassa oleva AAA-tason 2.5.5 pitää kunnianhimoisemman 44 × 44 pikselin kohteen.

Kuinka täyttää vaatimus

• Aseta min-width / min-height 24 pikseliin vain ikoneista koostuville painikkeille, sulkupainikkkeille ja kaikille napautuskohteille, jotka ovat pienempiä kuin tyypillinen painike.
• Kappaleiden sisäisille linkeille olet vapautettu — onnistumiskriteeri sallii nimenomaisesti kohteet „lauseen sisällä“.
• Ikoniriveille (työkalupalkin painikkeet, taulukon rivikohtaiset toiminnot) käytetään täytettä laajentamaan osumaalue 24 × 24 pikseliin, vaikka ikonin koko olisi pienempi.
• Ohjausobjekteille, joiden on visuaalisesti pysyttävä pieninä (pieni „x“ chipissä), lisätään marginaali/tilaväli, jotta vierekkäiset kohteet ovat vähintään 24 pikseliä etäällä keskipisteestä keskipisteeseen.
• Auditoi ensin sivutus, murupolut, taulukon rivikohtaiset toiminnot ja työkalupalkin kuvakkeet — nämä ovat virheytyvien paikka.

Yleisiä virheitä

• 16 × 16 pikselin ikonipainikkeet (sulje, muokkaa, poista) ilman täytettä, erityisesti taulukoissa ja työkalupalkeissa.
• Tiiviit sivutusrivit, joissa Edellinen / 1 / 2 / 3 / Seuraava on 18 pikselin laatikoissa kiinni toisiinsa.
• Mukautetut valintaruudut / valintapainikkeet, jotka on tyylitelty alkuperäistä ohjausobjektia pienemmiksi „minimalistisista“ syistä.
• Kelluvat toimintopainikkeet mobiilissa, jotka ylittävät 24 × 24 pikselin mutta ovat liian lähellä muita napautuskohteita.
• Tunnisteen poisto-„ד-painikkeet, joiden koko on 10–14 pikseliä — erittäin yleisiä chip-pohjaisissa suodatinkäyttöliittymissä.

Tunnettuja poikkeuksia

Onnistumiskriteerillä on viisi poikkeusta: vastaava (samalla sivulla on suurempi kohde, joka tekee saman asian), tekstin sisäinen (lauseen sisällä), käyttäjäagentin ohjausobjekti (selaimen oletus, esim. natiivi <select>), välttämätön (pieni koko on pakollinen tiedon välittämiseksi, esim. karttapin) ja vaatimustenmukainen (yleisempi sääntö pakottaa koon — harvinainen).

Miksi tämä on tärkeää

Kohteiden kokovirheet esiintyvät suhteettomasti mobiilitestauksessa ja käyttäjillä, joilla on Parkinsonin tauti, essentiaalinen vapina, multippeliskleroosi tai joilla on kosketusnäyttö yhdessä kädessä junassa. Muutos „ei minimiä“ WCAG 2.1:ssä 24 × 24 pikselin alarajaan 2.2:ssa yllätti useimmat tuotantosivustot — odota tämän olevan eniten siteerattu uusi onnistumiskriteeri vuoden 2026 auditoinneissa.