Kuinka esteetön kuvien lukeminen on mahdollista!

Jakamiseen kannustetaan:

Lasit makaavat kirjan päällä

Digitalisaation aikana saavutettavuutta ei pidä unohtaa. Yksi tapa helpottaa vammaisten pääsyä Internetin sisältöön on käyttää niin kutsuttuja vaihtoehtoisia tekstejä. Nämä tekstit on suunniteltu siten, että ne voivat välittää verkkosivuston sisällön tietyille vammaisille henkilöille tavalla, jonka he ymmärtävät. Mutta: Mikä tarkalleen on tällainen vaihtoehtoinen teksti? Kuka niitä tarvitsee?  Ja miten luoda sellainen?

Esteettömien verkkosivustojen ja verkkosisällön kehittämiseksi vaihtoehtoiset tekstit ovat erittäin tärkeitä vammaisten pääsyn helpottamiseksi. Ne tarjoavat tietoa ja toimintoja sokeille ja näkövammaisille sekä ihmisille, joilla on fyysisiä tai kognitiivisia rajoitteita. Ne auttavat myös ymmärtämään grafiikkaa, valokuvia ja säätimiä. Näytönlukuohjelmat tai pistekirjoitusnäytöt käyttävät tekstivastineita, joten nämä elementit ovat esteettömiä vammaisille.

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 meistä on tulossa yhä digitaalisempia, ei vain tekstivaihtoehtojen luominen riitä. Paljon tehokkaampi on erityyppisten kuvien oikea kuvaus, koska ne eroavat myös toiminnastaan. Nämä on kuitenkin ensin tunnustettava. Kuvaukset ovat merkityksettömiä, jos ne eivät pysty välittämään grafiikan tarkoitusta. Siksi herää kysymys: Millaisia kuvia on olemassa? Ja mikä on paras tapa muotoilla ne?

Ensinnäkin sinun tulee tutustua grafiikan yksilöllisiin eroihin. On tärkeää ymmärtää grafiikan merkitys ja tarkoitus. Yleensä erotetaan informatiivinen, toiminnallinen tai koristeellinen grafiikka. Lisäksi on olemassa ns. Tässä kuvaus on hyvin yksinkertainen, otat vain grafiikassa näkyvän tekstin.

Informatiivisia kuvia

Informatiivisten kuvien tapauksessa grafiikan näkyvä sisältö välitetään vaihtoehtoisten tekstien kautta. Tällöin kiinnitetään huomiota tietoihin, jotka ovat merkityksellisiä kuvalausunnon kannalta. Esimerkki tästä on logon kuvaus. Tässä on lyhyt kuvaus siitä, miltä logo näyttää ja keneltä logo on peräisin.

Seuraava esimerkki integroi tekstivaihtoehdon HTML-logoon:

Että Eye-Able Logo. Se edustaa silmää.

<img

src="logo.jpg"

alt=" Eye-Able Logo. Se edustaa silmää."

title=" Eye-Able Logo. Se edustaa silmää." >

</img>

Tässä HTML: n img-elementtiä käytetään sisällyttämään kuvatiedosto ja src-attribuutti määrittää kuvan lähteen. Grafiikan kuvaus lisätään alt- ja title-attribuuttien lainausmerkkeihin. Näin ollen tekstin sisältö "The Eye-Able Logo. Se edustaa silmää" näytönlukuohjelman tai pistenäytön kautta.

Tämä poistaa esteen ja antaa kaikille avustavien tekniikoiden käyttäjille mahdollisuuden oppia, mitä tässä grafiikassa näkyy.

Kaaviot

Jos tämä on kuitenkin kaavio, se on aina päätettävä erikseen. Tämä riippuu usein sen sisältämästä tyypistä ja tiedoista. Jos grafiikka koostuu vain muutamasta tiedosta, se voidaan sisällyttää vaihtoehtoiseen tekstiin. Esimerkiksi: "Näyttää puolueiden vaalitulokset pylväsdiagrammissa. Puolue A: 40%, puolue B: 30%, puolue C: 20% jne.". Jos kuitenkin esitetään jotain monimutkaista tai pidempää, on suositeltavaa lisätä yksityiskohtaiset tiedot seuraavaan tekstiin. Tässä vain kaavion tyyppi ja tarkoitus tulisi sisällyttää vaihtoehtoiseen tekstiin. Lisäksi voidaan huomauttaa, että alla on yksityiskohtaisempi kuvaus. Esimerkki tästä olisi, jos kaavio kuvaisi liittovaltioiden väestölukuja. Sitten sisältö kuuluisi seuraavasti: "Näyttää 16 liittovaltion väestöluvut pylväskaaviossa. Huomautus: Yksityiskohtainen kuvaus on kuvattu seuraavassa tekstissä."

