Tekstivastineet

 

Kuvasisältö voi olla valokuvia, kuvituksia, piirroksia, kuvakkeita, kaavioita, jne. Kuvasisällöllä voi olla jompikumpi seuraavasta kahdesta roolista:

  • Informatiivinen: kun se välittää tietoa, ja sitä tietoa ei anneta ympäröivässä tekstissä.
  • Kuvitus: kun se ei välitä tietoa; tai jos se välittää tietoa niin sama tieto löytyy jo ympäröivässä tekstissä.

Informatiivisella kuvasisällöllä on oltava sopiva tekstivastine, jonka ruudunlukijat voivat sitten ilmoittaa. Tekstivastineet voidaan tarjota monin tavoin:

  • Käyttäen alt attribuuttia (elementeille, joilla on sille tuki, eli <img>, <area>, ja <input type="image"> elementit).
  • Käyttäen ARIA-pohjaiset lähestymistavat, lähinnä aria-label ja aria-labelledby.
  • Käyttäen visuaalisesti piilotettua tekstiä.

 Yleisiä vinkkejä

  • Sinun ei tarvitse käyttää sanoja “kuva” tai “tämä kuvastaa”. Ruudunlukija ilmoittaa jo, että kyseessä on <img>-elementti.
  • Älä kuvaile vain kuvan sisältöä kirjaimellisesti tai yleisesti, vaan pyri mahdollisimman yksityiskohtaiseen kuvaukseen.
  • Kysy itseltäsi: mitä tietoa haluan välittää tällä kuvalla?
  • Kuvittele, että vieressäsi istuu sokea ihminen. Miten kerrot hänelle kuvan välittämän tiedon?

Esimerkki: Rio 2016 paralympialaisten pyörätuolitenniksen voittajaa koskevan artikkelin yhteydessä ei kannata kirjoittaa tekstivastineeksi “nainen pyörätuolissa”. Sen sijaan teksti “hollantilainen pelaaja Jiske Griffioen juhlii voitettuaan kultamitalin naisten yksinpelissä vuoden 2016 kesäparalympiakisoissa Rio de Janeirossa, Brasiliassa”, kertoo huomattavasti tarkemmin kuvan sisällön tekstimuodossa.

Tekstivastineet riippuvat asiayhteydestä

Otetaan esimerkkinä Wunder-logo, joka löytyy <img>-elementtinä:

  • Jos se on osa ruudukkoa, jossa näytetään kaikkien projektia tukeneiden yritysten logoja, sinun tulisi käyttääalt="Wunder"ja samalla tavalla myös muut yritykset ja niiden logot. Silloin ruudunlukija tulee ja lukee: “Tukijat: Wunder, Elisa, Google …”.
  • Jos haluat kertoa, että kyseessä on logo, käytäalt="Wunder logo".
  • Jos haluat kertoa miltä logo näyttää (esim. suunnittelukeskustelussa), kirjoita esim. näin: alt="The Wunder logo: tyylikäs ja eloisa violetti porkkana, jolla on kolme päällekkäistä lehteä. Yleisilmeeltään pyöreähkö muoto muistuttaa juurikasta tai retiisiä".

Otetaan toinen esimerkki. Joskus käytämme korttilinkkejä, jotka sisältävät <img>-elementin ja otsikon. Kun napsautamme linkkiä, siirrymme toiselle sivulle, jolla on sama kuva.

  • Kortissa kuva on kuvituskuva. Tässä tapauksessa meidän tulisi käyttää tyhjää tekstivastinetta (alt=""), jotta ruudunlukijat eivät lukisi kuvaa tässä kohtaa.
  • Artikkelisivulla kuva voi olla informatiivinen tai kuvituskuva. Vinkki: jos käytät jonkinlaista ostettua arkistokuvaa, se on todennäköisesti kuvituskuva.

Arkkitehtien, sisällönsuunnittelijoiden, sisällöntuottajien ja kehittäjien on erittäin suositeltavaa tehdä yhteistyötä varmistaakseen hyvät ja yhdenmukaiset tekstivastinekäytännnöt.

Kieliversiot, ruudunlukijat ja tekstivastineet 

Monikieliset tilanteet johtavat valitettavasti virheelliseen kielikäyttäytymiseen kaikissa testaamissamme ruudunlukija-, käyttöjärjestelmä- ja selainyhdistelmissä, jopa silloin, kun sivun tai sivun osan kieli on asetettu oikein. Esimerkki monikielisestä tilanteesta on, kun ruudunlukijan käyttöliittymä on suomeksi ja verkkosisältö on englanniksi; tässä yhteydessä ruudunlukija saattaa lukea englanninkielisen tekstin suomenkielisellä äänellä (tai ”aksentilla”).

Yksi yleisimmistä virheistä on, että HTML-määritteenä annettu tekstisisältö (esimerkiksi alt tai aria-label:inmukaan toimitetut tekstivastineet) ilmoitetaan usein väärällä äänellä. Vaikka emme voi tehdä mitään <img>– tai muille elementeille, joissa vaaditaan alt-atribuuttia, voimme kuitenkin vaikuttaa muihin elementteihin:

  • Voimme tarjota tekstivastineen käyttämällä ARIA-pohjaisia ​​lähestymistapoja. Tätä on helpompi toteuttaa ja ylläpitää, mutta se luetaan usein väärällä äänellä (yli 50% ajasta Xurxen testeissä).
  • Vaihtoehtoisesti voimme tarjota tekstivastineen visuaalisesti piilotettuna tekstinä, joka on sijoitettu kyseisen elementin sisään. Tätä on vähän vaikeampi toteuttaa, mutta se luetaan yleensä oikealla äänellä (melkein 100% tapauksista Xurxen teisteissä).

Tutustu myös: