Ensimäinen blogi postaukseni lähtee ehkä isommasta ja helpoimmasta haasteesta, joihin käyttäjät törmäävät internetiä selatessaan. Alt-teksti eli vaihtoehtoinen teksti on kuvaan lisättävä <alt-text> tägi, jolla kuvalle annetaan tekstimuotoinen sisältö.
Alt tekstin lisääminen
Alt-tekstin lisääminen on yksinkertaista mutta itse tekstin sisältö voi olla välillä hankalaa määrittää. Alt-teksti lisätään img attribuuttiin seuraavasti
<img src="img_tytto.jpg" alt="Tyttö jolla on takki päällä" width="500" height="600">
Alt-tekstin voi myös lisät dynaamisesti ja tulen tekemään siitä omat juttunsa tulevaisuudessa.
Hyvä alt-teksti
Koska alt-tekstin lisääminen on helppoa joten se tulisi lisätä kuviin jotta internetin saavutettavuus paranee huomattavasti. Hyvän alt-tekstin laatiminen on välillä vähän haasteellista ja en lähde sitä tässä avaamaan itse sen enempää. Hyviä vinkkejä saa muunmuuassa WebAim:n alt-text oppaasta
Perus periaatteena kuitenkin on että
- logot tai koristeelliset kuvat ei tarvitse tekstiä alt atributtiiin vaan niihin voi lisätä vain
alt=“ ” - Alt teksti ei tulisi sisältää sanaa kuva. Tämä käy jo ilmi ruudunlukijalle
<img>tägin kautta. - Voit miettiä mitä tietoja jää saamatta jos kuvaa ei näe. Tai mikä on kuvan tarkoitus kontekstissa ja jos kuvan sisältö on jo kerrottu ympäröivässä tekstissä niin tätä ei tulisi toista alt-tekstissä.
Voit myös opiskella kuvatekstin laatimisesta saavutettavasti.fi sivustolla
Miksi alt-teksti
Suurin syy miksi alt-teksti tulisi lisätä on että käyttäjät jotka eivät kuvaa näe saavat sen oleellisen tiedon, joka välittyy kuvan näkeville käyttäjille. Ruudunlukija lukee ilman alt-tekstiä kuvan nimen, joka voi olla esimerkiksi “IMG200402833532.jpg” Tämä ei kerro mitään siitä mitä kuva esittää ja ruudunlukija lukee numerosarjan yksitellen tai kokonaislukuna asetuksista riippuen. Tämä on raskasta kuunneltavaa ja myöskin hämmentävää. Myös käyttäjältä saattaa jäädä jotain tärkeää tietoa saamatta jota kuvan kautta halutaan välittää.
Toinen iso syy on WCAG 2.1 standardit ja näistä heti ensimäinen WCAG 2.1 1.1.1 Ei-tekstuaalinen sisältö. Voi toki olla että sivustosi tai palvelusi ei kuulu WCAG standardien piiriin mutta miksi et tekisi siitä kuitenkin näiden standardien mukaista. Tämä parantaa muunmuuassa Googlen haku sijoitusta kun sivusto / palvelu on saavuttava ja vastaa WCAG standardeja.
Vaihtoehtoinen teksti onkin siis yleisin ja ehkä helpoin tapa parantaa sivuston saavutettavuutta. Miksi siis ei sitä tekisi?
Milloin alt-tekstiä ei tarvita?
Alt-tekstiä ei tarvita jos kuva tai iconi on koristeellinen eikä se tällöin tuo käyttäjällä sisältöä. Näitä ovat esimerkiksi erottimet tai iconit jotka ovat teksin edellä. Kuitenkin on hyvä muistaa että kun näille ei lisätä alt-teksiä ne tulisi piilottaa myöskin ruudunlukijoilta aria-hidden=true , jotta käyttäjän ei tarvitse näitä elementtejä selata.
Vastaa