Vaihtoehtoisen tekstin lisääminen kuviin

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.

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:

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

alt="lisää kuvan kuvaus tähän" 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">

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.