Toiminnalliset kuvat

Seuraavaksi tarkastellaan toiminnallisia kuvia. Nämä ovat linkitettyjä grafiikoita. Ne on jaettu linkkeihin, elementteihin tai painikkeisiin. Tekstivastineissa funktio on määritelty eikä sitä, mitä voidaan tunnistaa. Sen sijaan määrität, 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>

A-Tag ja href-määritettä käytetään HTML:ssä linkin luomiseen. Tässä tapauksessa linkki sivulle https://eye-able.com/ luotu. Img-elementissä näet jälleen logon Eye-Able, mutta tällä kertaa alt- ja title-määritteet kuvaavat funktiota, eivät grafiikkaa. Joten nyt sisältö "Koti Eye-Able" on annettu.

Sama pätee symboleihin. Esimerkiksi, jos käytetään levykettä, kuvakkeen ulkonäkö ei ole merkityksellinen näytönlukijan ulostulossa, koska se symboloi tallennustoimintoa. Toinen esimerkki on hakukuvakkeet. Onko tämä suurennuslasi, ei ole väliä. Paljon mielenkiintoisempaa on toiminta sen takana. Tämä näyttää hakuvaihtoehdon tai haun alun.

Se on samanlainen painikkeiden kanssa. Painiketta, joka edustaa oikealla olevaa nuolta, ei saa koskaan tallentaa vaihtoehtoiseen tekstiin, jossa on "nuoli oikealle". Näkevälle henkilölle on selvää, että seuraava sivu avautuu, kun napsautat sitä, mutta ei sokeille. Koska he kuulevat vain "nuoli oikealle" äänilähdön kautta. Tämä ei ole riittävän selvää tai ei ole tunnistettavissa, että seuraava sivu avautuu, kun painike suoritetaan. Siksi on järkevämpää tallentaa nämä vaihtoehtoiset tekstit "seuraavalle sivulle" tai "jatkaa vierittämistä".

Koristeelliset kuvat

Toinen grafiikkatyyppi on koristeelliset kuvat. Näitä käytetään verkkosivuston sisustamiseen. Vaihtoehtoisten tekstien luomismenettely on tässä hyvin yksinkertainen. Tässä tekstivaihtoehdon sisältö jätetään tyhjäksi. On tärkeää, että vaihtoehtoisten tekstien attribuutti on edelleen olemassa. Vain tekstisisältö pysyy vapaana täällä. Tämä vaikuttaa siihen, että näytönlukija ohittaa tämän epäolennaisen grafiikan tulostettaessa.

Kuinka kirjoittaa hyviä tekstivaihtoehtoja?

