Älä koskaan luota pelkkään väriin
Yhdistä väri merkityksen välittämiseksi kuvakkeisiin, tekstiin tai muotoon.
Älä koskaan luota pelkkään väriin on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Väri voi olla näkymätön
Monille käyttäjille valitsemasi punainen ja vihreä näyttävät lähes samalta. Jos käytät pelkkää väriä merkityksen välittämiseen, käyttäjät joutuvat arvaamaan.
Värisokeus on yleistä
Noin joka kahdestoista mies kokee jonkinlaista värisokeutta. Kyseessä on suuri osa yleisöstäsi, ei harvinainen poikkeustapaus.
Punavihreä ansa
Klassinen virhe on punainen virhe ja vihreä onnistuminen, jotka näyttävät monille käyttäjille identtisiltä. Punavihreä sekoittuminen on ylivoimaisesti yleisin tyyppi.
Perussääntö
WCAG:n kriteeri 1.4.1 sanoo, ettei väri saa koskaan olla ainoa tapa välittää tietoa. Tue sitä aina toisella signaalilla.
Lisää tekstimuotoiset otsakkeet
Yksinkertaisin korjaus on käyttää sanoja. Yhdistä punaiseen kenttään otsake Error, jotta merkitys säilyy, vaikka väri ei erottuisi.
Lisää kuvakkeita ja muotoja
Valintamerkki, varoituskolmio tai X välittää merkityksen muodon avulla. Nyt onnistuminen ja virhe eroavat toisistaan myös harmaasävyissä.
Linkit tarvitsevat muutakin kuin sävyn
Harmaassa kappaleessa oleva sininen linkki voi kadota joidenkin käyttäjien näkymästä. Lisää alleviivaus, jotta linkit erottuvat ilman väriin luottamista.
Kaaviot rikkovat sääntöä usein
Kaaviot, joissa sarjat erotetaan toisistaan vain värin avulla, ovat ongelmallisia. Lisää jokaiseen viivaan tai sektoriin kuvioita, suoria otsakkeita tai erottuvia muotoja.
Lomakkeen validointi oikein
Älä merkitse virheellistä kenttää pelkällä punaisella reunuksella. Lisää tekstimuotoinen virheilmoitus ja kuvake, jotta kaikki tietävät, mikä epäonnistui.
Harmaasävytesti
Nopea tuntumatesti: katsele suunnitelmaasi harmaasävyinä. Jos erotat tilat ja linkit edelleen toisistaan, et nojaa pelkkään väriin.
Alleviivauksen lisäävä linkki
Alleviivauksen säilyttäminen varmistaa, että linkit erottuvat selkeästi myös käyttäjille, jotka eivät pysty havaitsemaan värieroa.
a {
color: #0b5fff;
text-decoration: underline;
}Pikatarkistus
Päättäkää, mikä on turvallisin tapa ilmoittaa lomakevirheestä.
Kertaus: värejä enemmän
Opitte, ettei väri saa koskaan olla ainoa merkki: lisätkää tekstiä, kuvakkeita, muotoja tai alleviivauksia, jotta merkitys välittyy kaikille. Seuraavaksi tarkistetaan kontrasti työkaluilla. 🌈
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Älä koskaan luota pelkkään väriin” ilmainen?
Kyllä – oppitunnin ”Älä koskaan luota pelkkään väriin” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Älä koskaan luota pelkkään väriin”?
Yhdistä väri merkityksen välittämiseksi kuvakkeisiin, tekstiin tai muotoon. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Älä koskaan luota pelkkään väriin”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Miksi kontrastisuhteet ovat olemassa
- Täytä AA-taso: tekstin ja suuren tekstin raja-arvot
- Älä koskaan luota pelkkään väriin
- Tarkista kontrasti maksuttomilla työkaluilla