Etusivu: Sisällöntuottajanopas
Etusivu: Sisällöntuottajanopas
Valikko

Kuvien käyttöä sisällöissä määrittää Traficomin pääverkkosivustojen verkkosivukonsepti. Valokuvia tai muita kuvallisia visualisointeja käytetään vain ja ainoastaan selittämään pitkää, monimutkaista tai vaikeaselkoista tekstimuodossa esitettyä asiaa. Kuvan lisäämisen tulee aina olla tarkoituksenmukaista.

Vuoden 2024 ajokorttimallin etupuoli
Kuvateksti (ei pakollinen)

Mihin tarkoitukseen kuva sopii? 

Mieti tarkkaan, mitä lisäarvoa kuva tuottaa lukijalle. Jos saman asian voi kertoa tekstimuodossa selkeästi ja ymmärrettävästi, kuvaa ei tarvita. Joissakin tilanteissa, kuva kertoo kuitenkin enemmän, kuin "tuhat sanaa". 

Esimerkkejä:

Kuvatiedosto ei saa sisältää tekstiä. Kaikki kuvassa esiintyvät tekstit pitää saavutettavuuden takia toistaa myös sisällössä. 

Teeman laskeutumissivulle lisätään heroon aina valokuva. Tällaisten kuvituskuvien käyttö on ohjeistettu tarkemmin verkkosivukonseptin osiossa.

Mihin tarkoitukseen kuva ei sovi?

Verkkosivukonseptin mukaisesti, sisällöissä ei käytetä "koristeellisia" kuvia. 

  • Kuvat tekevät sivusta aina raskaamman ladata, mutta myös silmäillä
  • Jos kuva ei tarjoa mitään lisäarvoa tai tietoa, mitä tekstissä ei jo olisi, kuva on sisällöllisesti turha
  • Kuvat lisäävät visuaalista hälyä sivuilla, sekä saattavat viedä huomion pois olennaisesta 
  • Kuvat eivät ole saavutettavia

Saavutettavuuden huomioiminen kuvien käytössä

Verkkosisällön saavutettavuusohjeissa edellytetään, että kaikelle ei-tekstuaaliselle verkkosisällölle (kuvat, videot) tarjotaan tekstivastine. Kaikille verkkosivuille lisättäville kuville tulee täydentää vaihtoehtoinen teksti (alt-teksti), joka lisätään Drupalissa kuvan lataamisen yhteydessä. Tämä tekstisisältö luetaan esimerkiksi ruudunlukijaa käyttävälle henkilölle, kun hän saapuu tekstissä kuvan kohdalle. 

Vaihtoehtoinen teksti ei ole kuvateksti tai kuvan otsikko. Vaihtoehtoisessa tekstissä ei kannata toistaa samaa tietoa, mitä käyttäjä voi lukea jo ympäröivästä tekstistä. Vaihtoehtoisessa tekstissä ei myöskään kannata toistaa kuvatekstiä, sillä ruudunlukuohjelma lukee molemmat peräkkäin. Vaihtoehtoisen tekstin tarkoituksena on kertoa käyttäjälle, mitä tietoa häneltä jää saamatta, kun hän ei näe kuvaa. Alt-teksti ei vastaa kysymykseen mitä kuvassa on, vaan mitä kuvasta pitäisi ymmärtää. Pidä vaihtoehtoinen teksti lyhyenä, 1-2 lauseen pituisena, ja muista päättää alt-teksti pisteeseen.  

Jos vaihtoehtoista tekstiä ei ole tai kuva on merkitty koristeelliseksi, ruudunlukuohjelma ei välitä käyttäjälle tietoa siitä, että sivulla on kuva. Sisältöihin lisättävät kuvat eivät lähtökohtaisesti ole koskaan koristeellisia. 

Käyttöliittymäkuvat järjestelmäohjeissa

Erityisesti Extranetissä käytetään ohjeiden yhteydessä paljon käyttöliittymäkuvia. Myös Extranetin ohjeiden tulee olla saavutettavia, joten kiinnitäthän kuvien saavutettavuuteen erityistä huomiota. Käytännössä tämä tapahtuu kuvailemalla kuvien tarjoama info ohjetekstissä, tai vähintään kuvan alt-tekstinä. 

  • Jos ohjeet sisältävät myös tekstimuotoiset ohjeet, joissa on kerrottu samat asiat, mitä ruutukaappauksissa on esitetty, ruutukaappaus merkitään Drupalissa koristeelliseksi kuvaksi. 
  • On suositeltavaa esittää käyttäjälle kuvan tukena aina sama ohje myös tekstimuodossa, kognitiivisen saavutettavuuden ja käytettävyyden näkökulmasta.

Jos ohjeet sisältävät pelkästään ruutukaappauksia, tulee kuville antaa kuvaava alt-teksti, joka tarjoaa riittävästi tietoa kuvan sisällöistä. Esimerkiksi jos ruutukaappauksessa on korostettu visuaalisesti painikkeita, joita tulee painaa, tulee sama tieto tarjota myös alt-tekstissä. Alt-teksti on tällöin hyvä kirjoittaa ohjemuotoon, mutta teksti pitäisi toki pitää melko ytimekkäänä.

Päivitetty