Lägg till alternativ text till bilder

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.

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.