Kuvien vaihtoehtoiset tekstit Silverstripessä

Tiivistelmä

Kuvat havainnollistavat ohjeita, esittelevät tuotteita ja tekevät verkkosivusta kiinnostavan. Kaikki kävijät eivät kuitenkaan näe niitä. Osa käyttää ruudunlukijaa, ja joskus kuvan lataaminen epäonnistuu. Siksi kuvan…

Vaihtoehtoinen teksti eli alt-teksti kuuluu saavutettavan verkkosisällön perusteisiin. Silverstripessä sen kirjoittaminen kannattaa ottaa osaksi tavallista sisällöntuotantoa: kun lisäät kuvan, mieti samalla, mitä kävijän pitäisi siitä ymmärtää.

Hyvä vaihtoehtoinen teksti ei edellytä teknistä osaamista. Tärkeintä on tunnistaa kuvan tehtävä ja ilmaista se selkeästi. Tässä oppaassa käydään läpi tekstin lisääminen, sopivan kuvauksen kirjoittaminen ja tavallisimmat virheet.

Mitä kuvan vaihtoehtoinen teksti tarkoittaa?

Vaihtoehtoinen teksti on kuvaan liitettävä tekstivastine. Verkkosivun HTML-rakenteessa se tallennetaan tavallisesti kuvan alt-attribuuttiin. Ruudunlukija voi välittää sen käyttäjälle kuvan kohdalla.

Tekstin tarkoituksena on kertoa kuvan olennainen sisältö tai tehtävä. Esimerkiksi rakennuksen sisäänkäynnistä otetussa kuvassa tärkeää voi olla oven vieressä kulkeva luiska. Taivaan väri tai seinän tiilikuvio eivät välttämättä auta kävijää lainkaan.

Vaihtoehtoisen tekstin sisältö riippuu siis asiayhteydestä. Samaa valokuvaa voidaan käyttää eri sivuilla eri tarkoituksiin, jolloin myös sopiva kuvaus voi muuttua. W3C:n kuvaohje korostaa juuri kuvan merkitystä siinä yhteydessä, jossa se esitetään.

Hyödyllinen lähtökysymys on: mitä tietoa lukijalta puuttuisi, jos kuva poistettaisiin?

Näin lisäät vaihtoehtoisen tekstin Silverstripessä

Silverstripen hallintanäkymä vaihtelee version ja sivuston toteutuksen mukaan. Tavallisessa tekstieditorissa kuva lisätään tiedostojen lisäyspainikkeella. Kuvan asetuksia voidaan avata valitsemalla kuva ja käyttämällä samaa painiketta uudelleen. Silverstripen kuvanlisäysohje esittelee tämän toimintatavan.

Etene omalla sivustollasi seuraavasti:

Avaa hallintapaneelista muokattava sivu.
Valitse tekstieditorissa oleva kuva tai lisää uusi kuva tiedostoista.
Avaa kuvan muokkausasetukset.
Etsi vaihtoehtoisen tekstin kenttä. Sen nimi voi olla esimerkiksi Alternative text tai Alt text.
Kirjoita kuvan käyttötarkoitukseen sopiva kuvaus.
Hyväksy kuvan muutokset ja tallenna sivu.
Tarkista lopputulos ja julkaise muutokset sivustosi julkaisukäytännön mukaisesti.

Jos kuva lisätään erillisessä sisältölohkossa, kuvakarusellissa tai sivutyypin omassa kentässä, vaihtoehtoisen tekstin asetus voi sijaita muualla. Pelkkä tiedoston nimen muuttaminen ei takaa alt-tekstin muuttumista.

Jos sopivaa kenttää ei löydy, pyydä sivuston ylläpitäjää selvittämään, mistä kyseisen kuvan tekstivastine muodostuu.

Kirjoita kuvan tärkein asia ensin

Toimiva vaihtoehtoinen teksti on yleensä lyhyt ja täsmällinen. Sen ei tarvitse kuvailla jokaista näkyvää yksityiskohtaa. Keskity siihen, miksi kuva on mukana sivulla.

Vertaa esimerkiksi seuraavia kuvauksia:

Epämääräinen: ”Tietokone.”
Tarkempi: ”Kannettavan tietokoneen vasemmassa reunassa on kaksi USB-C-liitäntää.”
Epämääräinen: ”Kuvakaappaus hallinnasta.”
Tarkempi: ”Silverstripen sivupuussa Yhteystiedot-sivu on siirretty Yritys-sivun alle.”
Epämääräinen: ”Rakennus ulkoa.”
Tarkempi: ”Kirjaston pääsisäänkäynnille johtaa portaat ja niiden vieressä kulkeva luiska.”

