Selkeä kohdistus

Silktide tarkistaa, muuttavatko sivusi hallintaelementit – linkit, painikkeet ja lomakekentät – ulkoasuaan riittävän selvästi, kun ne valitaan näppäimistöllä. Muutoksen pelkkä olemassaolo ei riitä: sen on oltava riittävän suuri ja kontrastiltaan voimakas, jotta se todella näkyy.

Tämä on tiukempi versio tarkistuksesta Näkyvä kohdistus: kyseinen tarkistus selvittää, onko kohdistuksen ilmaisin olemassa, kun taas tämä mittaa, onko ilmaisin riittävän selkeä.

Voit kokeilla sitä itse: lataa sivu ja paina toistuvasti Tab-näppäintä. Jokaisen hallintaelementin, johon siirryt, pitäisi muuttua näkyvästi, esimerkiksi saada selkeä ääriviiva tai kontrastivärinen tausta.

Miksi tämä on tärkeää

Näppäimistöllä liikkuvat ihmiset – mukaan lukien monet motorisia rajoitteita omaavat henkilöt ja kytkinlaitteiden käyttäjät – luottavat siihen, että he näkevät, missä on. Teknisesti olemassa oleva mutta haalea, ohut tai heikkokontrastinen kohdistuksen ilmaisin on yhtä hyödytön kuin ilmaisin, jota ei ole lainkaan: käyttäjä kadottaa paikkansa sivulla eikä voi tietää, minkä hallintaelementin Enter-näppäimen painaminen aktivoi.

Näin korjaat sen

Yksinkertaisin luotettava korjaus on kohdistetun hallintaelementin ympärillä oleva yhtenäinen, vähintään 2 pikseliä paksu ääriviiva, jonka väri kontrastoi sekä hallintaelementin että sen ympäristön kanssa.

Kaksivärinen ilmaisin takaa näkyvyyden taustasta riippumatta:

/* Läpinäkyvä ääriviiva säilyttää ilmaisimen pakotettujen värien tilassa */
:focus {
  outline: 2px solid transparent;
  /* Vaalea hehku + tumma rengas: toinen näistä kahdesta kontrastoi aina */
  box-shadow: 0 0 0 2px #f9f9d1, 0 0 0 4px #396196, 0 0 4px 8px #f9f9d1;
}

Tämä lähestymistapa perustuu WCAG-tekniikkaan C40.

Vältä ilmaisimia, jotka ovat vain yhden reunan varassa, kuten alareunaa: niiden riittävä koko riippuu kyseisen reunan pituudesta, joka vaihtelee tekstilinkeissä.

Näin Silktide testaa tämän

Simuloi näppäimistökäyttäjää, joka siirtyy sarkaimella sivun kaikkien kohdistettavissa olevien elementtien läpi. Ohita elementit, jotka olet sulkenut pois tarkistuksesta, näkeviltä käyttäjiltä piilotetut elementit sekä elementit, joiden tabindex on -1.
Vertaa kunkin elementin tyylejä kohdistetussa ja kohdistamattomassa tilassa.
Hyväksy elementit, joissa säilyy selaimen oletusarvoinen kohdistuksen ääriviiva tai joiden taustaväri muuttuu siten, että tilojen välinen kontrasti on vähintään 3:1.
Muussa tapauksessa mittaa kummankin tilan ääriviivat, reunukset ja varjot sekä laske alue, joka muuttuu riittävällä kontrastilla. Hyväksymiseen tämän alueen on oltava vähintään yhtä suuri kuin elementin ympärillä oleva 2 pikseliä paksu kehä 2.4.13-vaatimuksen mukaisesti.

Vianmääritys

Kohdistustyyli tarvitsee JavaScriptiä näkyäkseen

Kohdistustyylit tulee määrittää pelkällä . Jos kohdistus lisätään – esimerkiksi komentosarjalla, joka lisää luokan – Silktide ei välttämättä havaitse sitä, eikä se ehkä toimi avustavissa teknologioissa ilman fyysistä näppäimistöä. Kokeile poistaa JavaScript käytöstä ja siirtyä sivulla sarkaimella varmistaaksesi asian.

Kohdistustyylit, joita emme voi mitata

Joitakin kohdistuksen toteutustapoja ei voida havaita tai mitata automaattisesti:

Näennäiselementeillä, kuten ::before tai ::after, piirretty kohdistus.
Säilöön :focus-within-tilan kautta lisätty kohdistus.
Lapsielementeille periytyvät kohdistustyylit, kuten linkin sisällä olevalle <span>-elementille. Osa näistä tapauksista havaitaan, mutta eivät kaikki muunnelmat.

Näitä tekniikoita käyttävät elementit ohitetaan merkitsemisen sijaan.

Elementit kuvien päällä tai arvaamattomilla taustoilla

Kontrasti lasketaan tunnettua taustaväriä vasten. Kun elementti on kuvan päällä tai sijoitettu vanhempansa ulkopuolelle niin, ettei sen taustaa voida määrittää, Silktide ohittaa sen arvaamisen sijaan.

Odottamattomat elementit ovat kohdistettavissa

Tunnisteista, kuten <div> tai <span>, tulee kohdistettavia, kun niiden tabindex-arvoksi annetaan 0 tai suurempi. Näin mukautetut hallintaelementit tukevat näppäimistökäyttöä. Jos tällainen elementti näkyy tuloksissasi, siihen voi todella siirtyä näppäimistöllä ja se tarvitsee kohdistustyylin. Katso tabindex MDN:ssä.