Lägg till en omfattande beskrivning av bilder och diagram för att förbättra förståelsen

Bilder kan vara ett bra sätt att engagera besökarna och kommunicera komplexa idéer.

Bildbeskrivningar kallas ofta ”alternativa beskrivningar”, ”alternativ text” och ”alttext”. Bildbeskrivningar ger ett textbaserat, beskrivande alternativ till bilden. För deltagare med nedsatt syn är bildbeskrivningar som förklarar innehållet i en bild avgörande för inlärningen. Textbeskrivningar kan ge samtliga deltagare en mer djupgående kontext och öka deras förståelse.

Ally kontrollerar om det finns bildbeskrivningar överallt där det finns en bild. Ally kontrollerar bilder på en webbsida eller i en bifogad fil.

Ally delar in problemen i kategorierna allvarligt, större och mindre.

  • Allvarliga. Den här typen av problem utgör en stor tillgänglighetsrisk och måste åtgärdas.
  • Större. Den här typen av problem påverkar tillgängligheten och behöver åtgärdas, även om de inte är allvarliga.
  • Mindre. Överväg att åtgärda den här typen av problem för att få en högre tillgänglighetspoäng.

Bilder som saknar alternativ text är ett stort problem.

Använd Ally för att hitta bilder som saknar beskrivningar

Använd Allys tillgänglighetsrapport för att upptäcka och åtgärda tillgänglighetsproblem på din webbplats. Använd länken som anges för rapporten och logga in. Öppna rapporten och titta på listan över problem i tabellen Tillgänglighetsproblem.

Tabellen Tillgänglighetsproblem finns både på fliken Översikt och fliken Domän. Börja på fliken Domän för att se problem som är specifika för en domän. 

Det är ett stort problem att ha bilder utan alternativ text eller beskrivningar. Använd fliken Stora problem i tabellen Tillgänglighetsproblem för att visa listan över stora problem. Markera de problem som har att göra med bilder som saknar beskrivningar.

Om du börjar i fliken Översikt markerar du problemet och sedan domänen med problemet.

Problem med bildbeskrivningen kan börja med bild, dokument eller HTML i listan.

Från listan över problem med bildbeskrivningar i domänen ska du klicka på poängindikatorn bredvid ett objekt med problemet. Innehållsredigerarens återkopplingspanel öppnas.

Förhandsgranska bilderna som saknar beskrivningar

Allys återkopplingspanel visar en förhandsgranskning av innehållet samt detaljerad återkoppling och stöd för att hjälpa dig fixa dina tillgänglighetsproblem. Använd förhandsvisningen för att se bilderna som saknar beskrivningar.

Förhandsvisningen visar var du kan hitta specifika tillgänglighetsproblem i dokumentet. Markeringar visar varje förekomst av en problemtyp i taget. Till exempel om dina bilder saknar alternativa beskrivningar, då visar markeringarna varje ställe där detta specifika problem förekommer.

Förhandsgranskningsverktyg

Använd förhandsvisningsverktygen för att utforska problemen i ditt dokument.

  • Gå igenom förhandsvisningen sida för sida.
  • Se hur många gånger ett enskilt problem förekommer.
  • Hoppa mellan problemmarkeringar.
  • Dölj eller visa markeringarna.
  • Zooma in eller ut på förhandsvisningsinnehållet.
  • Om problemet finns i ett bifogat dokument ska du ladda ner originalfilen.

Följ stegen i Allys vägledning för att lägga till bildbeskrivningar

Ally utgår från att du har grundläggande kunskaper om HTML och hur du använder ditt innehållshanteringssystem (CMS). För att följa instruktionerna behöver du veta hur man redigerar en webbsida i HTML- eller källkoden i din CMS.

Tillsammans med förhandsgranskningen ger Ally dig stegvisa instruktioner om hur du åtgärdar problemet.  Ally strukturerar denna återkoppling i ett beslutsträd. Allt du behöver göra är att läsa anvisningarna och svara på uppmaningarna. Lär dig vad problemet är, varför det spelar roll och hur man korrigerar det korrekt.

Klicka på Så här lägger du till beskrivningar för att följa stegen i vägledningen.

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

Olika sätt att lägga till bildbeskrivningar på webbsidor

Det finns fler än ett sätt att lägga till eller redigera bildbeskrivningar på dina webbsidor.

  • HTML: Ally vägleder dig om hur du hittar och redigerar bildbeskrivningar i HTML, steg för steg. Först ska du helt enkelt hitta webbsidan med bilden. Redigera sidan. Uppdatera bildens HTML-kod så att den innehåller ett alternativ textattribut. Spara sidan.
  • Bildinställningar: De flesta innehållshanteringssystem (CMS) har ett sätt att redigera alternativ text i bildinställningarna. Hitta bilden på webbsidan eller i CMS-filens datakatalog. Använd CMS-verktygen för att redigera bilden. Lägg till bildbeskrivningen i fältet alternativ text eller alt text. Spara bilden.

Gå till w3schools för mer information om HTML och CSS

Varför ser jag inte ”img src” i min HTML-kod?

Det vanligaste sättet att lägga till bilder på en webbsida är med HTML-attributet img src. Img src är ett HTML-attribut som använder bildfilens URL för att placera bilden på webbsidan. Men innehållshanteringssystemen varierar. Din webbplats kan använda andra koder eller attribut. 

I Drupal kan du till exempel se något som det här i stället:

<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>

Lägg till alternativ text till början av attributet. Till exempel,

<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>

Om du inte ser img src i HTML-koden kan du försöka använda CMS-verktygen för att redigera bildinställningarna. Hitta bilden på webbsidan eller i CMS-filens datakatalog. Använd CMS-verktygen för att öppna bildinställningarna. Lägg till bildbeskrivningen i fältet alternativ text eller alt text. Spara bilden.

Om du fortfarande inte vet hur du ska fortsätta kontaktar du administratören eller utvecklaren av din webbplats. Be dem att visa dig hur bilderna läggs till på dina webbsidor och hur du lägger till alternativ text.