Tarkan kuvauksen lisääminen kuviin ja kaavioihin ymmärrettävyyden parantamiseksi

Kuvat voivat olla hyvä keino herättää kävijöiden kiinnostus ja kertoa monimutkaisista ideoista.

Kuvien kuvauksista käytetään myös nimityksiä vaihtoehtoinen kuvaus ja vaihtoehtoinen teksti. Kuvien kuvaukset ovat tekstipohjainen, kuvaileva vaihtoehto kuvalle. Kuvien kuvaukset ovat välttämättömiä näkövammaisille opiskelijoille, jotta he ymmärtävät kuvan sisällön. Tekstikuvaukset voivat lisäksi parantaa ymmärtämistä kaikille opiskelijoille, sillä ne syventävät asiayhteyttä.

Ally tarkistaa kaikista kuvista, onko niille kuvausta. Ally tarkistaa sekä verkkosivun kuvat että liitetiedostojen sisältämät kuvat.

Ally luokittelee ongelmat vakaviksi, suuriksi tai vähäisiksi.

  • Vakava: nämä ovat suurimpia helppokäyttöisyysongelmia, jotka edellyttävät eniten toimia.
  • Suuri: nämä ongelmat ovat helppokäyttöisyysongelmia, jotka eivät ole vakavia, mutta jotka silti edellyttävät toimia.
  • Vähäinen: nämä ongelmat olisi syytä korjata helppokäyttöisyysarvon parantamiseksi.

Vaihtoehtoisen tekstin puuttuminen kuvasta on suuri ongelma.

Puuttuvien kuvien kuvausten etsiminen Allyn avulla

Allyn helppokäyttöisyysraportti auttaa löytämään ja korjaamaan sivuston helppokäyttöisyysongelmia. Napsauta raportin linkkiä ja kirjaudu sisään. Avaa raportti ja katso Helppokäyttöisyysongelmat-taulukon ongelmaluetteloa.

Helppokäyttöisyysongelmat-taulukko näkyy sekä Yleiskatsaus- että Ala-välilehdissä. Aloita Ala-välilehdestä ja katso, onko siinä mitään alakohtaisia ongelmia. 

Kuvat, joista puuttuu vaihtoehtoinen teksti tai kuvaus, ovat suuri ongelma. Helppokäyttöisyysongelmat -taulukon Suuri-välilehdessä on luettelo suurista ongelmista. Valitse ongelmat, jotka koskevat kuvien puuttuvia kuvauksia.

Jos aloitat Yleiskatsaus-välilehdestä, valitse ensin ongelma ja sitten ala, jolla ongelma ilmenee.

Kuvien kuvauksiin liittyvät ongelmat voivat alkaa luettelossa sanalla Kuva, Asiakirja tai HTML.

Valitse alan kuvien kuvauksiin liittyvien ongelmien luettelosta ongelmallisen kohteen vieressä oleva helppokäyttöisyysarvon ilmaisin. Sisältöeditorin palautepaneeli avautuu.

Kuvauksettomien kuvien esikatseleminen

Allyn palautepaneelissa voit esikatsella sisältöä sekä saada yksityiskohtaista palautetta ja ohjeita helppokäyttöisyysongelmien korjaamiseen. Esikatselussa voit tarkastella kuvia, joista puuttuu kuvaus.

Asiakirjassa voi olla esikatselukorostuksia, jotka osoittavat, missä tietyt helppokäyttöisyysongelmat esiintyvät. Korostukset näyttävät kerrallaan yhden ongelmatyypin kaikki esiintymät. Jos esimerkiksi kuvista puuttuvat vaihtoehtoiset kuvaukset, korostukset osoittavat jokaisen kohdan, jossa tämä ongelma esiintyy.

Esikatselutyökalut

Esikatselutyökalujen avulla voit selata asiakirjassa olevia ongelmia.

  • Käy esikatselu läpi sivu kerrallaan.
  • Selvitä, montako kertaa tietty ongelma ilmenee.
  • Voit siirtyä korostetusta ongelmasta suoraan seuraavaan.
  • Voit piilottaa tai näyttää korostukset.
  • Voit suurentaa tai pienentää esikatselun sisältöä.
  • Jos ongelma on liitetiedostossa, lataa alkuperäinen tiedosto.

Kuvausten lisääminen kuviin Allyn ohjeiden avulla

Ally olettaa, että tunnet HTML-koodauksen perusteet ja osaat käyttää tarvittavaa sisällönhallintajärjestelmää (CMS). Ohjeiden seuraaminen edellyttää, että osaat muokata verkkosivuja HTML-muodossa tai muokata lähdekoodia käyttämässäsi sisällönhallintajärjestelmässä.

Esikatselun lisäksi Ally antaa vaiheittaiset ohjeet ongelman korjaamiseen.  Ally järjestää tämän palautteen päätöspuuksi. Sinun tarvitsee vain lukea ohjeet ja reagoida kehotteisiin. Lue, mikä ongelma on, miksi se on merkityksellinen ja miten asian voi korjata.

Saat vaiheittaiset ohjeet valitsemalla Kuvausten lisääminen.

Kuvien vaihtoehtoiset tekstit

