Kuvien ulkonäkö vaikuttaa siihen, kuinka helppoa on havaita kuvissa olevat tiedot. Parhaimmillaan kuvat ovat saavutettavia myös niille lukijoille, joiden näkökyky tai värinäkö on heikko. Erityisesti tietoa visualisoivia kuvia tuotettaessa ja valitessa pitäisi ottaa huomioon saavutettavuusvaatimukset.
Tässä osiossa esitellään Verkkosisällön saavutettavuusohjeiden eli WCAG-ohjeiden 2.1-versiossa olevat kuvia koskevat saavutettavuusvaatimukset. Vaatimukset koskevat etenkin tietoa visualisoivia kuvia. Niitä ei voi soveltaa valokuviin. Väreihin liittyviä vaatimuksia ei voi myöskään tarvitse soveltaa sellaisiin kuviin, joissa värien käytöllä on vakiintunut merkitys, kuten esimerkiksi maastokartoissa, lämpökartoissa tai vaakunoiden ja lippujen kuvissa.
Muista, että vaikka kuvissa noudatetaan niitä koskevia vaatimuksia, kuville pitää antaa tekstivastine. Tietoa tekstivastineista on osiossa Kuvien tekstivastineet.
Tekstiä esittävät kuvat
Vältä tekstiä esittäviä kuvia. Älä siis lisää e-kirjaan taulukkoa kuvana, vaan tee taulukko sopivien taulukkomerkkausten avulla siten, että taulukon rivit ja sarakkeet on määritelty. Jos e-kirjassa on taulukon kuva, kuvalle on annettava tekstivastine. Käytännössä taulukon sisältö on siis kuitenkin annettava tekstinä, joten on järkevämpää tehdä alusta lähtien taulukko saavutettavana.
Tekstiä sisältävät kuvat
Usein kaaviot ja mallit, jotka esittävät prosesseja, aikajanoja tai organisaatioiden rakenteita, sisältävät tekstiä. Myös infografiikassa tekstit ovat olennainen osa kuvaa. Tällaisten tekstiä sisältävien kuvien kohdalla on tärkeää varmistaa se, että teksti erottuu taustastaan hyvin eli tekstin ja taustan välillä on tarpeeksi suuri kontrastiero. WCAG-kriteereissä määritellään pienin sallittu kontrastiero. Suurin mahdollinen kontrastisuhde on mustan ja valkoisen välillä 21:1.
- Normaalin tai pienen tekstin ja sen taustan välillä on oltava kontrastisuhde, joka on vähintään 4,5:1.
- Suuren tekstin eli vähintään 18 pisteen kokoisen tekstin tai lihavoituna 14 pisteen kokoisen tekstin ja taustan välillä on kontrastisuhteen on oltava vähintään 3:1.
Esimerkki 1: Tämän tekstin koko on 14 pistettä ja värin HEX-arvo 9B51E0. Kontrastisuhde valkoiseen taustaan on 4,51:1.
Esimerkki 2: Tämän tekstin koko on 18 pistettä ja värin HEX-arvo on 9445DE ja taustan HEX on 8ED1FC. Kontrastisuhde tekstin ja taustan välillä on 3,04:1.
Kun tekstin taustalla on tasainen väri, tekstin ja taustan välisen kontrastisuhteen voi laskea helposti esimerkiksi WebAIM.orgin Contrast Checkerin avulla. Verkkosivulla olevaan englanninkieliseen työkaluun syötetään tekstin ja taustan värit HEX-, RGB- tai HSL-arvona ja työkalu laskee kontrastisuhteen sekä kertoo, onko suhde vaatimusten mukainen. Jos kontrastisuhde on liian pieni, voi työkalussa säätää värejä tummemmiksi tai vaaleammiksi, kunnes saadaan riittävä kontrastisuhde. Työkalu ilmoittaa uudet värien arvot.
Tiedon esittäminen värien avulla
WCAG-kriteerien mukaan väri ei saa olla ainoa keino välittää tietoa. Tämä on usein helppo testata muuttamalla kuva harmaasävyiseksi. Jos kuvan ymmärtää harmaasävyisenä, värit eivät ole ainoa keino välittää tietoa. Mutta jos esimerkiksi pylväsdiagrammissa eriväristen pylväiden tummuus on lähellä toisiaan, pylväitä ei välttämättä erota toisistaan harmaasävyisenä.
Värien käytössä on hyvä ottaa myös huomioon värisokeus ja välttää tiedon esittämistä luottaen siihen, että lukija erottaa toisistaan etenkin punaisen ja vihreän. On olemassa värisokeuden eri muotoja simuloivia ohjelmia, mutta näiden ohjelmien tuloksiin ei voi täysin luottaa, koska värinäön poikkeukset ovat yksilöllisiä. Paras keino varmistaa se, että väri ei ole ainoa keino välittää tietoa, on hyödyntää värien erilaisia tummuuseroja ja liittää kuvioihin ja kaavioihin erottamista helpottavia symboleita tai kuvioita.
Tietoa esittävissä kuvissa pitää varmistaa myös vierekkäisten värien välinen kontrastisuhde. Tämä tarkoittaa sitä, että esimerkiksi ympyrädiagrammin vierekkäisten lohkojen värien välillä pitäisi kontrastisuhteen olla vähintään 3:1 silloin, kun diagrammin ymmärtäminen edellyttää lohkojen havaitsemista ja erottamista toisistaan. Vierekkäin ei siis voisi olla esimerkiksi keltaista ja oranssia lohkoa. Koska kontrastisuhde lasketaan vierekkäisten värien välillä, tämä ongelma on ratkaistavissa käyttämällä lohkojen ympärillä tummaa rajausta, jolloin kontrastisuhde laskettaisiin keltaisen/oranssin ja tumman värin välillä.
Nämä värejä koskevat vaatimukset liittyvät etenkin numeerisen tiedon visualisointiin erilaisten diagrammien ja kuvaajien avulla. Infografiikkaa suunniteltaessa pitää ottaa huomioon monta eri vaatimusta:
- Tekstin ja sen taustan välillä pitää olla riittävä kontrastisuhde
- Väri ei saa olla ainoa keino välittää tietoa
- Vierekkäisten värien välillä pitää olla riittävä kontrastisuhde sellaisissa graafisissa esityksissä, joiden havaitseminen vaikuttaa esityksen ymmärtämiseen
Informatiivisia kuvia ja niiden saavutettavuutta on käsitelty hyvin Carie Fisherin englanninkielisessä artikkelissa Accessible Images For When They Matter Most (Smashing Magazine, May 15 2020).
Viimeksi päivitetty 20.9.2022.