Kosketustavoitteen koko

Kosketustavoitteen koko on minkä tahansa napautettavan tai napsautettavan elementin toiminnallinen mitta. WCAG määrittää kaksi kynnysarvoa: AAA-tason vähimmäisvaatimus 44×44 CSS-pikseliä (WCAG 2.1:stä lähtien) ja AA-tason vähimmäisvaatimus 24×24 CSS-pikseliä (uusi WCAG 2.2:ssa). Kriteeri on olemassa, koska motoriset vammat — ja jopa tavallinen epätarkkuus pienellä näytöllä — tekevät pienistä tavoitteista käyttökelvottomia.

Kaksi WCAG-kriteeriä

• 2.5.5 Target Size (Enhanced) — taso AAA — osoitinsyötteen tavoitteiden on oltava vähintään 44×44 CSS-pikseliä. Pitkäaikainen sääntö; vaikea toteuttaa koko sivustolla.
• 2.5.8 Target Size (Minimum) — taso AA, uusi WCAG 2.2:ssa — osoitinsyötteen tavoitteiden on oltava vähintään 24×24 CSS-pikseliä. Käytännön vaatimustenmukaisuuden alaraja.

Tavoite, joka täyttää 44×44 AAA-kynnyksen, täyttää myös 24×24 AA-kynnyksen.

Mitä sääntö käytännössä vaatii

Luvut viittaavat tavoitealueeseen, ei pelkästään näkyvään kuvakkeeseen. Applen Human Interface Guidelines ja Googlen Material Design molemmat oletusarvoisesti käyttävät 44 pt / 48 dp -tavoitekokoja samasta syystä — taustalla on todellista ergonomista dataa.

Yleinen kaava: kuvake-painike, joka on piirretty 16×16 SVG:nä, mutta jossa täyte tuo klikattavan alueen 44×44 kokoon. Tämä täyttää säännön. Näkyvä kuvake on pieni; tavoite on näkyvä kuvake ja sen ympärillä oleva täytealue.

Poikkeukset

2.5.8:ssa (AA-kriteeri) on selkeät poikkeukset:

• Välistykseen perustuva poikkeus. Jos tavoite on vähintään 24×24 tai ympäröity riittävästi tyhjällä, ettei mikään muu tavoite ole 24 CSS-pikselin sisällä, se läpäisee. Tämä suojelee tiheitä sisäkkäisiä asetteluja (kuten tekstilinkkejä leipätekstissä), joissa tavoitealueet ovat pieniä mutta riittävän etäällä toisistaan.
• Vastaava ohjain muualla. Pieni tavoite on hyväksyttävä, jos sama toiminto on käytettävissä toisella suuremmalla ohjaimella samalla sivulla.
• Juoksevaan tekstiin upotetut tavoitteet. Tekstissä olevat linkit ovat vapautettuja — leipätekstiä ei pidä jäsennellä uudelleen 24 pikselin linkkisäännön vuoksi.
• Käyttäjäagentin ohjaamat. Selaimen oletusarvoiset ohjaimet ovat vapautettuja.
• Välttämättömät. Kun koko on välttämätön toiminnolle (esim. CAPTCHA-ruudukko).

Mihin tämä vaikuttaa käytännössä

Kolme yleistä tuotantovirhettä:

• Kuvakevain-navigointipainikkeet kooltaan 28×28. Epäonnistuu 2.5.8-kriteerissä, ellei ympärillä ole riittävästi tyhjää, mitä tiheissä navigaatiopalkeissa harvoin on.
• Tiheästi ryhmitellyt valintaruutulistat. Valintaruudut piirretty 16×16 ilman täytettä, aseteltuina pystysuoraan ilman välejä. Sekä tavoite että välistys ovat alle vaatimuksen.
• Mobiilikarusellin “edellinen/seuraava”-nuolet. Usein piirretty 32 pikselin nuolina 4 pikselin täytteellä. Epäonnistuu 2.5.8-kriteerissä.

Nopein manuaalinen auditointi

Avaa DevTools millä tahansa mobiilia emuloivalla näkymällä. Tarkista jokainen interaktiivinen elementti. Kirjaa ylös rajausruutu. Kaikki alle 24 CSS-pikseliä kummassa tahansa suunnassa, kun vierekkäiset tavoitteet ovat 24 CSS-pikselin sisällä, epäonnistuu 2.5.8-kriteerissä.

Useimmat tiimit ottavat käyttöön tavoitekoon suunnittelutokenin komponenteissaan — jokainen interaktiivinen elementti saa vähintään 44×44 osumisalueen näkyvästä koosta riippumatta. Se on halvin tapa tehdä säännöstä merkityksetön.