Digitalisaation aikana saavutettavuutta ei saa jättää huomiotta. Yksi tapa helpottaa vammaisten pääsyä internetin sisältöön on niin sanotut vaihtoehtoiset tekstit. Nämä tekstit on suunniteltu siten, että ne esittävät verkkosivuston sisällön sellaisessa muodossa, että vammaiset voivat ymmärtää sen. Mutta: Mitä tällainen vaihtoehtoinen teksti tarkalleen ottaen on? Kuka niitä tarvitsee? Ja miten sellainen voidaan 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 heikentyneille henkilöille. Ne auttavat myös ymmärtämään grafiikkaa, kuvia ja hallintalaitteita. Näytönlukijat tai pistekirjoitusnäytöt käyttävät tekstivaihtoehtoja ja tekevät näin näistä elementeistä vammaisten henkilöiden saatavilla olevia.
Toisaalta ne ovat hyödyllisiä myös hakukoneoptimoinnissa. Tekstivastineet välittävät kuvan tiedot hakukoneille. Tämä parantaa löydettävyyttä.
Kuinka luoda tekstivaihtoehtoja?
Vastaus kysymykseen siitä, miten tekstivaihtoehto luodaan, on melko yksinkertainen: Tätä tarkoitusta varten vaihtoehtoinen teksti lisätään vain tällaisen tekstin mukana toimitetun elementin vastaavalle alueelle. Useimmat kehittäjät soveltavat tätä niin sanotussa CMS: ssä. Lyhenne CMS tarkoittaa Content Management Systemiä. Tämä on ohjelmisto, jota käytetään verkkosisällön luomiseen ja hallintaan.
Tähän voidaan käyttää myös HTML-ohjelmointikieltä. Siellä tulee alt-attribuutti tai alt-Tag kutsutaan peliin. Siellä se lisätään img-tunnisteeseen. Alt-attribuutin sisäalueelle kirjoitetaan teksti, joka sitten tulostetaan avustavien tekniikoiden kautta.
Mutta se ei yksin riitä. Myöskään title-attribuuttia ei pidä unohtaa, koska on näytönlukuohjelmia, jotka eivät lue alt-attribuutin kuvausta, vaan title-attribuutin kuvausta. Siksi on myös järkevää määrittää identtinen teksti molemmille tunnisteille. Lisäksi tämän tehtävänä on myös näyttää sisältö lisätietona elementistä, kun siirrät hiiren alueen päälle.
Lisäksi on aria-ominaisuus. Tarkemmin sanottuna aria-label-attribuutti tai aria-labeledby-attribuutti. Näitä käytetään painikkeiden tai lomakekenttien merkitsemiseen.
Erityyppiset kuvat
Maailmassa, jossa digitaalisuus lisääntyy jatkuvasti, pelkkä tekstivaihtoehtojen luominen ei riitä. On paljon tehokkaampaa kuvata eri kuvatyypit oikein, sillä ne eroavat toisistaan myös toiminnaltaan. Nämä on kuitenkin ensin tunnistettava. Kuvaukset ovat hyödyttömiä, jos ne eivät vastaa kuvan toimintaa. Herääkin kysymys: Millaisia kuvatyyppejä on olemassa? Ja mikä on paras tapa kuvata niitä?
Ensiksi on tutustuttava eri grafiikkatyyppien välisiin eroihin. On tärkeää ymmärtää grafiikan tarkoitus. Yleensä erotetaan toisistaan informatiivinen, toiminnallinen ja koristeellinen grafiikka. Lisäksi on olemassa niin sanottuja kirjasintyyppejä. Tässä kuvaus on hyvin yksinkertainen, otetaan yksinkertaisesti haltuun grafiikassa näkyvä teksti.
Informatiivisia kuvia
Jos kyseessä on informatiivinen kuva, grafiikan näkyvä sisältö välitetään vaihtoehtoisilla teksteillä. Huomiota kiinnitetään kuvan viestin kannalta olennaisiin tietoihin. Esimerkki tästä on logon kuvaus. Tässä kuvataan lyhyesti, miltä logo näyttää ja keneltä se on peräisin.
Seuraava esimerkki integroi tekstivaihtoehdon 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 osoittaa 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äkyy.
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: "Esittää puolueiden vaalitulokset pylväsdiagrammina. Puolue A: 40 %, puolue B: 30 %, puolue C: 20 % jne.". Jos kuitenkin esitetään jotakin monimutkaisempaa tai pidempää, yksityiskohtaiset tiedot kannattaa sisällyttää seuraavaan tekstiin. Vaihtoehtoisessa tekstissä olisi tällöin mainittava ainoastaan kaavion tyyppi ja tarkoitus. Lisäksi voitaisiin mainita, että yksityiskohtaisempi kuvaus seuraa jäljempänä. Esimerkkinä voisi olla kaavio, jossa esitetään osavaltioiden väestömäärät. Sisältö kuuluisi tällöin seuraavasti: "Esittää 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ä näkyy. Sen sijaan määritellään , mihin linkki johtaa.
Tässä on esimerkki HTML-muodossa linkitetystä grafiikasta:
<a href=“https://eye-able.com/“>
<img src=“logo.jpg“
alt="Aloitussivu Eye-Able"
title="Kotisivu Eye-Able"
</img>
</a>
HTML:ssä käytetään a-Tag ja href-attribuuttia linkin luomiseen. Tässä tapauksessa linkki luodaan sivulle https://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. Näin ollen sisältö "Home page of Eye-Able" tulostuu nyt avustavan teknologian kautta.
Sama pätee symboleihin. Jos käytetään esimerkiksi levykettä, kuvakkeen ulkoasulla ei ole merkitystä ruudunlukuohjelman avulla tapahtuvan tulostuksen kannalta, koska se symboloi tallennustoimintoa. Toinen esimerkki ovat hakukuvakkeet. Sillä, onko se suurennuslasi vai ei, ei ole merkitystä. Paljon mielenkiintoisempaa on sen taustalla oleva toiminta. Ne edustavat hakuvaihtoehtoa tai haun aloittamista.
Sama koskee painikkeita. Painiketta, joka esittää oikealle osoittavaa nuolta, ei pitäisi koskaan korostaa vaihtoehtoisessa tekstissä sanalla "nuoli osoittaa oikealle". Näkevälle henkilölle on selvää, että seuraava sivu avautuu, kun sitä napsauttaa, mutta sokealle ei. Tämä johtuu siitä, että he kuulevat "nuoli osoittaa oikealle" vain äänitulosteen kautta. Tämä ei ole riittävän selkeä tai siitä ei käy ilmi, että seuraava sivu avautuu, kun painiketta painetaan. Siksi on järkevämpää tarjota näille vaihtoehtoisia tekstejä "siirry seuraavalle sivulle" tai "käänny seuraavalle sivulle".
Koristeelliset kuvat
Toinen grafiikan tyyppi ovat koristekuvat. Niitä käytetään verkkosivun koristeluun. Vaihtoehtoisten tekstien luominen on tässä tapauksessa hyvin yksinkertaista. Tässä vaihtoehtoisen tekstin sisältö jätetään tyhjäksi. On tärkeää, että vaihtoehtoisten tekstien attribuutti on edelleen läsnä. Vain tekstin sisältö jätetään tässä tyhjäksi. Tuloksena on, että ruudunlukuohjelma ohittaa tämän epäolennaisen grafiikan tulosteessa.
Miten hyviä vaihtoehtoisia tekstejä kirjoitetaan?
Nyt kun erilaiset grafiikat on esitelty, jäljellä on enää yksi kysymys: "Miten muotoilet optimaaliset vaihtoehtoiset tekstit?". Kun tunnet kaikki nämä kuvien hienoudet ja erot, on vain muutama sääntö, joita on noudatettava. Seuraavat vinkit voivat auttaa:
- Tekstivaihtoehdon alku:
Tässä yhteydessä on varottava päällekkäisyyksiä. Aloitus ei siis saisi alkaa sanoilla: "Kuva ...", "Graafinen ...", "Valokuva ..." tai "Linkki" .... ..... Ruudunlukuohjelmat tunnistavat ja tulostavat joka tapauksessa sen, onko kyseessä grafiikka vai linkki. Siksi tästä olisi luovuttava.
Tekstien pituus:
Vaihtoehtoisen tekstin pituutta ei ole määritelty. Grafiikan kuvaukseen riittää kuitenkin yhdestä kahteen virkettä. Ihannetapauksessa 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:
Oikea oikeinkirjoitus on varmistettava. Jos sanassa on kirjoitusvirhe, se voi johtaa nopeasti epäselvyyteen, sillä ruudunlukuohjelma antaa täsmälleen sen, 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ämän vuoksi oikeinkirjoitus ja kielioppi olisi tarkistettava ennen tekstisisällön lisäämistä.
Tekijänoikeudet:
Monissa grafiikoissa on tekijänoikeusilmoitus. Mutta onko tämä tieto tärkeä kuvan ymmärtämisen kannalta? Vastaus on: Ei! Tekstivaihtoehtojen hyvän muotoilun kannalta nämä tiedot ovat epäkiinnostavia, koska kuvakuvaukseen kirjoitetaan vain tärkeimmät asiat. Siksi nämä tiedot on jätettävä pois.
Palaute:
On helppo määrittää, onko kuvakuvaus onnistunut. Mutta miten? Tähän kysymykseen on helppo vastata. Se ei vaadi paljon vaivaa. 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ä voidaan ratkaista toisella tavalla. Keneltä tahansa, joka ei ole vielä nähnyt kuvaa, voidaan kysyä. Tämä voidaan tietysti tehdä kirjallisesti, mutta myös puhelimitse. Heti kun saadaan "myönteinen" palaute, kuvaus on onnistunut.
Mitä tapahtuu, jos vaihtoehtoisia tekstejä puuttuu?
Kuvien vaihtoehtoisten tekstien puuttuminen voi olla erityisen ärsyttävää sokeille käyttäjille. Tämä tarkoittaisi, että he eivät pystyisi näkemään grafiikan sisältöä. Samalla ruudunlukuohjelma näyttäisi tällaisessa tapauksessa vain tiedoston nimen, esimerkiksi "img123.jpg". Tällainen kuvaus ei auttaisi ketään. Kehittäjien tulisi siis 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 renderöidä ne tekstivaihtoehtojen avulla. Tämä tekee myös internetistä hieman helpommin kaikkien ulottuvilla olevan.
