Interaktiivisten komponenttien etäisyys

Silktide mittaa sivujesi painikkeiden, linkkien ja lomakekenttien kokoa ja välistystä. Pieniä, tiiviisti toistensa vieressä olevia hallintaelementtejä on helppo painaa vahingossa, joten jokaisen niistä tulisi olla vähintään 24 × 24 pikseliä tai sen ympärillä tulisi olla riittävästi tyhjää tilaa.

Miksi tämä on tärkeää

Kuka tahansa voi osua ohi pienestä painikkeesta, mutta vapinasta, niveltulehduksesta tai rajoittuneesta hienomotoriikasta kärsiville tiiviisti pakatut hallintaelementit tekevät sivun käytöstä aidosti vaikeaa – saatat napauttaa väärää linkkiä, lähettää väärän lomakkeen tai luovuttaa kokonaan. Ongelma on pahin kosketusnäytöillä, joilla sormenpää on paljon epätarkempi kuin hiiren osoitin.

Tämä on WCAG:n onnistumiskriteeri 2.5.8 (Target Size Minimum), WCAG 2.2:n tason AA vaatimus, joten se kuuluu vaatimustenmukaisuustavoitteeseen, johon useimmat organisaatiot pyrkivät.

Kuinka korjata tämä

1. Tee jokaisesta interaktiivisesta elementistä vähintään 24 × 24 CSS-pikselin kokoinen. min-width- ja min-height-arvojen asettaminen tai täytteen lisääminen riittää yleensä.
2. Vaihtoehtoisesti lisää tilaa hallintaelementtien väliin. Kuvittele jokaisen pienen hallintaelementin keskelle sijoitettu halkaisijaltaan 24 pikselin ympyrä: se ei saa mennä päällekkäin minkään muun hallintaelementin tai toisen pienen hallintaelementin ympärillä olevan ympyrän kanssa. Pienemmät kohteet ovat hyväksyttäviä, kun mikään muu elementti ei ole niin lähellä.
3. Kiinnitä erityistä huomiota kuvakepainikkeisiin, sivutuslinkkeihin ja sosiaalisen median kuvakkeisiin, jotka ovat usein liian pieniä ja tiiviisti ryhmiteltyjä.

/* Ongelma: 16 pikselin kuvakepainikkeet koskettavat toisiaan */
.toolbar button {
  width: 16px;
  height: 16px;
}

/* Korjaus: suurenna napsautettava alue vähintään kokoon 24x24 */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

Miten Silktide testaa tämän

1. Testaa jokaisen sivun sekä mobiili- että työpöytäversio; tulokset voivat poiketa toisistaan.
2. Etsi interaktiiviset elementit: linkit, painikkeet, lomakekentät ja kuvakartta-alueet.
3. Ohita elementit, jotka eivät tavallisesti ole näkyvissä, kuten ruudunlukijoita varten näytön ulkopuolelle sijoitettu sisältö, sekä kaikki elementit, jotka olet sulkenut tarkistuksen ulkopuolelle.
4. Hyväksy kaikki elementit, jotka ovat vähintään 24 pikseliä leveitä ja 24 pikseliä korkeita.
5. Ohita lauseen tai tekstikappaleen sisällä olevat hallintaelementit, jotka WCAG vapauttaa tästä säännöstä.
6. Piirrä jokaisen jäljelle jäävän pienen elementin ympärille WCAG:n kuvailema, sen keskelle sijoitettu halkaisijaltaan 24 pikselin ympyrä.
7. Raportoi elementti, jos sen ympyrä menee päällekkäin toisen hallintaelementin tai toisen pienen hallintaelementin ympärillä olevan ympyrän kanssa, elleivät molemmat ole linkkejä samaan kohteeseen. Sijainnit mitataan lähimpään 0,1 pikseliin, joten 0,2 pikselin tai sitä pienempiä päällekkäisyyksiä ei raportoida. Näyttöön kiinnitettyjä elementtejä, kuten kiinteitä otsakkeita, verrataan muihin kiinnitettyihin elementteihin eikä niiden alla vierivään sisältöön.

Vianmääritys

Pieni hallintaelementti läpäisi tarkistuksen

Pelkkä koko ei aiheuta epäonnistumista: pieni hallintaelementti läpäisee tarkistuksen, jos sen ympärillä on riittävästi tyhjää tilaa, se on tekstin seassa tai sen vieressä on vain samaan paikkaan johtavia linkkejä. Tämä vastaa WCAG:n sallimia poikkeuksia.

Hallintaelementeillä on tilaa puhelimessani

Mobiilitesti käyttää 320 pikseliä leveää puhelinta, joka on kapein leveys, jolla WCAG edellyttää sivun toimivan (katso Miksi Silktide testaa iPhone 5:llä?). Kuvan tai kartan päälle sijoitetut hallintaelementit, kuten pohjapiirroksen merkinnät, siirtyvät yleensä lähemmäs toisiaan sivun kaventuessa. Ne voivat osua yhteen 320 pikselin leveydellä, vaikka leveämmässä puhelimessa niiden ympärille jää tilaa.

Hallintaelementin sijainnilla on merkitystä

WCAG vapauttaa säännöstä hallintaelementin, jonka koko ja sijainti ovat olennaisia sen esittämälle sisällölle, kuten kartan nastat, sekä hallintaelementin, jonka toiminto tarjotaan samalla sivulla myös toisella riittävän suurella hallintaelementillä. Silktide ei voi arvioida kumpaakaan automaattisesti. Jos jompikumpi pätee, kirjaa päätös havainnosta.

Vain osa epäonnistumisista on lueteltu

Silktide raportoi enintään 10 vakavinta esimerkkiä sivua kohden. Jaetun tyylin korjaaminen ratkaisee yleensä monta havaintoa kerralla.

Haluan tiukemman standardin

Tämä tarkistus testaa tason AA vähimmäisvaatimuksen, joka on 24 × 24 pikseliä. Siihen liittyvä Riittävän suuret hallintaelementit -tarkistus testaa tiukempaa tason AAA suositusta, joka on 44 × 44 pikseliä.

Lue lisää

• Understanding Target Size (Minimum) (WCAG 2.5.8)
• Technique C42: Using min-height and min-width to ensure sufficient target spacing
• Riittävän suuret hallintaelementit