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.

Alternative Text on Images

Writing good descriptions

Follow these best practices to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.
  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
  • Be concise.
  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.
  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
  • Identify images that don't represent relevant content as decorative.

What is a decorative image?

An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.

They are valuable in their visual appeal but may not need to be read by screen readers.

More on decorative images on the web accessibility initiative website

Why are alternative image descriptions important?

There are many reasons to use alternative descriptions with your images.

  • Alternative descriptions, or text, are in the WCAG 2.2 guidelines
  • Students can search for an image
  • Students with visual impairments have difficulty perceiving images
  • Student with a poor network connection may have difficulty perceiving images
  • Screen readers can't read images
  • Some students learn better from descriptions than images
  • Text scales better than most images when the screen or page is enlarged

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.