Väri, kuvio ja suorat selitteet
Kuvatkaa sarjat niin, että värisokeat käyttäjät voivat lukea ne.
Väri, kuvio ja suorat selitteet 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.
Pelkkä väri johtaa joitakin silmiä harhaan
Noin yksi kahdestatoista miehestä ei pysty luotettavasti erottamaan tiettyjä värejä toisistaan. Jos kaaviossanne punainen tarkoittaa tappiota, nämä käyttäjät eivät näe eroa lainkaan. 🎨
Kahden kanavan sääntö
Koodatkaa jokainen sarja toisen kanavan avulla värin lisäksi: käyttäkää kuviota, muotoa tai suoraa otsikkoa. Tällöin väri on lisävihje, ei ainoa vihje.
Kuviot täyttävät aukon
Käyttäkää pylväissä ja alueissa toisistaan erottuvia kuvioita, kuten raitoja tai pisteitä. Täyttökuvio erottaa sarjat toisistaan myös täysin harmaasävyisessä näkymässä.
<rect fill="url(#stripes)" />Käyttäkää viivakaavioissa erilaisia muotoja
Merkitkää viivakaavioiden pisteet erilaisilla muodoilla: ympyröillä, neliöillä ja kolmioilla. Jokainen viiva pysyy erotettavana ilman värisävystä riippumista.
Suorat otsikot ovat selitettä parempia
Erillinen selite pakottaa käyttäjän yhdistämään värejä toisiinsa. Sijoittakaa otsikko suoraan viivan tai sektorin kohdalle, jotta nimi on datan vieressä.
Valitkaa värisokeille sopiva paletti
Jotkin väriparit, kuten punainen ja vihreä, ovat vaikeimpia erottaa toisistaan. Värisokeille sopiva paletti, kuten Okabe-Ito, välttää nämä ristiriidat.
Kontrasti on tärkeä tässäkin
Vierekkäisten sarjojen ja niiden tekstimuotoisten otsikoiden välillä on oltava riittävä kontrasti. WCAG edellyttää merkityksellisten graafisten osien välille vähintään suhdetta 3:1.
Testatkaa harmaasävyillä
Tehkää pikatarkistus: katsokaa kaaviota harmaasävyisenä. Jos ette pysty erottamaan sarjoja toisistaan, värisokea käyttäjä ei pysty siihen myöskään. Korjatkaa tilanne ennen julkaisua.
filter: grayscale(100%);Tavoitteena on redundant encoding
Tätä vihjeiden yhdistämistä kutsutaan käsitteellä redundant encoding: väri sekä kuvio ja otsikko. Jos yksi vihje katoaa, kaavio on silti selkeästi luettavissa.
Älkää hukuttako käyttäjää vihjeisiin
Kohtuus on tärkeää. Kaikkien kuvioiden käyttäminen yhtä aikaa tekee näkymästä sekavan. Lisätkää niitä vain sen verran, että jokainen sarja on erottuva ja kaavio säilyy rauhallisena.
Tästä on hyötyä myös huonossa valaistuksessa
Suorat otsikot ja kuviot auttavat myös kaavioissa, joita katsotaan auringonvalossa, halvoilla näytöillä tai mustavalkoisina tulosteina. Kaikki hyötyvät. ☀️
Pikatarkistus
Miksi pelkkä väri on huono tapa erottaa kaavion sarjat toisistaan?
Kertaus: useampi kuin yksi vihje
Opitte, ettei pelkkään väriin pidä koskaan luottaa: lisätkää kuvioita, muotoja tai suoria otsikoita, valitkaa turvalliset paletit ja testatkaa näkymä harmaasävyisenä. 🖤
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 ”Väri, kuvio ja suorat selitteet” ilmainen?
Kyllä – oppitunnin ”Väri, kuvio ja suorat selitteet” 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 ”Väri, kuvio ja suorat selitteet”?
Kuvatkaa sarjat niin, että värisokeat käyttäjät voivat lukea ne. 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 ”Väri, kuvio ja suorat selitteet”-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
- Jokainen kaavio tarvitsee tekstivastineen
- Tietotaulukko varavaihtoehtona
- Väri, kuvio ja suorat selitteet
- Näppäimistöllä käytettävät vuorovaikutteiset kaaviot