eQual-blogisarjassamme esittelemme vinkkejä, joista on hyötyä monessa eri yhteydessä, kun saavutettavuus-asiat askarruttavat ja tulevat yhä kiinteämmäksi osaksi arkipäiväämme digimaailmassa.

Kirjoittajina toimivat Q-Factoryn uuden osaamisyksikön eQualin asiantuntijat. eQualin keskiössä on palvelun koko elinkaaren ja kaikki roolit kattava eQual-toimintamalli ja palvelukokonaisuus. 

Tällä kertaa asia koskettaa erityisesti sisällöntuotannon ja markkinoinnin ammattilaisia. Uskomme, että tämä tietoisku on hyödyllinen erityisesti teille.

Mikä on alt-teksti?

Alt-teksti eli vaihtoehtoinen teksti tai tekstivastine lisätään kuviin, jotta esimerkiksi näkövammaiset ruudunlukuohjelmaa tarvitsevat käyttäjät pääsisivät myös käsiksi kuvan sisältämään tietoon. WCAG-kriteeristö, johon Suomenkin saavutettavuuslainsäädäntö nojaa, edellyttää heti ensimmäisessä kriteerissään, että kuviin lisätään alt-tekstit.

Millainen on hyvä alt-teksti?

Alt-tekstin tulee välittää käyttäjälle kuvan sisältö ymmärrettävästi. Puolestaan, jos kuvaa käytetään osana linkkiä, tällöin alt-tekstissä tulee kertoa kuvalinkin käyttötarkoitus, ei kuvan sisältöä. Alt-tekstit tulee pitää ytimekkäinä, maksimissaan noin kahden lauseen mittaisina, sillä ruudunlukuohjelma lukee koko alt-tekstin yhteen putkeen.

Mitä ovat koristeelliset kuvat?

Koristeelliset kuvat ovat kuvia, joilla ei ole varsinaista sisällöllistä merkitystä, mutta jotka ovat vain välittämässä tunnelmaa. Tällaisia ovat monilla sivustoilla käytetyt ”fiilistelykuvat”. Riippuen kontekstista, sama kuva voi olla koristeellinen tai vaihtoehtoisen tekstin vaativa kuva.

Tästä voidaan käyttää esimerkkinä Q-Factoryn blogitekstin (https://q-factory.fi/testausblogi/uutinen-testausblogi/q-factory-edistaa-digitaalisten-palveluiden-yhdenvertaisuutta-ja-vastuullisuutta/) kuvaa, jossa henkilöt (Misa ja Ari-Pekka) paiskaavat kätensä yhteen. Blogitekstin kuvalle voisi tässä kontekstissa asettaa alt-tekstin, sillä molemmat miehet mainitaan tekstissä nimellä.

Jossakin muussa kontekstissa olisi mahdollista käyttää kuvaa koristeellisena, esim. jos kuva olisi kuvapankista ja miehet ovat täysin tuntemattomia. Sisällöntuottajien on aina pohdittava, jääkö apuvälinekäyttäjä jostain oleellisesta tiedosta paitsi, jos alt-tekstiä ei lisätä. Jos kuva on luonteeltaan puhtaasti koristeellinen, voidaan kuvalle antaa tyhjä alt-attribuutti eli alt=””. Tällöin ruudunlukuohjelma ohittaa kuvan kokonaan.

Tärkeää huomioida:

Kuvassa tulee aina olla alt-attribuutti

On tärkeää huomioida, ettei tyhjä alt-attribuutti ole sama asia kuin alt-attribuutin puuttuminen kokonaan. Jos alt-attribuuttia ei aseteta kuvalle lainkaan, kuvaa ruudunlukuohjelma käyttäjälle kuvan tiedostonimen, joka saattaa olla pahimmillaan vain sarja numeroita, eikä ko. informaatio tarjoa käyttäjälle minkäänlaista lisäarvoa. Lisäksi alt-attribuutin puuttuminen rikkoo WCAG-standardia.

Entä jos kuvalle on vaikeaa asettaa alt-tekstiä?

Joskus ytimekkään alt-tekstin asettaminen saattaa tuntua haastavalta. Tällainen tilanne voi olla esimerkiksi erilaisten kaavioiden tai infografiikan kohdalla. Kuitenkin näidenkin kuvien sisällöt pitäisi pystyä kuvaamaan saavutettavassa muodossa. Tällöin vaihtoehtoja on kaksi:

• Kuvan sisältöä kuvaillaan kuvatekstissä tai osana sivun varsinaista leipätekstiä.
• Kuvan yhteyteen erillinen tekstivastine, johon on linkitys kuvan läheisyydessä.
  
  

Kummassakin tapauksessa kuvalle voidaan antaa lyhyt alt-teksti, missä kerrotaan esimerkiksi, mikä kaavio on kyseessä.

Tämän osion kirjoittajina toimivat saavutettavuusasiantuntijamme Krister Linnas ja Niko Kunelius. Voit tutustua Kristeriin ja Nikoon tarkemmin tässä tiimiesittelyartikkelissa.