Tekstivastineet kuville ja multimediaelementeille

27.9.2023 | Artikkeleita, Drupal, IT, Magento, Pilvipalvelut, Verkkokauppa, Verkkosivut, WordPress

Optimointi ja tehokkuuden parantaminen koodissa

Tekstivastineet kuville ja multimediaelementeilleTekstivastineet 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ä?

  1. 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.
  2. Hakukoneoptimointi (SEO): Hakukoneet eivät näe kuvia samalla tavalla kuin ihmiset, mutta ne voivat lukea tekstivastineita, mikä parantaa verkkosivuston näkyvyyttä hakutuloksissa.
  3. 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:

  1. Perceivable (Havaittava): Sisältö on esitettävä käyttäjille siten, että he voivat havaita sen aisteillaan.
  2. Operable (Käytettävä): Käyttäjä voi navigoida ja käyttää sisältöä apuvälineillä.
  3. Understandable (Ymmärrettävä): Sisällön tulee olla selkeä ja helposti ymmärrettävä.
  4. 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.

Samankaltaisia artikkeleita

WordPressin typografiaopas

WordPressin typografiaopas

Tässä oppaassa käydään läpi, kuinka valita oikeat fontit, miten käyttää niitä WordPressissä tehokkaasti ja miten typografia voi tuk...

23.11.2025
WordPressin joustavuus

WordPressin joustavuus

WordPress on säilyttänyt asemansa maailman suosituimpana sisällönhallintajärjestelmänä jo yli 20 vuoden ajan. Yritykset eri toimialoilt...

20.11.2025
WordPressin kehityssuunta

WordPressin kehityssuunta

WordPress on ollut verkkokehityksen kulmakivi jo vuosikymmeniä, ja sen rooli on muuttunut dramaattisesti ajan myötä. Alun perin blogi...

20.11.2025
WordPressin ekosysteemi vuonna 2026

WordPressin ekosysteemi vuonna 2026

WordPress on laaja ja kehittyvä ekosysteemi, joka kattaa verkkosivujen, verkkokauppojen, sovellusten, integraatioiden ja tekoälypohjai...

20.11.2025
Verkkokauppa WordPressillä

Verkkokauppa WordPressillä

Tässä oppaassa käymme läpi vaiheet, työkalut ja parhaat käytännöt, jotta voit luoda toimivan ja optimoidun verkkokaupan.

20.11.2025