Jos kohde on liian pieni, sitä on vaikea aktivoida. Tällä kriteerillä pyritään varmistamaan, että kohteet ovat riittävän suuria.
Jotkin automaattiset työkalut voivat havaita liian pienet kohteet, mutta voit myös itse tarkistaa ne. Tällä sivulla on nopea CSS-demo asiasta ja siitä, miten voit myös tarkistaa kohteiden koon riittävyyden. Käytännössä voit tarkistaa, onko koko riittävä lisäämällä keskitetyn 24x24 pikselin ympyrän kohteen päälle.
Jokaisessa esimerkissä on kolme samankokoista kohdetta (jotka eivät tässä esimerkissä ole kylläkään oikeita kohteita, vaan div-elementtejä). Kunkin kohteen päällä on 24x24 pikselin ympyrä, joka on keskitetty kohteen päälle.
Ongelmallisessa esimerkissä on 20px:n kokoisia kohteita ilman väliä kohteiden välillä. Kun niiden päälle lisätään 24x24 pikselin kokoinen ympyrä, ympyrät menevät osittain päällekkäin. Mikä tarkoittaa, että kriteeri ei täyty.
Vähimmäiskohdekoko voidaan varmistaa useilla eri tavoilla. Voit käyttää paddingia tai marginaalia. Padding lisää kohdekokoa ja marginaali lisää tilaa kohteen ympärille. Seuraavaksi kaksi esimerkkiä, jotka parantavat ongelmallisen esimerkin tilannetta.
Esimerkki paddingilla:
Ympyrät koskettavat toisiaan, mutta eivät mene päällekkäin. Eli tämä on ok.
Esimerkki marginaalilla:
Kuten padding-esimerkissä, myös tässä ympyrät koskettavat toisiaan, mutta eivät mene päällekkäin. Eli tämäkin on ok.
On hyvä muistaa, että marginaalin lisääminen ei itse asiassa tee itse kohteista suurempia. Niihin ei siis ole paljon helpompi osua. Mutta tila auttaa ihmisiä välttämään vääriin kohteisiin osumista.
On myös suositeltavaa, että kohteiden koot ovat tätä suurempia mobiililaitteissa. Käyttöliittymä- ja saavutettavuusyhteisöt suosittelevat usein 44 tai 48 pikselin vähimmäiskohdekokoa. Ja olen itse sen verran usein tuskastellut erityisesti mobiilissa nappeihin osumista, että voin suositella tätä lämpimästi. Esimerkiksi sosiaalisen median videoissa todella usein on hankalaa osua nappiin, jolla säädetään äänenvoimakkuutta.