E-kirjojen sisältämiin kuviin kohdistuu erilaisia saavutettavuusvaatimuksia: kuvia tuotettaessa on otettava huomioon tekstin käyttö kuvissa, värien käyttö ja värien välisiin kontrasteihin liittyvät vaatimukset. Lisäksi kuvien oleellinen sisältö on välitettävä tekstinä.
Kuvien ulkoasuun liittyvien vaatimusten tavoitteena on varmistaa se, että heikkonäköiset lukijat ja lukijat, joilla on vaikeuksia värien havaitsemisessa, voisivat havaita kuvien sisältämät tiedot. Tekstivastineiden avulla varmistetaan se, että lukijat, jotka eivät näe kuvaa, saavat kuvissa olevan tiedon.
Kuvien ulkoasuun liittyviä vaatimuksia sovelletaan tietoa visualisoiviin kuviin. Vaatimukset eivät sovellu valokuviin, taidekuviin, maantieteellisiin karttoihin tai yksiselitteisesti määriteltyyn visuaaliseen ulkoasuun ja väreihin perustuviin kuviin, kuten vaakunoihin, maiden lippuihin tai lämpökarttoihin.
Kaikille tietoa sisältäville kuville pitää antaa tekstivastine eli kuvan oleellinen sisältö pitää antaa myös tekstimuodossa. Oleellisen sisällön voi kertoa leipätekstissä, kuvan alt-tekstissä tai laajempana kuvaselostuksena. Sopiva tapa riippuu tilanteesta: Pohdi alt-tekstiä aina suhteessa kuvan merkitykseen ja kuvaan liittyvään tekstiin. Merkityksellisten kuvien alt-attribuuttia (ks. kohta 3.4) ei jätetä tyhjäksi.
4.1 Kansikuva
Lähes kaikissa e-kirjoissa on ainakin yksi kuva: kansi. Kirjan kansikuvalle on annettava vaihtoehtoinen teksti eli alt-teksti. Kannen ulkonäköä ei tarvitse kuvailla, vaan tekstiksi riittää “kansi” sekä kirjan ja kirjailijan nimi.
4.2 Tekstin esittäminen kuvina
Tekstin esittämistä kuvina pitäisi välttää. Esimerkiksi taulukoita ei esitetä kuvina, vaan ne tuotetaan taulukkomerkkausten avulla (kohta 3.2). Jos kuitenkin tietty esitystapa on tekstille oleellinen (esimerkiksi logo tai kuva historiallisesta dokumentista), tekstiä esittävää kuvaa voi käyttää. Tällaisissa tapauksissa vaihtoehtoisessa tekstissä pitäisi ilmaista kuvassa näkyvä olennainen teksti. Tekstin ulkoasua tai sen koristeluja ei selosteta, ellei niiden tietäminen ole aivan oleellista.
Aina kun on mahdollista, sisältö kannattaa antaa suoraan aitona tekstinä kuvan sijasta ja muotoilla teksti tyylien avulla halutun kaltaiseksi. Yleisesti e-kirjoissa esimerkiksi nimiösivun tiedot on annettu kuvana. Apuvälineet ja ohjelmat eivät pääse tällaiseen tietoon käsiksi, joten nimiösivu on syytä tehdä e-kirjaan aitona tekstinä.
WCAG 1.4.5 Tekstiä esittävät kuvat
4.3 Tekstiä sisältävät kuvat
Tietoa visualisoivissa kuvissa on usein mukana tekstiä. Tällöin pitää varmistaa tekstin luettavuus ja tekstin erottuminen taustastaan. Erityistä huomiota on kiinnitettävä tekstin ja sen taustan väliseen kontrastiin.
4.4 Värien käyttö kuvissa
Väri ei saisi olla ainoa keino välittää tietoa. Numeerisen tiedon visualisoinneissa pitäisi varmistaa se, että kuva toimii myös harmaasävyisenä. Näin kuvien sisältämän tiedon saaminen ei ole riippuvaista siitä, että havaitsee värit.
Graafisissa esityksissä selitetekstien sijoittamisella ja tarvittaessa pintakuvioilla voi varmistaa sen, että tiedon ymmärtäminen ei ole riippuvaista värien havaitsemisesta. Esimerkkejä värien käytöstä: Saavutettavasti-sivusto, Värit ja kontrastit.
Kuvissa, joiden havaitseminen on oleellista tiedon saannin kannalta, pitää myös huolehtia vierekkäisten värien riittävästä kontrastista. Esimerkiksi piirakkakaaviossa pitää vierekkäisten lohkojen värien erota toisistaan vähintään kontrastisuhteessa 3:1. Huomaa kuitenkin, että jos lohkojen ympärillä on musta kehys, lohkon vierekkäinen väri on musta.
WCAG 1.4.1 Värien käyttö; WCAG 1.4.11 Ei-tekstimuotoisen sisällön kontrasti
4.5 Kuvien tekstivastineet alt-tekstinä
Alt-tekstillä tarkoitetaan e-kirjan koodauksessa kuvaan liitettävää lyhyttä selostusta, epub-kirjan koodauksessa siis alt-attribuutin tekstiarvoa. Alt-teksti välittyy ruudunlukuohjelmien käyttäjille eikä näy kaikille lukijoille. Ruudunlukuohjelman käyttäjä saa kuvan kohdalla tiedon kuvasta ja kuvan alt-tekstin. Myös joidenkin lukuohjelmien lue äänen -toiminto lukee alt-tekstin.
Alt-teksti on lyhyt, mielellään pisimmillään vain parin virkkeen pituinen kuvaus kuvan olennaisesta sisällöstä. Alt-tekstiä ei aloiteta ”kuvassa näkyy”, vaan kerrotaan suoraan sisällöstä. Tarvittaessa kuvan tyypin, esimerkiksi piirros, pilakuva, kartta tai valokuva, voi kertoa.
Alt-tekstiä kirjoittaessa pitää ottaa huomioon seuraavat asiat:
- Mikä on kuvan tarkoitus?
- Mitä kuvan ympärillä leipätekstissä tai kuvatekstissä kerrotaan?
- Jos kuvan ottaisi pois kirjasta, mikä oleellinen tieto katoaisi?
- Onko kuvassa tekstiä?
Leipäteksti, mahdollinen kuvateksti ja alt-teksti muodostavat kokonaisuuden, jonka perusteella ruudunlukuohjelman käyttäjän pitäisi saada sama tieto kuin lukijan, joka näkee kuvan. Vältä ympäröivän tekstin toistoa alt-teksteissä. Kuvassa näkyvä oleellinen teksti annetaan alt-tekstissä.
Alla on esitelty erilaisia tapauksia ja niissä sopivaa alt-tekstiä.
Kuva on kirjassa ilman kuvatekstiä. Kuvan sisältö on selostettu tyhjentävästi leipätekstissä ja mitään tietoa ei jäisi saamatta vaikka kuvan poistaisi.
Alt-teksti: hyvin lyhyt otsikkomainen teksti.
Kuva on kirjassa ilman kuvatekstiä, mutta kuvan sisältöä ei ole selostettu tyhjentävästi leipätekstissä.
Alt-teksti: Alt-tekstissä pitää antaa kuvassa oleva olennainen lisätieto, jota ei kerrota leipätekstissä. Esimerkki: Kirjan tekstissä mainitaan Edelfeltin maalaus, jossa Kaarle-herttua herjaa Klaus Flemingin ruumista, mutta ei kerrota, miten herjaus tapahtuu. Kirjassa on maalauksen kuva. Alt-tekstinä voisi olla: Edelfeltin maalaus, jossa Kaarle-herttua seisoo Flemingin avonaisen arkun vieressä ja kiskoo Flemingin ruumista parrasta.
Kuvalla on kuvateksti. Kuvan oleellinen sisältö on selostettu leipätekstissä.
Alt-teksti: Koska ruudunlukuohjelma välittää kuvatekstin käyttäjälle, lukija saa tiedon, että kirjassa on kuva. Älä toista alt-tekstissä kuvatekstiä, vaan kerro, missä kuva on selostettu, esimerkiksi: ”Kuva on selostettu edellä / jäljessä tekstissä.” Voit myös mainita kuvan tyypin, esimerkiksi: ”Maalauksen sisältö on selostettu edellä.”
Jos kyseessä on henkilöä esittävä kuva ja kuvatekstissä kerrotaan henkilön nimi, mieti tarvitseeko lukijalle kertoa jotain henkilön vaatetuksesta tai hiustyylistä. Esimerkiksi, onko historiaa käsittelevässä kirjassa henkilöllä ajankohdalle epätyypillinen asu tai kampaus. Jos kyseessä on henkilöpotretti ja nimi kerrotaan kuvatekstissä, alt-tekstiksi voi antaa vain lyhyesti ”Valokuva.”.
Kuvalla on kuvateksti, mutta olennaista sisältöä ei ole selostettu leipätekstissä eikä kuvatekstissä.
Alt-teksti: Alt-tekstissä pitää kertoa tiiviisti kuvan olennainen sisältö. Älä toista kuvatekstin tekstiä.
Kuva on koristekuva. Kuvan voisi jättää kokonaan pois, eikä mitään tietoa katoaisi.
Alt-teksti: tyhjä. Jos sama koristekuva on esimerkiksi lasten romaanissa jokaisen luvun alussa ja kuva esittää jotain kirjan aiheeseen liittyvää asiaa, esimerkiksi eläintä, voi ensimmäisessä luvussa antaa kuvalle alt-tekstin ja muissa luvuissa jättää alt-tekstin tyhjäksi.
Huomaa kuitenkin, että koristekuvaa voidaan käyttää luvun keskellä tekstin erottimena. Tällöin paras ratkaisu on tuottaa kuvan tilalle hr-elementti (Daisy Accessible Publishing Knowledge Base, Context Breaks).
WCAG 1.1.1 Ei-tekstuaalinen sisältö
4.6 Kuvien tekstivastine alt-tekstinä ja pidempänä selostuksena
Kaaviot, kuvaajat ja infografiikat sisältävät usein runsaasti tietoa. Leipätekstissä saatetaan nostaa esille vain pääasioita kuvien sisältämistä asioista ja kuvateksti antaa vain nimen kuvalle. Tällaisissa tapauksissa lyhyessä alt-tekstissä ei saa kaikkea kuvan sisältämää tietoa kerrottua. Pitkä kuvaselostus on tarpeen.
Numeerista tietoa esittävien kuvien tieto kannattaa usein antaa taulukkomuodossa. Epub-kirjassa taulukon voi esimerkiksi sijoittaa erilliseen html-tiedostoon, johon johtava linkki annetaan kuvan yhteydessä. Pidemmästä selostuksesta pitää luonnollisesti olla paluulinkki leipätekstiin. Alt-tekstissä voi kertoa vain pääasian kuvaajasta ja viitata pidempään selostukseen.
Jos kirjassa on pidempiä kuvaselostuksia, kirjan metatiedoissa on hyvä kertoa asiasta Schema.orgin accessibilityFeature-kentässä arvolla longDescription ja ONIX-koodilistan 196 koodilla 15, Kattavat vaihtoehtoiset kuvaukset.
WCAG 1.1.1 Ei-tekstuaalinen sisältö
Lisätietoja: Daisy Accessible Publishing Knowledge Base, Image Descriptions
Seuraavaksi: 5. Saavutettavuuden huomiointi tyylitiedostoissa