Nyt kun eri grafiikat on esitetty, jäljellä on vain yksi kysymys: "Miten muotoilet optimaaliset vaihtoehtoiset tekstit?" Jos tiedät kaikki nämä hienovaraisuudet ja kuvien erot, on noudatettava vain muutamia sääntöjä. Tätä tarkoitusta varten voidaan noudattaa seuraavia ohjeita:

  1. Tekstivaihtoehdon alku:

    Tässä on tärkeää varmistaa, että kaksinkertaistumista ei tapahdu. Joten alun ei pitäisi alkaa: "Kuva ...", "Graafinen ...", "Valokuva ..." tai "Linkki"... alkaa. Näytönlukijat tunnistavat ja tuottavat joka tapauksessa, onko kyseessä grafiikka vai linkki. Siksi siitä olisi luovuttava.

  2. Tekstien pituus:

    Sitä, kuinka pitkä vaihtoehtoisen tekstin tulisi olla, ei ole määritetty. Mutta graafisen kuvaamiseksi yhden tai kahden lauseen pitäisi riittää. Ihannetapauksessa se on 80 merkkiä. Miksi 80? Sokeat ihmiset lukevat usein näitä tekstejä pistenäytöllä. Pistekirjoitusnäytöt voivat tuottaa 40–80 merkkiä kerrallaan. Paremman selkeyden vuoksi käyttäjille on siksi suositeltavaa kiinnittää huomiota tähän rajoitukseen. Tietenkin teksti voi joskus olla pidempi. Tämä ei kuitenkaan saa koskaan ylittää 120 merkkiä.

  3. Oikeinkirjoitus ja välimerkit:

    Kiinnitä huomiota oikeaan oikeinkirjoitukseen. Jos sana sisältää kirjoitusvirheen, voi nopeasti syntyä epäselvyyksiä, koska näytönlukuohjelma tuottaa täsmälleen sen, mitä vaihtoehtoiseen tekstiin on tallennettu. Samoin oikealla kieliopilla on tärkeä rooli kuvien ymmärtämisessä. Mutta oikeat välimerkit ovat myös merkityksellisiä. Virheelliset tai puuttuvat välimerkit vaikeuttavat kuuntelijoiden ymmärtämistä grafiikasta. Tästä syystä oikeinkirjoituksen ja kieliopin tarkistus on suoritettava ennen tekstisisällön lisäämistä.

  4. Tekijänoikeudet:

    Monilla grafiikoilla on tekijänoikeustodistus. Mutta ovatko nämä tiedot tärkeitä kuvan ymmärtämiseksi? Vastaus on ei! Tekstivaihtoehtojen hyvän muotoilun kannalta nämä tiedot eivät ole mielenkiintoisia, koska vain tärkeimmät sijoitetaan kuvan kuvaukseen. Siksi nämä tiedot olisi jätettävä pois.

  5. Palaute:

    Se, onnistuiko kuvan kuvaus, voidaan selvittää nopeasti. Kuinka? Kysymykseen on helppo vastata. Tämä ei vaadi paljon vaivaa. Se, onko tekstisisältö kirjoitettu mielekkäästi, selvitetään sokean tai näkövammaisen nopealla palautteella. Mutta kaikki eivät tunne henkilöä, jolla on silmävamma. Mutta tämä voidaan ratkaista myös eri tavalla. Kaikkia, joilla ei ole vielä ollut kuvaa edessään, voidaan haastatella täällä. Tietenkin tämä voidaan määrittää täällä kirjallisesti, mutta myös puhelimitse. Heti kun "positiivinen" palaute tulee tänne, kuvaus on onnistunut.

Mitä tapahtuu, jos vaihtoehtoisia tekstejä puuttuu?

Jos kuville ei ole vaihtoehtoisia tekstejä, tämä voi olla ärsyttävää, etenkin sokeille käyttäjille. Tämä tarkoittaisi, että he eivät huomaisi grafiikan sisältöä. Samaan aikaan tällaisessa tapauksessa Scrrenreader tulostaa vain tiedostonimen, kuten: "img123.jpg". Tällainen kuvaus ei auttaisi ketään. Siksi kehittäjien tulisi aina varmistaa, että he käyttävät tekstisisältöä. On kuitenkin myös tärkeää tietää erot, jotta pystyt kuvaamaan kuvia ja grafiikkaa mielekkäällä tavalla. Avustavat tekniikat voivat sitten toistaa tämän tekstivaihtoehtojen avulla. Tämä tekee Internetistä myös hieman helpommin kaikkien saatavilla.

Helppoa kaikille

Kiinnostunut? Autamme sinua mielellämme.

Yli 25 digitaalisen saavutettavuuden ympärillä olevaa toimintoa auttaa Eye-Able auttaa sinua myös vähentämään esteitäsi kestävästi. Näin tuot tietosi kaikkien saataville etkä sulje kävijöitä pois – lyhyesti: Avaat uuden kohderyhmän ilman suuria markkinointivolyymeja.

Kuvake näyttää helppokäyttöisyysluvun

Konsultaatio

Ei-sitova kuuleminen digitaalisesta saavutettavuudesta yleensä

Kuvake näyttää helppokäyttöisyysluvun

Analyysi

Keskustelu mahdollisista optimointimahdollisuuksista verkkosivustollasi

Kuvake näyttää helppokäyttöisyysluvun

Live-esittely

Tukiohjelmiston esittely suoraan verkkosivustollasi

Lisää artikkeleita

Jos haluat jotain enemmän:

Kölnin katedraali

Eye-Able saavuttaa Reinin

Eye-Able saavuttaa uusia rantoja. Kotikaupungistasi Würzburg am Mainista Reinille! Kölnin kaupunki antaa nyt oman panoksensa ja