Lomakeohjausobjektien kontrasti
Silktide tarkistaa, että lomakekentät, kuten tekstiruudut ja avattavat valikot, erottuvat visuaalisesti niitä ympäröivästä alueesta. Sivuun sulautuvaa kenttää on heikkonäköisten vaikea löytää ja käyttää.
Miksi tämä on tärkeää
Lomakkeen täyttämiseksi on ensin nähtävä, missä kentät ovat. Valkoisella sivulla oleva valkoinen syötekenttä ilman reunusta on monille heikkonäköisille näkymätön – he eivät näe, mistä klikata tai mihin kirjoittaa. Lomakkeet ovat yleensä verkkosivuston merkityksellisin osa (yhteydenotto, kassalle siirtyminen, rekisteröityminen), joten kentät, joita ei löydy, johtavat suoraan menetettyihin yhteydenottoihin ja myyntiin. Tämä on myös -ohjeiston vaatimus.
Korjaaminen
- Lisää ohjausobjektille näkyvä reunus tai ääriviiva, jonka on vähintään 3:1 sitä ympäröivään taustaan nähden. Tämä on yleensä yhden rivin muutos tyylitiedostossasi.
/* Kenttä ei erotu valkoisesta sivusta */
input { background: #fff; border: 1px solid #f2f2f2; }
/* Korjattu: reunuksen kontrasti taustaan nähden on vähintään 3:1 */
input { background: #fff; border: 1px solid #767676; }
- Vaihtoehtoisesti voit täyttää itse ohjausobjektin värillä, jonka kontrasti sen ympäristöön nähden on vähintään 3:1.
Näin Silktide testaa tämän
- Etsi sivulta kaikki näkyvät tekstisyötteet, tekstialueet ja avattavat valikot (
<input>,<textarea>ja<select>) ohittaen kaikki elementit, jotka olet jättänyt tarkistuksen ulkopuolelle. - Ohita syötetyypit, joiden ulkoasun selain tai käyttöjärjestelmä piirtää: valintaruudut, valintanapit, lähetys-/palautus-/kuvapainikkeet, tiedostonvalitsimet ja piilotetut syötteet.
- Selvitä ohjausobjektin todellinen taustaväri ja sitä ympäröivän alueen taustaväri ottaen huomioon läpinäkyvyyden ja ylemmät elementit.
- Hyväksy ohjausobjekti, jos sen täyttöväri poikkeaa ympäröivästä taustasta vähintään suhteessa 3:1. Muussa tapauksessa testaa ohjausobjektin kaikki reuna- ja ääriviivavärit ympäröivää taustaa vasten ja hyväksy se, jos jokin niistä saavuttaa suhteen 3:1.
- Raportoi ohjausobjektit, joissa mikään ei saavuta suhdetta 3:1, ja näytä paras löydetty kontrasti.
Vianmääritys
Tehosteet, joita emme voi mitata
Varjoilla, hohteilla, liukuväreillä ja taustakuvilla ei ole yhtä yksittäistä väriä
mitattavaksi, joten pelkästään tällaisten tehosteiden tarjoamaa kontrastia ei huomioida. Samoin
usean eri taustan päälle sijoitettua ohjausobjektia (esimerkiksi käyttämällä
position: absolute) ei välttämättä voida mitata. Jos merkitty ohjausobjekti todella
erottuu, löydös.
Painikkeita, valintaruutuja ja valintanappeja ei tarkisteta
Painikkeet eivät tarvitse näkyvää rajaa, kunhan niiden tunniste on luettavissa, ja selain piirtää yleensä valintaruudut ja valintanapit, joten tämä tarkistus jättää ne tarkoituksella pois.
Mukautetusti tyylitellyt avattavat valikot
Jotkin komponenttikirjastot piilottavat natiivin ohjausobjektin ja piirtävät oman korvaajansa. Silktide ohittaa piilotetun natiivin ohjausobjektin, ja näkyvä korvaaja arvioidaan mahdollisuuksien mukaan kuten mikä tahansa muu elementti.