Tekstivastineet Kuvat ja multimediaelementit: Opas saavutettavuuden parantamiseen
Tekstivastineet ovat olennainen osa verkkosivustojen saavutettavuutta ja käyttökokemusta. Ne tarjoavat vaihtoehtoisen tavan ymmärtää kuvat ja multimediaelementit, erityisesti niille käyttäjille, jotka käyttävät ruudunlukijoita tai joilla on muita rajoitteita, jotka estävät visuaalisen sisällön näkemisen. Tässä artikkelissa tarkastellaan, miksi tekstivastineet ovat tärkeitä, kuinka ne voidaan toteuttaa tehokkaasti ja mitä parhaita käytäntöjä tulisi noudattaa.
Miksi tekstivastineet ovat tärkeitä?
- Saavutettavuus: Tekstivastineet mahdollistavat sen, että verkkosisältö on käytettävissä kaikille, mukaan lukien näkövammaiset tai ne, joilla on rajoitettu pääsy visuaaliseen sisältöön.
- Hakukoneoptimointi (SEO): Hakukoneet eivät näe kuvia samalla tavalla kuin ihmiset, mutta ne voivat lukea tekstivastineita, mikä parantaa verkkosivuston näkyvyyttä hakutuloksissa.
- Käyttökokemus: Jos kuva ei lataudu teknisen ongelman vuoksi, tekstivastine tarjoaa käyttäjälle kontekstin siitä, mitä kuvan oli tarkoitus esittää.
Kuinka tekstivastineet toimivat?
HTML-koodissa tekstivastineet lisätään käyttämällä kuvan alt-attribuuttia tai muita semanttisia elementtejä. Tässä on yksinkertainen esimerkki:
<img src="esimerkki.jpg" alt="Punainen kukka kesäniityllä">Tässä tapauksessa ruudunlukijat lukevat tekstin ”Punainen kukka kesäniityllä” käyttäjälle. Jos kuva ei lataudu, tämä teksti näkyy myös kuvapohjan tilalla.
Tekstivastineiden parhaat käytännöt
1. Ole Kuvaileva ja Tiivis
Tekstivastineen tulisi olla ytimekäs mutta riittävän kuvaava, jotta käyttäjä ymmärtää kuvan sisällön. Esimerkiksi:
Hyvä:
<img src="koira.jpg" alt="Ruskea labradorinnoutaja juoksemassa rannalla">Huono:
<img src="koira.jpg" alt="Koira">2. Vältä turhaa tekstiä
Vältä ilmeisten tietojen, kuten ”Kuva” tai ”Kuvassa näkyy”, toistamista, sillä ruudunlukijat ilmoittavat jo, että kyseessä on kuva.
3. Käytä tyhjää alt-Attribuuttia koristeellisille kuville
Jos kuva on puhtaasti koristeellinen eikä sillä ole sisällöllistä merkitystä, käytä tyhjää alt-attribuuttia:
<img src="koriste.jpg" alt="">4. Käytä aria-label tai aria-describedby multimediaelementeille
Monimutkaisemmille multimediaelementeille, kuten kaavioille tai videoille, käytä ARIA-attribuutteja, jotta saavutettavuus säilyy:
<figure>
<img src="kaavio.jpg" alt="Myynnin kehitys vuosina 2020-2024">
<figcaption>Kaavio näyttää yrityksen myynnin kasvun 20 prosentilla viiden vuoden aikana.</figcaption>
</figure>Tekstivastineet videoille ja audiolle
Videoille
Videoille tulisi tarjota tekstivastine tai tekstitys, joka kuvaa videon visuaalisen ja auditiivisen sisällön:
<video controls>
<source src="esimerkki.mp4" type="video/mp4">
Videossa näkyy vuoristomaisema ja kuullaan linnunlaulua.
</video>Audiolle
Audiotiedostojen yhteydessä kannattaa tarjota transkriptio tai vaihtoehtoinen selostus sisällöstä:
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
Podcastissa käsitellään kestävää kehitystä ja kuullaan asiantuntijahaastattelu.
</audio>
<p>Transkriptio: Podcastissa keskustellaan kestävän kehityksen tavoitteista ja niiden saavuttamisen keinoista. Haastateltavana on professori Anna Virtanen.</p>Saavutettavuusstandardit ja lainsäädäntö
Monissa maissa verkkosivustojen saavutettavuus on lainsäädännöllinen vaatimus, erityisesti julkisen sektorin verkkopalveluille. Web Content Accessibility Guidelines (WCAG) -ohjeistukset määrittelevät tekstivastineille seuraavat periaatteet:
- Perceivable (Havaittava): Sisältö on esitettävä käyttäjille siten, että he voivat havaita sen aisteillaan.
- Operable (Käytettävä): Käyttäjä voi navigoida ja käyttää sisältöä apuvälineillä.
- Understandable (Ymmärrettävä): Sisällön tulee olla selkeä ja helposti ymmärrettävä.
- Robust (Kestävä): Sisältö toimii eri laitteilla ja teknologioilla.
Yhteenveto
Tekstivastineet ovat kriittinen osa saavutettavien verkkosivustojen suunnittelua. Ne eivät vain paranna käyttäjäkokemusta vaan myös täyttävät tärkeät saavutettavuusstandardit ja lainsäädännön vaatimukset. Käyttämällä tässä artikkelissa kuvattuja parhaita käytäntöjä voit luoda verkkosivuston, joka on avoin ja käytettävissä kaikille käyttäjille.
