Alt-tekstit kuntoon WordPressissä
Alt-teksti eli vaihtoehtoinen teksti auttaa ruudunlukijaa käyttäviä ihmisiä ymmärtämään, mitä kuvassa on tai mitä tarkoitusta kuva palvelee. Se voi myös auttaa hakukoneita ymmärtämään kuvan yhteyden sivun muuhun sisältöön.
Alt-teksti ei kuitenkaan tarkoita sitä, että jokainen kuva pitäisi kuvailla mahdollisimman tarkasti. Hyvä alt-teksti kertoo käyttäjälle sen tiedon tai toiminnon, jonka kuva välittää kyseisessä asiayhteydessä. Koristeelliselle kuvalle oikea ratkaisu voi olla tyhjä alt-teksti. (W3C)
Tässä oppaassa käydään läpi, mitä alt-tekstit ovat, milloin niitä tarvitaan ja miten ne lisätään WordPressissä.
Miksi alt-tekstejä tarvitaan?
Alt-teksti on HTML-kuvan alt-attribuuttiin lisätty tekstivastine. Sen tehtävä on välittää kuvan sisältämä olennainen tieto silloin, kun kuvaa ei nähdä tai sitä ei voida tulkita visuaalisesti.
Alt-tekstejä tarvitaan erityisesti saavutettavuuden vuoksi. Ruudunlukija voi lukea alt-tekstin ääneen, jolloin näkövammainen käyttäjä saa tiedon siitä, mitä kuva esittää tai mitä toiminto kuva käynnistää. W3C:n ohjeiden mukaan kuvan tekstivastineen pitäisi kuvata kuvan välittämä tieto tai toiminto, ei välttämättä jokaista näkyvää yksityiskohtaa. (W3C)
Alt-teksti voi auttaa myös silloin, kun kuva ei lataudu tai kun käyttäjä selaa sivua poikkeuksellisessa ympäristössä. Sitä ei silti pidä ajatella vain varatekstinä teknisiä virhetilanteita varten, vaan osana sivun saavutettavaa sisältöä.
Hakukoneet hyödyntävät sivun tekstisisältöä, kuvatekstejä, tiedostonimiä ja alt-tekstejä ymmärtääkseen, mitä kuva käsittelee. Kuvaileva alt-teksti voi tukea kuvien löytymistä Google Kuvahaussa, mutta sen ei pidä olla avainsanoilla täytetty SEO-kenttä. (Google for Developers)
Kuka alt-tekstejä käyttää?
Alt-teksti palvelee eri käyttäjiä eri tilanteissa.
Ruudunlukijaa käyttävät kävijät
Ruudunlukijaa käyttävä henkilö ei välttämättä näe kuvaa lainkaan. Alt-teksti voi silloin kertoa, mikä kuvassa on olennaista.
Jos artikkelissa on esimerkiksi kuva WordPressin Mediakirjastosta, alt-teksti voisi olla:
WordPressin Mediakirjasto, jossa muokataan kuvan vaihtoehtoista tekstiä.
Pelkkä alt-teksti:
kuva
ei kerro käyttäjälle mitään hyödyllistä.
Käyttäjät, joille kuva on toiminto
Jos kuva toimii linkkinä tai painikkeena, alt-tekstin pitäisi kertoa toiminto tai kohde, ei pelkästään kuvan ulkonäkö.
Esimerkiksi Facebook-kuvaketta sisältävän linkin alt-teksti ei ole parhaimmillaan:
Sininen Facebook-logo.
Parempi vaihtoehto on:
Siirry yrityksen Facebook-sivulle.
Toiminnallisissa kuvissa tekstivastineen pitäisi kuvata sitä, mitä linkki tai painike tekee. (W3C)
Hakukoneet ja kuvahaku
Hakukoneet eivät tulkitse kuvaa samalla tavalla kuin ihminen. Google suosittelee sijoittamaan kuvat niitä käsittelevän tekstin yhteyteen sekä käyttämään kuvaavia tiedostonimiä ja alt-tekstejä. (Google for Developers)
Alt-teksti ei yksin ratkaise hakusijoituksia. Se on yksi pieni osa kokonaisuutta, johon kuuluvat myös sivun aihe, kuvan ympärillä oleva teksti, kuvateksti, tiedostonimi ja sivun yleinen laatu.
Mitä alt-teksti tarkoittaa käytännössä?
Tavallinen HTML-kuva voi näyttää esimerkiksi tältä:
<img src="kissa-ikkunalaudalla.jpg" alt="Kissa istuu aurinkoisella ikkunalaudalla ja katsoo ulos">
Tässä alt-teksti on:
Kissa istuu aurinkoisella ikkunalaudalla ja katsoo ulos.
Alt-teksti ei ole sama asia kuin:
- kuvan tiedostonimi
- kuvan otsikko WordPressissä
- kuvateksti
- kuvan Description- eli Kuvaus-kenttä
title-attribuutti
Kuvateksti näkyy tavallisesti sivulla kaikille kävijöille. Alt-teksti on ensisijaisesti tekstivastine avustaville teknologioille ja tilanteisiin, joissa kuva ei välity käyttäjälle normaalisti.
Kuvan title-attribuuttia ei pidä käyttää alt-tekstin korvikkeena. Se ei ole luotettava saavutettavuusratkaisu, eikä se välttämättä näy tai toimi samalla tavalla eri laitteilla. Googlekin erottaa alt-attribuutin kuvan tekstivastineena ja title-attribuutin lisätietona. (Google for Developers)
Hyvän alt-tekstin tärkeimmät periaatteet
Hyvän alt-tekstin kirjoittamisessa tärkeintä ei ole tietty merkkimäärä, vaan kuvan tarkoitus.
Alt-teksti voi olla muutaman sanan mittainen tai kokonainen lause. Monimutkaisen kaavion tärkeintä viestiä voi olla mahdotonta kuvata yhdellä lyhyellä tekstillä, jolloin tarvitaan lisäksi tarkempi selitys sivun tekstissä, kuvatekstissä tai taulukossa. W3C ei määritä alt-tekstille yleistä 125 merkin rajaa. (W3C)
Hyvä alt-teksti on yleensä:
- kuvaileva mutta ytimekäs
- kirjoitettu luonnollisella kielellä
- asiayhteyteen sopiva
- kuvan tarkoitusta vastaava
- vapaa tarpeettomasta avainsanojen toistosta
Kuvaa se, mikä on olennaista
Alt-tekstin ei tarvitse luetella kaikkea kuvassa näkyvää.
Jos artikkeli käsittelee retkeilyvarusteita ja kuvassa näkyy rinkka tunturimaisemassa, alt-teksti voisi olla:
Vaellusreppu kivikkoisella tunturireitillä.
Jos taas artikkeli käsittelee juuri repun rintaremmiä ja kuvassa havainnollistetaan sen säätöä, parempi alt-teksti voisi olla:
Vaellusrepun rintaremmi säädettynä käyttäjän rinnan korkeudelle.
Sama kuva voi siis saada eri alt-tekstin riippuen siitä, mitä artikkelissa halutaan kuvalla kertoa.
Älä aloita sanoilla “kuva” tai “kuvitus”
Ruudunlukija kertoo yleensä jo, että kyseessä on kuva. Siksi tällaiset aloitukset ovat useimmiten tarpeettomia:
Kuva koirasta pellolla.
Kuvitus WordPressistä.
Valokuva kahvikupista.
Kirjoita mieluummin suoraan asia:
Kultainennoutaja juoksee vehreällä pellolla.
WordPressin artikkelieditori, jossa muokataan SEO-otsikkoa.
Valkoinen kahvikuppi puupöydällä.
Käytä avainsanoja vain silloin, kun ne kuuluvat luonnollisesti kuvaukseen
Alt-tekstin ei tarvitse sisältää sivun pääavainsanaa. Käytä avainsanaa vain silloin, kun se kuvaa aidosti kuvaa.
Huono esimerkki:
WordPress SEO hakukoneoptimointi Google SEO WordPress optimointi.
Parempi esimerkki:
WordPressin SEO-lisäosan näkymä, jossa muokataan artikkelin meta-kuvausta.
Google suosittelee kuvaavia ja hyödyllisiä alt-tekstejä sekä varoittaa tarpeettomasta avainsanojen täyttämisestä. (Google for Developers)
Milloin alt-teksti tarvitaan?
Kuvan tehtävä ratkaisee, millainen alt-teksti sille tarvitaan.
Informatiivinen kuva
Informatiivinen kuva välittää tietoa, jota ei muuten olisi sivulla.
Esimerkiksi:
- tuotekuva
- havainnollistava ohjekuva
- kartta
- kaavio
- kuvakaappaus
- henkilön esittelykuva
- ennen–jälkeen-kuva
- ohjeen vaihetta havainnollistava kuva
Tällaiselle kuvalle tarvitaan yleensä kuvaileva alt-teksti.
Esimerkki:
Sininen urheilukello, jossa on sininen silikoniranneke ja pyöreä harmaa kellotaulu.
Toiminnallinen kuva
Toiminnallinen kuva toimii painikkeena tai linkkinä.
Esimerkiksi:
- ostoskorikuvake
- hakukuvake
- PDF-latauskuvake
- sosiaalisen median kuvake
- kuvallinen painike
Alt-tekstin pitäisi kertoa käyttäjälle toiminto.
Esimerkkejä:
Avaa ostoskori.
Hae sivustolta.
Lataa hinnasto PDF-tiedostona.
Siirry Instagram-profiiliin.
Koristeellinen kuva
Koristeellinen kuva ei tuo sivulle mitään olennaista tietoa. Se voi olla esimerkiksi:
- taustakuva
- värillinen muoto
- visuaalinen jakoviiva
- tunnelmakuvitus, joka ei kerro tekstistä mitään uutta
- koristeellinen kuvake otsikon vieressä
Koristeelliselle HTML-kuvalle käytetään tyhjää alt-tekstiä:
<img src="koristeellinen-lehti.svg" alt="">
Tyhjä alt-teksti kertoo ruudunlukijalle, että kuva voidaan ohittaa. Alt-tekstiä ei pidä jättää kokonaan pois, sillä silloin avustava teknologia voi yrittää tulkita esimerkiksi tiedostonimeä. (W3C)
Monimutkainen kuva, kaavio tai kartta
Kaavio, infografiikka, kartta tai prosessikuva voi sisältää enemmän tietoa kuin yhteen alt-tekstiin mahtuu.
Tällöin alt-tekstin tehtävä on kertoa kuvan tärkein viesti, mutta yksityiskohtaisempi tieto pitää tarjota muualla sivulla.
Esimerkki alt-tekstistä:
Pylväskaavio näyttää verkkokaupan tilausmäärän kasvaneen 35 prosenttia vuoden aikana.
Jos kaavion tarkat luvut ovat tärkeitä, lisää ne myös tekstinä tai taulukkona kuvan läheisyyteen.
W3C suosittelee monimutkaisille kuville lyhyttä tekstivastinetta sekä erillistä tarkempaa selitystä, joka välittää saman tiedon kuin kuva. (W3C)
Milloin alt-teksti voi olla tyhjä?
Tyhjää alt-tekstiä käytetään, kun kuvan poistaminen ei veisi käyttäjältä mitään olennaista tietoa.
Kysy itseltäsi:
Jos kuva ei näkyisi lainkaan, jäisikö käyttäjältä puuttumaan jotain tärkeää?
Jos vastaus on ei, kuva voi olla koristeellinen.
Esimerkiksi artikkelissa voi olla metsäkuva pelkästään tunnelman vuoksi. Jos artikkelissa käsitellään WordPressin lisäosia eikä metsäkuva kerro aiheesta mitään, alt="" voi olla oikea ratkaisu.
Tyhjä alt-teksti ei kuitenkaan sovi kuvalle, joka:
- esittää tuotetta
- sisältää tekstiä
- selittää ohjeen vaiheen
- näyttää tärkeän käyttöliittymäkohdan
- toimii linkkinä
- sisältää tilastoja, kartan tai kaavion
- kertoo jotain, mitä ei muuten ole sivulla
Kuva, jossa on tekstiä
Jos kuvassa näkyvä teksti on tärkeä osa sisällön ymmärtämistä, teksti pitäisi yleensä olla saatavilla myös tavallisena HTML-tekstinä.
Esimerkiksi kampanjabannerissa ei kannata käyttää pelkkää kuvaa, jossa lukee:
Kesäale – kaikki tuotteet -30 %
Parempi ratkaisu on kirjoittaa tarjous myös sivun tekstiksi. Tällöin tarjous näkyy, toimii ruudunlukijalla, voidaan kopioida ja pysyy käytettävänä myös silloin, kun kuva ei lataudu.
Jos kuva on välttämätön ja sen sisältämä teksti pitää välittää, sisällytä olennainen teksti alt-tekstiin. W3C suosittelee, että tekstinä välitetty kuva sisältää vastaavan tekstin tekstivastineessa. (W3C)
Alt-tekstien lisääminen WordPressissä
WordPressissä alt-tekstit lisätään yleensä Mediakirjastossa tai Kuva-lohkon asetuksissa.
Uuden kuvan alt-teksti
Kun lisäät uuden kuvan:
- Siirry WordPressin hallinnassa kohtaan Media → Kirjasto.
- Avaa kuva, jota haluat muokata.
- Etsi kenttä Vaihtoehtoinen teksti tai Alt-teksti.
- Kirjoita kuvaa vastaava alt-teksti.
- Tallenna muutokset.
WordPressin Mediakirjastossa alt-teksti on kuvakohtainen tieto, jota käytetään saavutettavuuden tukena. (WordPress.org)
Alt-tekstin muokkaaminen artikkelieditorissa
Jos käytät lohkoeditoria:
- Avaa artikkeli tai sivu muokkaustilassa.
- Valitse Kuva-lohko.
- Avaa oikean reunan lohkoasetukset.
- Etsi alt-tekstikenttä.
- Muokkaa tekstiä ja päivitä sivu.
Kentän nimi voi vaihdella hieman WordPressin version, käyttöliittymän kielen, teeman tai käytetyn sivunrakentajan mukaan. Perusperiaate on silti sama: alt-teksti lisätään kuvalle, ei artikkelin normaaliin tekstikenttään.
Tarkista julkaistu sivu
Alt-teksti kannattaa tarkistaa myös julkaistulta sivulta.
Voit tehdä nopean tarkistuksen näin:
- Avaa sivu selaimessa.
- Napsauta kuvaa hiiren oikealla painikkeella.
- Valitse selaimen kehittäjätyökalut tai tarkastele sivun lähdekoodia.
- Etsi kuvan
<img>-elementti. - Tarkista, että siinä näkyy oikea
alt-attribuutti.
Esimerkiksi:
<img src="wordpress-mediakirjasto.jpg" alt="WordPressin Mediakirjasto, jossa muokataan kuvan vaihtoehtoista tekstiä">
Jos kuva on koristeellinen, tarkista että sen alt-teksti on aidosti tyhjä:
<img src="koristeellinen-kuvio.svg" alt="">
Huomaa, että joissakin teemoissa, välimuisti- tai kuvien optimointilisäosissa kuvan lopullinen HTML voi poiketa editorissa näkyvästä asetuksesta. Siksi julkaistun sivun tarkistus on hyödyllinen.
Yleisimmät virheet alt-teksteissä
Avainsanojen yletön toisto
Huono alt-teksti:
WordPress SEO WordPress hakukoneoptimointi SEO-lisäosa Google näkyvyys.
Tällainen teksti on epäselvä käyttäjälle eikä kuvaile kuvaa.
Parempi:
WordPressin SEO-lisäosan asetussivu, jossa muokataan sivun meta-kuvausta.
Tiedostonimen käyttäminen alt-tekstinä
Huono alt-teksti:
IMG_4728.jpg
tai:
wordpress-kuvat-01-uusi-lopullinen.jpg
Tiedostonimi voi olla hyvä lähtökohta kuvan järjestelyyn, mutta se ei yleensä ole riittävä tekstivastine.
Liian yleinen kuvaus
Huono alt-teksti:
Koira.
Parempi:
Ruskea koira juoksee metsäpolulla.
Paras vaihtoehto riippuu jälleen asiayhteydestä. Jos artikkeli käsittelee koiran valjaita, olennaisempi kuvaus voi olla:
Ruskea koira käyttää heijastavia valjaita metsäpolulla.
Liian pitkä alt-teksti
Alt-tekstiä ei pidä venyttää pitkän kuvailun tai tarinan mittaiseksi, jos vain yksi asia on olennaista.
Huono:
Kuvassa näkyy kaunis aurinkoinen kesäpäivä, jonka aikana vihreän metsän reunassa sijaitsevan järven rannalla on pieni punainen mökki ja sininen soutuvene…
Parempi:
Punainen mökki ja sininen soutuvene järven rannalla kesäpäivänä.
Jos kuva sisältää paljon olennaista tietoa, kuten kartan tai datakaavion, lisää tarkempi selitys sivun tekstiin sen sijaan, että kirjoitat kaiken alt-tekstiin.
Kuvan tarkoituksen unohtaminen
Jos kuva on linkki, pelkkä visuaalinen kuvaus ei riitä.
Huono:
PDF-kuvake.
Parempi:
Lataa WordPress SEO -tarkistuslista PDF-tiedostona.
Koristeellisen kuvan tarpeeton kuvaaminen
Huono alt-teksti:
Vihreä lehtikuvio sivun otsikon vieressä.
Jos kuviolla ei ole muuta tarkoitusta kuin koristelu, käytä:
alt=""
Näin ruudunlukijan käyttäjä ei joudu kuuntelemaan tietoa, joka ei auta ymmärtämään sivua.
Alt-tekstit ja hakukoneoptimointi
Alt-tekstit voivat tukea kuvien löydettävyyttä Googlessa, erityisesti kuvahaussa. Google suosittelee kuvaavia alt-tekstejä, selkeitä tiedostonimiä sekä kuvan sijoittamista lähelle sitä käsittelevää tekstiä. (Google for Developers)
Alt-teksti ei kuitenkaan ole oikotie parempiin sijoituksiin.
Hyvä käytäntö on:
- kuvaile kuva oikein
- käytä kuvalle kuvaavaa tiedostonimeä
- sijoita kuva asiayhteyteen
- lisää tarvittaessa näkyvä kuvateksti
- vältä avainsanojen täyttämistä
- pidä tärkeä tieto myös sivun tavallisena tekstinä
Esimerkiksi tällainen tiedostonimi on selkeä:
wordpress-alt-tekstin-lisaaminen.jpg
Ja sitä vastaava alt-teksti voisi olla:
WordPressin Kuva-lohko, jossa lisätään vaihtoehtoinen teksti.
Alt-tekstit ja saavutettavuus Suomessa
Alt-tekstit ovat tärkeä osa verkkosisällön saavutettavuutta. Suomessa saavutettavuusvaatimukset koskevat muun muassa julkisen sektorin digitaalisia palveluja sekä tiettyjä lain piirissä olevia yksityisiä digitaalisia palveluja.
Jos palvelu kuuluu saavutettavuusvaatimusten piiriin, kuvien ja infografiikoiden tekstivastineet ovat osa vaadittavaa saavutettavuutta. Velvollisuuksien tarkka soveltuminen riippuu palvelun tyypistä ja toimijasta, joten yrityksen tai organisaation kannattaa tarvittaessa tarkistaa oma tilanteensa virallisista ohjeista. (saavutettavuusvaatimukset.fi)
Vaikka sivusto ei kuuluisi lain velvoitteiden piiriin, alt-tekstien käyttö on hyvä käytäntö. Ne helpottavat sivuston käyttöä, tekevät sisällöstä ymmärrettävämpää ja vähentävät riskiä, että tärkeä tieto jää osalta kävijöistä saavuttamatta.
Työkalut alt-tekstien hallintaan
WordPressin oma Mediakirjasto riittää useimmille pienille sivustoille. Jos kuvia on paljon, voit käyttää apuna myös saavutettavuus- tai Mediakirjaston hallintatyökaluja.
Työkalu voi auttaa tunnistamaan:
- kuvat, joilta puuttuu alt-teksti
- kuvat, joiden alt-teksti on sama kuin tiedostonimi
- kuvat, joiden alt-teksti on tyhjä
- alt-tekstin sisältävät kuvat, joita ei käytetä sivuilla
- kuvien esiintymisen useilla eri sivuilla
Automaattisesti tai tekoälyllä luotu alt-teksti voi olla hyvä luonnos, mutta sitä ei pidä julkaista tarkistamatta. Työkalu ei aina tiedä, mikä kuvassa on olennaista juuri sillä sivulla, jolla kuvaa käytetään.
Esimerkiksi tekoäly voi kuvata kuvan näin:
Henkilö istuu tietokoneen ääressä.
Mutta artikkelissa kuva voi havainnollistaa erityisesti WordPressin hallintapaneelin asetusta. Tällöin parempi alt-teksti voisi olla:
Käyttäjä muokkaa WordPress-sivuston hakukonenäkyvyyden asetuksia.
Ihminen, joka ymmärtää kuvan asiayhteyden, pystyy yleensä kirjoittamaan paremman alt-tekstin kuin automaattinen työkalu.
Alt-tekstien tarkistuslista
Ennen kuin julkaiset kuvan, käy läpi nämä kysymykset:
- Välittääkö kuva tietoa, jota ei muuten ole sivulla?
- Toimiiko kuva linkkinä tai painikkeena?
- Onko kuva pelkästään koristeellinen?
- Kertooko alt-teksti kuvan olennaisen sisällön tai toiminnon?
- Onko alt-teksti kirjoitettu luonnollisella suomen kielellä?
- Onko avainsanojen käyttö aidosti perusteltua?
- Onko pitkän kaavion, kartan tai infografiikan tieto saatavilla myös tekstinä?
- Onko kuvaa käyttävä linkki ymmärrettävä ilman visuaalista kuvaketta?
- Onko koristeellisella kuvalla
alt=""? - Näkyykö julkaistulla sivulla oikea alt-teksti HTML-koodissa?
Yhteenveto
Alt-teksti on pieni mutta tärkeä osa WordPress-sivuston saavutettavuutta ja kuvien hakukonenäkyvyyttä.
Hyvä alt-teksti ei ole automaattisesti pitkä, avainsanoilla täytetty tai jokaisen yksityiskohdan luettelo. Se kertoo käyttäjälle sen, mikä kuvassa on olennaista juuri kyseisessä asiayhteydessä.
Muista erityisesti nämä periaatteet:
- informatiivinen kuva tarvitsee kuvailevan alt-tekstin
- toiminnallisen kuvan alt-tekstin pitää kertoa toiminto
- koristeellinen kuva tarvitsee yleensä tyhjän alt-tekstin
- monimutkainen kaavio tai kartta tarvitsee myös tarkemman tekstiselityksen
- alt-tekstiä ei pidä käyttää avainsanojen toisteluun
- WordPressin Mediakirjastossa alt-teksti lisätään kuvan tietoihin
- automaattisesti luotu alt-teksti kannattaa aina tarkistaa ennen julkaisua
Kun alt-tekstit tehdään huolellisesti, sivusto toimii paremmin kaikille kävijöille — myös niille, jotka eivät näe kuvia samalla tavalla kuin muut.