Hyvien kuvausten kirjoittaminen

Noudata seuraavia parhaita käytäntöjä, kun haluat kirjoittaa kuville hyviä vaihtoehtoisia tekstikuvauksia:

  • Kuvaile kuvaa sivun kontekstin perusteella. Välitä kuvan koko merkitys.
  • Älä sano ˮkuva kohteesta” tai ˮvalokuva kohteesta”. Näytönlukijat tunnistavat kuvat automaattisesti kuviksi.
  • Ole ytimekäs.
  • Kirjoita selitteitä monimutkaisista kuvista, kuten infografiikasta. Aseta nämä selosteet sivulle heti infografiikan jälkeen. Sisällytä sivun alkuun ankkurilinkki, jonka avulla tekstimuotoisen vaihtoehdon voi lukea. Katso esimerkki tietokaaviosta, jolla on tekstimuotoinen vaihtoehto.
  • Vältä tekstikuvia. Jos et voi välttää niitä, kopioi teksti vaihtoehtoiseen kuvaukseen.
  • Sano jotain uutta. Älä toista vaihtoehtoisia kuvauksia samalla sivulla. Älä toista, mitä sivulla jo sanotaan.
  • Jos kuvat eivät edusta olennaista sisältöä, merkitse ne koristeellisiksi kuviksi.

Mikä on koristeellinen kuva?

Kuva on koristeellinen silloin, kun se ei lisää mitään sivun tietoihin. Niitä voivat olla esimerkiksi taideteokset, joiden avulla erotetaan aiheet, tai kuva puhelimessa puhuvasta henkilöstä sisällössä, joka käsittelee viestintätaitoja.

Ne ovat visuaalisesti arvokkaita, mutta näytönlukijoiden ei välttämättä tarvitse lukea niitä.

Lisätietoja koristeellisista kuvista Web Accessibility Initiativen verkkosivustossa

Miksi vaihtoehtoisten kuvien kuvaukset ovat tärkeitä?

On monia syitä käyttää kuvien kanssa vaihtoehtoisia kuvauksia.

  • Vaihtoehtoiset kuvaukset tai tekstit ovat WCAG 2.2 -ohjeissa
  • Opiskelijat voivat hakea kuvaa
  • Näkövammaisilla opiskelijoilla on vaikeuksia havaita kuvia
  • Opiskelijalla, jolla on huono verkkoyhteys, voi olla vaikeuksia havaita kuvia
  • Näytönlukijat eivät osaa lukea kuvia
  • Jotkut opiskelijat oppivat paremmin kuvauksista kuin kuvista
  • Teksti skaalautuu paremmin kuin useimmat kuvat, kun näyttöä tai sivua suurennetaan

Eri tapoja lisätä kuvauksia verkkosivuille

Voit lisätä kuvauksia verkkosivun kuviin tai muokata niitä useilla eri tavoilla.

  • HTML: Allyn ohjeet opastavat sinua HTML-muotoisten kuvien kuvausten etsimisessä ja muokkaamisessa. Aloita etsimällä kuvan sisältävä verkkosivu. Muokkaa sivua. Lisää kuvan HTML-koodiin vaihtoehtoisen tekstin attribuutti. Tallenna sivu.
  • Kuvan asetukset: Useimmissa sisällönhallintajärjestelmissä vaihtoehtoista tekstiä voi muokata kuvan asetuksissa. Etsi kuva verkkosivulta tai sisällönhallintajärjestelmän tiedostopankista. Muokkaa kuvaa sisällönhallintajärjestelmän työkaluilla. Lisää kuvan kuvaus vaihtoehtoisen tekstin kenttään (alt text). Tallenna kuva.

 w3schools -sivustolla voit perehtyä tarkemmin HTML-koodiin ja CSS-tyyleihin.

Miksi en löydä HTML-koodista attribuuttia "img src"?

Yleisin tapa lisätä kuvia verkkosivuille on käyttää img srcHTML-määritettä. Img src on HTML-määrite, joka lisää kuvan verkkosivulle kuvatiedoston URL-osoitteen avulla. Mutta kaikki sisällönhallintajärjestelmät toimivat hieman eri tavalla. Käyttämäsi sivusto saattaa käyttää eri koodia tai attribuuttia. 

Esimerkiksi Drupal-järjestelmässä koodi voi näyttää vaikka tällaiselta:

<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Lisää vaihtoehtoinen teksti attribuutin alkuun. Esimerkiksi näin:

<drupal-entity alt="add image description here" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>

Jos et löydä HTML-koodista määritettä img src, kokeile muokata kuvan asetuksia sisällönhallintajärjestelmän työkaluilla. Etsi kuva verkkosivulta tai sisällönhallintajärjestelmän tiedostopankista. Avaa kuvan asetukset sisällönhallintajärjestelmän työkaluilla. Lisää kuvan kuvaus vaihtoehtoisen tekstin kenttään (alt text). Tallenna kuva.

Jos et vieläkään pääse eteenpäin, pyydä apua sivuston ylläpitäjältä tai kehittäjältä. Pyydä lisätietoja siitä, miten kuvat lisätään verkkosivuille, sekä ohjeet vaihtoehtoisen tekstin lisäämiseen.