Digitalisaation aikana saavutettavuutta ei saa jättää huomiotta. Yksi tapa helpottaa vammaisten pääsyä Internetin sisältöön on käyttää niin sanottuja vaihtoehtoisia tekstejä. Nämä tekstit on suunniteltu siten, että ne toistavat verkkosivuston sisällön sellaisessa muodossa, että vammaiset voivat ymmärtää sen. Mutta mitä vaihtoehtoinen teksti tarkalleen ottaen on? Kuka niitä tarvitsee? Ja miten sellaisen voi luoda?
Jotta verkkosivut ja verkkosisältö olisivat saavutettavia, muun muassa vaihtoehtoiset tekstit ovat erittäin tärkeitä, jotta vammaiset ihmiset voisivat käyttää niitä. Niillä välitetään tietoa ja toimintoja sokeille ja näkövammaisille sekä fyysisesti tai kognitiivisesti vammaisille henkilöille. Ne auttavat myös ymmärtämään grafiikkaa, valokuvia ja käyttöelementtejä. Näytönlukijat tai pistekirjoitusnäytöt käyttävät tekstivaihtoehtoja ja tekevät näistä elementeistä vammaisten henkilöiden saatavilla olevia.
Toisaalta niistä on hyötyä myös hakukoneoptimoinnissa. Tekstivaihtoehdot siirtävät kuvan tiedot hakukoneille. Tämä parantaa löydettävyyttä.
Miten luodaan tekstivaihtoehtoja?
Vastaus kysymykseen siitä, miten tekstivaihtoehto luodaan, on melko yksinkertainen: vaihtoehtoinen teksti on yksinkertaisesti lisättävä sellaisen elementin vastaavalle alueelle, joka on tarkoitus varustaa tällaisella tekstillä. Useimmat kehittäjät käyttävät tätä niin sanotussa CMS:ssä. Lyhenne CMS tulee sanoista Content Management System (sisällönhallintajärjestelmä). Tämä on ohjelmisto, jota käytetään verkkosisällön luomiseen ja hallintaan.
Tähän voidaan käyttää myös HTML-ohjelmointikieltä. Tällöin alt-attribuutti, joka tunnetaan myös nimellä alt-tag, tulee kuvaan mukaan. Se lisätään img-tagin sisään. Teksti kirjoitetaan alt-attribuutin sisäpuolelle, ja se tulostetaan sitten avustavan teknologian kautta.
Tämä ei kuitenkaan yksin riitä. Myöskään title-attribuuttia ei pidä unohtaa, sillä on olemassa ruudunlukuohjelmia, jotka eivät lue alt-attribuutin kuvausta vaan title-attribuutin kuvausta. Siksi on järkevää kirjoittaa sama teksti molempiin tunnisteisiin. Tällä on myös se tehtävä, että sisältö näkyy elementin lisätietona, kun hiiri siirretään alueen päälle.
On myös aria-attribuutti. Tarkemmin sanottuna aria-label-attribuutti tai aria-labelledby-attribuutti. Näitä käytetään painikkeiden tai lomakekenttien merkitsemiseen.
Erilaiset kuvatyypit
Maailmassa, jossa digitalisoituminen on lisääntymässä, ei riitä pelkkä tekstivaihtoehtojen luominen. On paljon tehokkaampaa kuvata eri kuvatyypit oikein, sillä ne eroavat toisistaan myös toiminnaltaan. Ne on kuitenkin ensin tunnistettava. Kuvaukset ovat hyödyttömiä, jos ne eivät vastaa kuvan toimintaa. Herääkin kysymys: Mitä kuvatyyppejä on olemassa? Ja mikä on paras tapa kuvata niitä?
Ensinnäkin sinun on syytä tutustua eri grafiikkatyyppien välisiin eroihin. On tärkeää ymmärtää grafiikan merkitys ja tarkoitus. Yleensä erotetaan toisistaan informatiivinen, toiminnallinen ja koristeellinen grafiikka. On olemassa myös niin sanottuja kirjasintyyppejä. Täällä kuvaus on hyvin yksinkertaista, kopioit yksinkertaisesti grafiikassa näkyvän tekstin.
Informatiivisia kuvia
Informatiivisten kuvien tapauksessa grafiikan näkyvä sisältö välitetään vaihtoehtoisilla teksteillä. Huomiota kiinnitetään kuvan viestin kannalta olennaisiin tietoihin. Esimerkki tästä on logon kuvaus. Siinä kuvataan lyhyesti, miltä logo näyttää ja kuka sen on suunnitellut.
Seuraavassa esimerkissä tekstivaihtoehto on integroitu HTML-logoon:
<img
src="logo.jpg"
alt="Eye-Able-logo. Se edustaa silmää."
title="Eye-Able-logo. Se edustaa silmää.">
</img>
Tässä kuvatiedosto upotetaan HTML:ään img-elementillä, jonka src-attribuutti määrittää kuvan lähteen. Grafiikan kuvaus lisätään pilkkuihin alt- ja title-attribuutteihin. Näin saadaan tekstisisältö "The Eye-Able logo. Se esittää silmää" tulostuu ruudunlukuohjelman tai pistekirjoitusnäytön kautta.
Tällä tavoin esteet poistetaan, ja kaikki avustavia teknologioita käyttävät ihmiset voivat ymmärtää, mitä tässä grafiikassa näytetään.
Kaaviot
Jos kyseessä on kaavio, tämä on kuitenkin aina päätettävä tapauskohtaisesti. Tämä riippuu usein kaavan tyypistä ja sen sisältämistä tiedoista. Jos kaavio sisältää vain vähän tietoa, se voidaan sisällyttää vaihtoehtoiseen tekstiin. Esimerkiksi: "Näyttää puolueiden vaalitulokset pylväsdiagrammina. Puolue A: 40 %, puolue B: 30 %, puolue C: 20 % jne.". Jos kuitenkin esitetään jotakin monimutkaisempaa tai pidempää, yksityiskohtaiset tiedot on suositeltavaa lisätä seuraavaan tekstiin. Vaihtoehtoisessa tekstissä olisi tällöin mainittava vain kaavion tyyppi ja tarkoitus. Lisäksi voitaisiin huomauttaa, että yksityiskohtaisempi kuvaus seuraa jäljempänä. Esimerkkinä voisi olla kaavio, jossa esitetään osavaltioiden väkiluvut. Sisältö voisi tällöin kuulua seuraavasti: "Näyttää 16 osavaltion väestömäärät pylväsdiagrammina. Huomautus: yksityiskohtaisempi kuvaus seuraa tekstissä".
Toiminnalliset kuvat
Seuraavaksi tarkastelemme toiminnallisia kuvia. Nämä ovat linkitettyjä grafiikoita. Ne jaetaan linkkeihin, elementteihin tai painikkeisiin. Tekstivaihtoehdoissa määritellään toiminto eikä se, mitä tunnistetaan. Sen sijaan määritetään , mihin linkki johtaa.
Tässä on esimerkki linkitetystä grafiikasta HTML-muodossa:
<a href=“https://services.eye-able.com/“>
<img src=“logo.jpg“
alt="Eye-Able-sivuston etusivu"
title="Eye-Able-sivuston etusivu"
</img>
</a>
HTML:ssä käytetään a-tunnistetta ja href-attribuuttia linkin luomiseen. Tässä tapauksessa luodaan linkki sivulle https://services.eye-able.com/. img-elementissä nähdään jälleen Eye-Able-logo, mutta tällä kertaa alt- ja title-attribuutit eivät kuvaa grafiikkaa vaan sen toimintaa. Sisältö "Eye-Able-homepage" tulostuu nyt avustavan teknologian kautta.
Sama pätee symboleihin. Jos käytetään esimerkiksi levykettä, kuvakkeen ulkoasulla ei ole merkitystä ruudunlukijan tulostuksen kannalta, koska se symboloi tallennustoimintoa. Hakusymbolit ovat toinen esimerkki. Sillä, onko se suurennuslasi vai ei, ei ole merkitystä. Sen takana oleva toiminto on paljon mielenkiintoisempi. Se symboloi hakuvaihtoehtoa tai haun aloittamista.
Tilanne on samanlainen painikkeiden kohdalla. Painiketta, jossa näkyy oikealle osoittava nuoli, ei pitäisi koskaan merkitä vaihtoehtoisessa tekstissä "oikealle osoittava nuoli". Näkevälle henkilölle on selvää, että seuraava sivu aukeaa, kun sitä napsauttaa, mutta sokealle se ei ole selvää. Tämä johtuu siitä, että he kuulevat "nuoli osoittaa oikealle" vain puheäänen kautta. Tämä ei ole riittävän selkeä tai ei osoita, että seuraava sivu avautuu, kun painiketta napsautetaan. Siksi on järkevämpää tarjota näille vaihtoehtoisia tekstejä "seuraavalle sivulle" tai "vieritä seuraavalle sivulle".
Koristeelliset kuvat
Toinen grafiikan tyyppi ovat koristekuvat. Niitä käytetään verkkosivuston koristeluun. Vaihtoehtoisten tekstien luominen on tässä tapauksessa hyvin yksinkertaista. Vaihtoehtoisen tekstin sisältö jätetään tyhjäksi. On tärkeää, että vaihtoehtoinen teksti -attribuutti on edelleen läsnä. Vain tekstin sisältö jätetään tässä tyhjäksi. Tämän seurauksena ruudunlukuohjelma ohittaa tämän epäolennaisen grafiikan tulosteessa.
Miten hyviä vaihtoehtoisia tekstejä kirjoitetaan?
Nyt kun eri grafiikat on esitelty, jäljellä on enää yksi kysymys: "Miten muotoilet optimaaliset vaihtoehtoiset tekstit?". Kun tunnet kaikki nämä kuvien väliset hienoudet ja erot, on vain muutama sääntö, joita voit noudattaa. Seuraavat vinkit voivat auttaa:
- Tekstivaihtoehdon alku:
Tässä yhteydessä on huolehdittava siitä, ettei päällekkäisyyksiä esiinny. Aloitus ei siis saisi alkaa sanoilla: "Kuva ...", "Grafiikka ...", "Valokuva ..." tai "Linkki". .... .... Ruudunlukuohjelmat tunnistavat ja tulostavat joka tapauksessa sen, onko kyseessä grafiikka vai linkki. Siksi tämä olisi jätettävä pois.
Tekstien pituus:
Vaihtoehtoisen tekstin pituutta ei ole määritelty. Yksi tai kaksi lausetta pitäisi kuitenkin riittää kuvaamaan grafiikkaa. Ihanteellinen pituus on 80 merkkiä. Miksi 80? Sokeat ihmiset lukevat näitä tekstejä usein pistekirjoitusnäytön avulla. Pistekirjoitusnäytöt voivat tuottaa 40-80 merkkiä kerrallaan. Selkeyden vuoksi on siis suositeltavaa noudattaa tätä rajaa. Teksti voi tietysti olla myös pidempi. Se ei kuitenkaan saisi ylittää 120 merkkiä.
Oikeinkirjoitus ja välimerkit:
Varmista, että oikeinkirjoitus on oikein. Jos sanassa on oikeinkirjoitusvirhe, siitä voi tulla nopeasti epäselvä, sillä ruudunlukuohjelma antaa tulosteen juuri siitä, mikä on tallennettu vaihtoehtoiseen tekstiin. Oikealla kieliopilla on myös tärkeä merkitys kuvien ymmärtämisessä. Mutta myös oikealla välimerkeillä on merkitystä. Virheelliset tai puuttuvat välimerkit vaikeuttavat kuulijan ymmärrystä grafiikasta. Tästä syystä oikeinkirjoitus ja kielioppi olisi tarkistettava ennen tekstisisällön lisäämistä.
Tekijänoikeus:
Monissa grafiikoissa on tekijänoikeusilmoitus. Mutta onko tämä tieto tärkeä kuvan ymmärtämisen kannalta? Vastaus on: Ei! Nämä tiedot eivät kiinnosta tekstivaihtoehtojen hyvän muotoilun kannalta, sillä kuvakuvaus sisältää vain tärkeimmät tiedot. Siksi nämä tiedot olisi jätettävä pois.
Palaute:
Voit nopeasti määrittää, onko kuvan kuvaus onnistunut. Mutta miten? Tähän kysymykseen on helppo vastata. Mitään suuria ponnisteluja ei tarvita. Sokean tai näkövammaisen henkilön antama lyhyt palaute antaa tietoa siitä, onko tekstisisältö muotoiltu järkevästi. Kaikki eivät kuitenkaan tunne näkövammaista henkilöä. Tämäkin voidaan ratkaista eri tavalla. Kaikille, jotka eivät ole vielä nähneet kuvaa, voidaan esittää kysymyksiä. Tämä voidaan tietysti tehdä kirjallisesti, mutta myös puhelimitse. Heti kun saadaan "myönteinen" vastaus, kuvaus on onnistunut.
Mitä oikeastaan tapahtuu, jos vaihtoehtoiset tekstit puuttuvat?
Kuvien vaihtoehtoisten tekstien puuttuminen voi olla erityisen ärsyttävää sokeille käyttäjille. Tällöin he eivät pystyisi tunnistamaan grafiikan sisältöä. Samalla ruudunlukuohjelma näyttäisi tällaisessa tapauksessa vain tiedoston nimen, esimerkiksi "img123.jpg". Tällainen kuvaus ei auttaisi ketään. Siksi kehittäjien tulisi aina varmistaa, että käytetään tekstisisältöä. On kuitenkin myös tärkeää tuntea erot, jotta kuvia ja grafiikkaa voidaan kuvata mielekkäällä tavalla. Avustavat teknologiat voivat sitten toistaa ne tekstivaihtoehtojen avulla. Näin myös Internet on helpommin kaikkien käytettävissä.