Tarkempi kuvaus auttaa silloin, kun mainitut yksityiskohdat ovat sivun aiheen kannalta olennaisia. Jos artikkeli käsittelee kannettavan näppäimistöä, liitäntöjen luetteleminen ei palvele lukijaa.

Kirjoita luonnollista suomea ja käytä tarvittaessa kokonaista virkettä. Vältä arvauksia: älä nimeä kuvassa näkyvää henkilöä, paikkaa tai laitetta, ellet tiedä tunnistuksen olevan oikea.

Kuinka pitkä alt-tekstin pitäisi olla?

Kaikkiin kuviin sopivaa yhtä merkkimäärää ei ole. Yksinkertaisen kuvan merkityksen voi usein ilmaista muutamalla sanalla, kun taas ohjekuva saattaa tarvita kokonaisen virkkeen.

Hyvä käytännön tavoite on pitää kuvaus niin lyhyenä kuin asian ymmärtäminen sallii. Jos teksti alkaa muistuttaa pitkää kappaletta, mieti, pitäisikö osa tiedosta kirjoittaa sivun varsinaiseen sisältöön.

Esimerkiksi palvelimen asennuskuvasta ei kannata tehdä vaihtoehtoista tekstiä, jossa selostetaan koko asennusprosessi. Kirjoita työvaiheet näkyväksi ohjeeksi ja kuvaile kuvasta vain sen havainnollistama asia.

Voit arvioida omaa tekstiäsi lukemalla sen ääneen. Onko siinä jokin sana, jonka poistaminen ei muuta merkitystä? Tiivistä sellaiset kohdat, mutta säilytä tieto, jota lukija tarvitsee.

Koristekuva tarvitsee erilaisen käsittelyn

Kaikki kuvat eivät välitä omaa tietoa. Sivun tunnelmaa luova abstrakti kuvio tai tekstin vieressä oleva pelkkä koriste voi olla merkitykseltään sellainen, ettei sitä tarvitse kuvailla ruudunlukijalle.

Koristeellisella HTML-kuvalla käytetään tyhjää vaihtoehtoista tekstiä:

alt=""

Tyhjä arvo ja kokonaan puuttuva alt-attribuutti ovat eri asioita. Jos attribuutti puuttuu, ruudunlukija saattaa lukea esimerkiksi kuvan tiedostonimen. W3C:n koristekuvaohje suosittelee koristekuville tyhjää tekstivastinetta.

Älä kirjoita kenttään sanoja ”koristekuva”, ”tyhjä” tai pelkkää välilyöntiä. Niistä ei ole kävijälle hyötyä.

Silverstripessä kannattaa varmistaa, mitä tyhjä kenttä tuottaa julkaistulla sivulla. Sivuston toteutus voi täydentää tyhjään kohtaan automaattisesti muun arvon. Tarvittaessa ylläpitäjä voi tarkistaa, että koristekuvan lopullinen merkintä on oikeasti tyhjä.

Linkkinä toimiva kuva kertoo määränpään

Jos kuva toimii linkkinä tai painikkeena, sen vaihtoehtoisessa tekstissä olennaista on toiminto. Kävijän pitää ymmärtää, mitä kuvan valitseminen tekee.

Esimerkiksi pelkän kuvana esitetyn latauslinkin tekstiksi sopii ”Lataa asennusohje PDF-tiedostona”. Kuvaus ”punainen nuoli” kertoo ulkonäöstä, mutta jättää linkin tarkoituksen epäselväksi.

Samoin etusivulle johtavan logolinkin tekstivastine voi olla ”Yrityksen nimi – etusivu”. Jos samassa linkissä on jo näkyvä, riittävä teksti, kuvan oma kuvaus voi olla tarpeeton. Olennaista on arvioida koko linkkiä, ei vain kuvaa erillisenä elementtinä. W3C:n toiminnallisten kuvien ohje käsittelee näitä tilanteita.

Tarkista erityisesti kuvakkeet, jotka avaavat haun, valikon tai ostoskorin. Niiden ymmärrettävä nimeäminen voi kuulua sivuston kehittäjän vastuulle.

Alt-teksti, kuvateksti ja tiedostonimi ovat eri asioita

Kuvan yhteydessä voi olla monta tekstikenttää, joiden tarkoitukset poikkeavat toisistaan.

Vaihtoehtoinen teksti välittää kuvan olennaisen tiedon tai toiminnon.
Kuvateksti näkyy sivulla ja voi kertoa esimerkiksi kuvauspaikan, ajankohdan tai kuvaajan.
Tiedostonimi auttaa tunnistamaan kuvatiedoston tiedostokirjastossa.
Otsikkokenttä voi palvella hallintaa tai sivustokohtaista esitystapaa.

Esimerkiksi tiedoston nimi voisi olla palvelinkaappi-kaapelointi.webp. Kuvateksti voisi kertoa, että kaapelointi uusittiin huoltotyön yhteydessä. Alt-tekstissä puolestaan voidaan kuvailla kaapelien värikoodausta, jos kuva havainnollistaa juuri sitä.

Älä täytä jokaiseen kenttään automaattisesti samaa lausetta. Mieti, mitä kukin teksti auttaa lukijaa tai sisällön ylläpitäjää tekemään.

Kaaviot ja kuvakaappaukset tarvitsevat usein lisäselityksen

Kaavion tietosisältö ei yleensä mahdu lyhyeen vaihtoehtoiseen tekstiin. Lukija voi tarvita myös lukuarvot, vertailukohdat ja keskeisen johtopäätöksen.

Tällöin alt-teksti voi kertoa, mitä kaavio esittää, ja ohjata sen yhteydessä olevaan selitykseen. Varsinaiset tiedot kannattaa julkaista tavallisena tekstinä tai taulukkona. W3C:n monimutkaisia kuvia käsittelevä ohje suosittelee lyhyen kuvauksen rinnalle kattavampaa tekstivastinetta.

Myös Silverstripe-ohjeiden kuvakaappauksissa kannattaa käyttää harkintaa. Kirjoita tärkeät painikkeiden nimet ja työvaiheet artikkelin tekstiin. Kävijän pitäisi pystyä seuraamaan ohjetta ilman, että hänen täytyy lukea pienikokoista tekstiä kuvasta.

Jos kuvassa on virheilmoitus, lisää sen olennainen sisältö myös sivulle tekstinä. Samalla viestin kopioiminen ja etsiminen helpottuvat.

Vaihtoehtoinen teksti tukee myös hakukoneiden ymmärrystä

Hakukoneet käyttävät vaihtoehtoista tekstiä yhtenä keinona kuvan sisällön ymmärtämiseen. Google tarkastelee sen lisäksi esimerkiksi sivun muuta sisältöä. Googlen kuvaohje suosittelee kuvaavia tekstejä ja varoittaa avainsanojen liiallisesta toistamisesta.

Kirjoita siis ensisijaisesti kävijälle. Jos kuva esittää Silverstripen sivupuuta, aiheeseen liittyvä termi kuuluu kuvaukseen luontevasti. Samaa avainsanaa ei tarvitse toistaa useita kertoja tai lisätä jokaiseen kuvaan.

Hyvä alt-teksti ei yksin takaa hakukonenäkyvyyttä. Sen arvo syntyy ennen kaikkea siitä, että kuvan merkitys välittyy ymmärrettävästi.

Tee tarkistamisesta osa julkaisurutiinia

Vaihtoehtoiset tekstit on helpointa kirjoittaa samalla, kun kuvat lisätään. Silloin niiden käyttötarkoitus on vielä tuoreessa muistissa.

Tarkista ennen julkaisua:

Onko tietoa välittävillä kuvilla tarkoitukseen sopiva kuvaus?
Onko koristekuvat käsitelty tyhjällä tekstivastineella?
Kertovatko kuvalinkit toiminnon tai määränpään?
Löytyvätkö kaavioiden keskeiset tiedot myös tekstinä?
Vastaavatko kuvaukset nykyisiä kuvia?

Pelkkä visuaalinen esikatselu ei osoita, että alt-tekstit ovat oikein. Epäselvissä tilanteissa pyydä ylläpitäjää tarkistamaan sivun HTML tai testaa sisältö ruudunlukijalla.

Muista tarkistaa kuvaus myös kuvaa vaihtaessasi. Vanhan kuvakaappauksen teksti voi jäädä paikalleen, vaikka uusi kuva esittäisi eri näkymää. Pieni tarkistus pitää ohjeen johdonmukaisena.

Liittyvät kategoriat

Artikkeleita 2 010 artikkelia IT 1 936 artikkelia Kotisivut 1 191 artikkelia Nettisivut 1 192 artikkelia Silverstripe CMS 25 artikkelia Verkkokehitys 1 251 artikkelia Verkkosivut 1 391 artikkelia Verkkotyökalu 1 163 artikkelia