Linkkien kontrasti
Silktide löytää tekstistäsi linkit, jotka erottuvat niitä ympäröivistä sanoista pelkästään värin perusteella ja joiden väriero on liian pieni, jotta henkilöt, joilla on värinäön häiriöitä, voisivat havaita ne. Linkkien on oltava tunnistettavissa linkeiksi, tai lukijat eivät voi käyttää niitä.
Miksi tämä on tärkeää
Noin yhdellä miehellä 12:sta ja yhdellä naisella 200:sta on värinäön häiriö. Jos linkin ainoa merkki on hienovarainen värimuutos, nämä lukijat näkevät pelkkää tekstiä eivätkä koskaan tiedä linkin olevan olemassa. Tämä tarkoittaa huomaamatta jäävää navigointia, huomaamatta jääviä toimintakehotuksia ja :n A-tason epäonnistumista – kyseessä on yksi saavutettavuuden perusvaatimuksista.
Miten se korjataan
Tekstinsisäisestä linkistä voi tehdä vaatimustenmukaisen kahdella tavalla:
- Erota se muullakin kuin värillä – yksinkertaisin korjaus on alleviivaus, jota useimmat lukijat odottavat linkeillä olevan. Myös reunus, tausta tai selvästi vahvempi fontin paksuus toimii.
/* Linkit, jotka perustuvat pelkästään väriin */
a { color: #4a6da7; text-decoration: none; }
/* Korjattu: alleviivaus tekee linkin näkyväksi kaikille */
a { color: #4a6da7; text-decoration: underline; }
- Käytä selvästi erilaista väriä sekä näkyvää kohdistus- ja hover-tilaa – linkin värin ympäröivään tekstiin nähden on oltava vähintään 3:1, ja linkin on muututtava näkyvästi (esimerkiksi saatava alleviivaus), kun hiiren osoitin on sen päällä tai sillä on .
Miten Silktide testaa tämän
- Etsi näkyvät linkit, jotka sijaitsevat tekstijaksossa ja joiden välittömästi ennen tai jälkeen on sanoja. Itsenäisiä linkkejä, kuten valikkokohteita ja painikkeita, ei testata tällä tarkistuksella.
- Ohita linkit, joiden linkkiväriä, ympäröivän tekstin väriä tai taustaväriä ei voida selvittää luotettavasti.
- Hyväksy linkit, jotka erottuvat visuaalisesti ilman väriä: alleviivatut, reunukselliset, taustalla varustetut tai fontin paksuudeltaan vähintään 200 yksikköä ympäröivää tekstiä vahvemmat linkit.
- Muussa tapauksessa mittaa linkkivärin ja ympäröivän tekstin värin välinen kontrastisuhde ja tarkista, miten linkki muuttuu kohdistettaessa ja hiiren osoittimen ollessa sen päällä. Ilmoita linkistä, ellei suhde ole vähintään 3:1 ja kohdistus- tai hover-tila ole näkyvästi erilainen.
Vianmääritys
Linkkini muuttuvat, kun hiiren osoitin on niiden päällä, joten miksi ne on merkitty?
Pelkkä muutos hiiren osoittimen ollessa linkin päällä ei riitä – linkillä on oltava myös vähintään 3:1-värikontrasti ympäröivään tekstiin nähden. Ja vaikka molemmat ehdot täyttyisivät, tämä tapa auttaa vain henkilöitä, jotka kykenevät havaitsemaan värieron riittävän hyvin kokeillakseen osoittimen viemistä linkin päälle. Alleviivaus on edelleen luotettavin korjaus.
Valikoiden ja painikkeiden linkkejä ei merkitä
Oikein – tämä tarkistus koskee vain muiden tekstien ympäröimiä linkkejä, joissa lukijan on erotettava linkki sitä ympäröivistä sanoista. Itsenäiset linkit ovat visuaalisesti tunnistettavissa sijaintinsa ja muotoilunsa perusteella.