EU:n saavutettavuusdirektiivi vanhoille verkkosivuille astuu voimaan 23.9.2020 ja mobiilipalveluiden osalta 21.6.2021. Uusilta sivustoilta saavutettavuutta edellytetään jo nyt. Tämä tarkoittaa, että julkista rahoitusta saaneiden organisaatioiden ja julkisten liikelaitosten sekä esimerkiksi hankkeiden verkkosivujen tulee noudattaa WCAG 2.1 standardia. Direktiivi edellyttää, että kaikki verkkosivut ja mobiilisovellukset ja sisällöt ovat kaikkien käyttäjäryhmien käytettävissä ja ymmärrettävissä.
Käsittelen tässä kirjoituksessani vaihtoehtoisen tekstin, alt-tekstin eli vaihtoehtoisen kuvaustekstin tekemistä kuviin. Vaihtoehtoisen tekstin eli ALT-tekstin avulla kerrotaan kuvan sisältämä tieto tekstin muodossa, koska kaikki eivät näe itse kuvaa. Syynä tähän on yleensä näkövamma tai se, että kuvat eivät ole latautuneet tai henkilö ei ole halunnut ladata niitä. Kuvien vaihtoehtoiset tekstit parantavat merkittävästi verkkosisältöjen saavutettavuutta. (Saavutettavasti.fi 2020)
Kerron, millainen on hyvä alt-teksti ja miten se otetaan huomioon sisällöntuotannossa ja millaisia toimenpiteitä tämän huomioiminen tarkoittaa olemassa oleville verkkosivuille. Minulla on 25 vuoden kokemus verkkoviestinnän ja verkkopalveluiden suunnittelusta. ALT-tekstit ovat olleet mukana verkkosivuilla HTML 4.0 standardin käyttöönotosta eli joulukuusta 1997 alkaen, mutta vasta EU:n saavutettavuusdirektiivin myötä siitä on vihdoin kiinnostuttu laajemmin.
Saavutettavuusdirektiivi edellyttää, että kaikelle ei-tekstimuotoiselle sisällölle tarjotaan tekstivastine. Tämä tarkoittaa sivuilla olevien kuvien, videoiden ja äänten tarjoamista myös tekstinä. Näkövammaisten käyttämät ruudunlukuohjelmat lukevat kuvan kohdalla tekstivastineen ääneen.
Saavutettavuusdirektiivistä voit lukea enemmän blogistani EU:n saavutettavuusdirektiivi – mitä siitä pitäisi tietää (Röksä 2018).
Moni miettii, että kannattaisiko verkkosivut kokonaan uudistaa saavutettavuusdirektiivin astuessa voimaan täydellä teholla. Sivujen saavutettavaksi tekeminen ei kuitenkaan ole rakettitiedettä ja ”perusverkkosivuilla” asiat ovat pääsääntöisesti jo kunnossa, joten minun vastaukseni on, ettei kannata. Mikäli sivujen julkaisualusta on kunnossa, muutokset on helppo huomioida vanhoilla verkkosivuilla.
Syynä vanhojen sivujen käyttöön on, että pidempään verkossa olleet sivut ovat indeksoituneet jo hakukoneisiin. Hätiköity verkkosivu-uudistus voi johtaa siihen, etteivät käyttäjät löydä etsimäänsä tietoa hakujen avulla. Pahimmassa tapauksessa hakutulos johtaa sivulle, jota ei enää ole. Vaikka ammattitaitoiset verkkokehittäjät pystyvät minimoimaan ongelman, pientä notkahdusta tuloksissa ei kuitenkaan voi välttää.
Verkkosivulla jo olevien kuvien läpikäynti ja tekstitys on työlästä. Siksi saavutettavuusdirektiivi antaa mahdollisuuden verkkosivujen sisällölliseen päivittämiseen. Vanhentuneet artikkelit ja kuvat voi poistaa sivuilta, joten sivujen ylläpitämisestä tulee helpompaa. Vanhoilla sivuilla on usein vanhentuneita eli rikkinäisiä linkkejä, jotka vaikuttavat negatiivisesti verkkosivujen hakukoneoptimointiin.
Saavutettavien kuvien tekeminen kannattaa aloittaa omien päivitysrutiinien muuttamisesta. Suurimpana syynä ALT-tekstien puuttumiseen on joko kiire asian viestimisessä tai tietämättömyys.
Kuvien saavutettavaksi tekeminen alkaa kuitenkin jo ennen niiden siirtämistä verkkosivulle. Seuraavat asiat on hyvä huomioida ennen alla esiteltyjä vaihtoehtoisen tekstin ohjeistusta:
Pikaisella kuvien verkkosivujen metatietojen tarkistamisella voi todeta, että ALT-tekstien puuttuminen tai niiden puutteellisuus on yksi ongelmallisimpia asioita verkkosivujen saavutettavuuden näkökulmasta. Tämä koskee lähes kaikkia verkkosivustoja.
Nostan tarkasteluun kirjoittamishetkellä ajankohtaisen THL:n sivuston, jonka merkitys viranomaiskanavana on tärkeä kaikille kansalaisille. Sivuilla vieraillaan paljon, mutta lähemmin tarkasteltuna ajankohtaisilla sivuilla kuvien tekstivastineet joko puuttuvat tai ovat puutteellisia. Toisin sanoen ne eivät anna sivuja apuvälinein selaaville samoja tietoja kuin näkeville. Suurimmat ongelmat liittyvät graafien ja kuvioiden esittämiseen tilanteessa, jossa niissä olevia tietoja ei kerrota muualla tekstissä.
Pohjoismaiden epidemiatilanteesta kertova kuva on nimetty ”Figure+3+for+THL+website_updated.png”. Se ei kerro kuva sisällöstä. Vakavampi puute on kuitenkin kuvan ALT-teksti ”varmistetut tapaukset pohjoismaissa 6.4.”. Näkevälle kuva näyttää selkeästi tilanteen kehittymisen pohjoismaissa, mutta apuvälineellä sivua tarkastelevalle tuota tilannetta ei kerrota.
Saavutettavampi vaihtoehtoteksti olisi: ”Koronatapaukset Pohjoismaissa/100.000 asukasta kohden 6.4.2020. Norja 109, Viro 82, Tanska 75, Ruotsi 68, Suomi 35.”
Mikäli tieto olisi ilmoitettu tekstissä, ALT-teksti voisi olla: ”Varmistetut tapaukset Pohjoismaissa 100.000 asukasta kohden. Kuvion sisältö löytyy tekstistä”.
Seuraava kuva antaa kansalaisille olennaista tietoa siitä, kuinka oirehtivat, terveet ja riskiryhmiin kuuluvat voivat toimia eri tilanteissa. Kuvan tekstivastine ”Näin korona vaikuttaa jokaisen arkeen.” ei tule esiin leipätekstissä.
Kuva sisältää tärkeää tietoa poikkeustilanteesta kaikille kansalaisille. Koska se sisältää paljon tietoa, sen sisältö olisi kerrottava selkeästi joko tekstisisällössä tai kuvan longdesc -koodissa (ks. alla). Nyt vaihtoehtoinen teksti ja leipäteksti eivät kerro, voivatko flunssan oireita poteva asioida kaupassa tai matkustaa julkisilla liikennevälineillä. Taulukko sisältää paljon informaatiota, joten sen sisältö ei mahdu vaihtoehtoiseen tekstiin. ALT-teksti kuvassa voisi olla: “Kuinka koronatilanne vaikuttaa oirehtivien, terveiden ja riskiryhmien arkeen. Taulukon tiedot on kerrottu leipätekstissä.”
Hyvä ALT-teksti vaikuttaa positiivisesti verkkosivujen hakukonenäkyvyyteen. Sivusto, jolla teksti on kirjoitettu kuvaan laadukkaasti, nousee hakutuloksissa korkeammalle kuin sivu, jossa ne ovat puutteellisia. Hyvin kuvailtu kuva tuo sivustolle myös lisää kävijöitä, mikäli infografiikka ja kuviot ovat kuvailtu oikein ja ovat yhteydessä sivun sisällön kanssa. Kuinka usein olet itse hakenut kuvia oppitunneillesi tai esityksiisi Googlen kuvahaulla?
Hyvä tekstivastine lähtee sivun ja kuvan kontekstista. Mitä kuvasta täytyy ymmärtää ja mitä lisätietoa se tuo tekstissä jo esitettyyn asiaan vai onko sisältö jo kerrottu tekstissä? Mikä kuvassa on olennaista sen merkityksen ymmärtämisen kannalta?
Lopuksi esimerkki huonosta ja paremmista tekstivastineista. Olen piirtänyt oheisen kuvan tekstiin, jossa kerrotaan ammattimaisesta e-urheilusta ja sponsoroinnista (konteksti).
Huono tekstivastine: <ALT=”Poika.”>*. Ei anna käytännössä mitään kontekstiin liittyvää tietoa.
Parempi tekstivastine: <ALT=”Poika pelaa tietokoneella.”>. Hyvä, mutta ei vielä kerro kontekstia. Tekstissä puhutaan ammattimaisesta e-urheilusta.
Suositeltu vaihtoehto: <ALT=”Poika pelaa tietokoneella sponsoripaita päällä ja striimaa e-urheilua ammattimaisesti verkkoon, piirroskuva.”>. Vaihtoehtoinen teksti sisältää 98 merkkiä ja on riittävän informatiivinen. Tässä tapauksessa kuvan luonne, piirroskuva, on olennainen tieto.
*Kuvan alla näkyy ALT-teksti html-koodilla tehtynä. Mutta mikäli täytät ALT-tekstin WYSIWYG (What you see is what you get)-editorilla, kirjoitat sen vaihtoehtoinen/Alt-teksti sisältökenttään ilman <> ja “”-merkkejä. Muista kuitenkin päättää teksti aina pisteeseen.
Kirjoittaja on Humanistisen ammattikorkeakoulun viestintäpäällikkö. Hänellä on 25 vuoden kokemus verkkopalvelujen kehittämisestä ja käytettävyyssuunnittelusta.
Röksä, Jarmo (2018) EU:n saavutettavuusdirektiivi – mitä siitä pitäisi tietää? Päivystävät Humanistit blogi. Humanistinen ammattikorkeakoulu. https://www.humak.fi/blogit/eun-saavutettavuusdirektiivi-mita-siita-pitaisi-tietaa/ (viitattu 8.4.2020)
Saavutettavasti.fi (2020). Kuvien vaihtoehtoiset tekstit. https://www.saavutettavasti.fi/kuva-ja-aani/kuvat/ (viitattu 17.4.2020)
W3C Quality Assurance. Use the alt attribute to describe the function of each visual. https://www.w3.org/QA/Tips/altAttribute (viitattu 8.4.2020)
W3scools.com (2020). HTML <img> longdesc Attribute. https://www.w3schools.com/TagS/att_img_longdesc.asp (viitattu 8.8.2020)