Hur skriver man alt-texter?Lektion tre

Det är svårt att skriva bra beskrivande alternativa texter till bilder, och nätet är nedlusat av misslyckade försök och bilder som helt saknar alt-texter. 

 

En alt-text måste beskriva innehållet och den eventuella funktionen hos en bild. Denna kan beskrivas på två sätt:

  • Genom att använda alt-attributet
  • I bildens sammanhang som till exempel i bildtexten eller texten som tillhör bilden

I denna lektion ska du få öva på att avgöra om en alt-text behövs och i så fall vilken. 

Sammanhanget är allt

När man väljer alt-text till en bild är det viktigaste att ta hänsyn till bildens sammanhang. I vilken kontext presenteras bilden? Samma bild kan ha olika alt-texter i olika sammanhang, vilket nedanstående bild på PC Jersild förhoppningsvis kan illustrera. 

Bild på PC Jersild med text: "Boken handlar om en byråkrat som får ett uppdrag. Uppdraget är att utrota alla grisar i Sverige. Av praktiska skäl bestämmer man sig för att börja med beståndet på Gotland. I dagboksform får läsaren följa en man, Lennart Siljeberg, som utan betänkligheter tar itu med sin uppgift. Noteringar om mannens familj och ekonomi blandas med absurt känslokalla beskrivningar av svårigheterna med både att organisera slakten och att hantera de människor i lokalbefolkningen som inte samtycker till verksamheten. PC Jersilds klassiker Grisjakten utkom 1968."

P C Jersild på Stora läsardagen i Kulturhuset i Stockholm 2012 av Frankie Foughantin. CC-BY-SA

Vilken av nedanstående är det bästa valet av alt-text? Fundera en stund.

  1. “En bild på PC Jersild”
  2. “Författaren PC Jersild som skrivit närmare 40 böcker”
  3. Ett tomt alt-attribut ( alt="")
  4. “PC Jersild”

Det första steget är att avgöra om bilden har någon funktion, det vill säga om den till exempel länkar till något eller är en tryckbar knapp. Bilden är inte klickbar och har alltså ingen funktion. Sen följer det svårare steget att avgöra om en bild presenterar innehåll. 

Alt-attributet bör:

  • beskriva bildens innehåll och funktion exakt och likvärdigt
  • beskriva bildens innehåll och funktion kortfattat, helst med ett fåtal ord, men ibland kanske en eller två meningar också behövs 
  • inte innehålla överflödig information, det vill säga samma information som texten i bildens sammanhang
  • inte innehålla fraserna “en bild av…” eller dylikt. För användaren är det uppenbart att det är en bild som beskrivs. 

Utifrån dessa regler så skulle alternativ D (alt=”PC Jersild”) troligtvis vara det bästa alternativet. Alternativ A beskriver i onödan bilden som en bild. Alternativ B innehåller extra information som inte är tillgänglig i bilden samt som är redundant eftersom det står i bildtexten. Alternativ C (inget alt-attribut) är inte ett bra val då bilden innehåller information som inte presenteras i den närliggande texten. Även om texten under bilden nämner PC Jersild så bör den som läser med skärmläsare få informationen direkt från bilden.

Bild på PC Jersild med bildtext PC Jersild och text: "Boken handlar om en byråkrat som får ett uppdrag. Uppdraget är att utrota alla grisar i Sverige. Av praktiska skäl bestämmer man sig för att börja med beståndet på Gotland. I dagboksform får läsaren följa en man, Lennart Siljeberg, som utan betänkligheter tar itu med sin uppgift. Noteringar om mannens familj och ekonomi blandas med absurt känslokalla beskrivningar av svårigheterna med både att organisera slakten och att hantera de människor i lokalbefolkningen som inte samtycker till verksamheten. PC Jersilds klassiker Grisjakten utkom 1968."

P C Jersild på Stora läsardagen i Kulturhuset i Stockholm 2012 av Frankie Foughantin. CC-BY-SA

Vilken av nedanstående är det bästa valet av alt-text? Fundera en stund.

  1. ”PC Jersild”
  2. Ett tomt alt-attribut ( alt="")
  3. ”En bild”
  4. Denna bild behöver inte ett alt-attribut

Bildens innehåll presenteras här i bildtexten så troligtvis är alternativ B det bästa alternativet. A innehåller överflödig information, C onödig och meningslös information och D är inte aktuellt då alla bilder ska ha alt-attribut. 

En abstrakt målning: Olika vita, röda, svarta grå och rosa färgfält som ligger arrangerade på varandra, som olikfärgade papper i ett collage. Under bilden står det: "Painterly Architectonic av Liubov Popova” “

Vilken av nedanstående är det bästa valet av alt-text? Fundera en stund.

  1. “Målningen Painterly Architectonic av Liubov Popova”
  2. “En målning av olika vita, röda, svarta grå och rosa färgfält som ligger arrangerade på varandra, som olikfärgade papper i ett collage. “
  3. “1919 beskrev Popova målningen som en ”konstruktion”, vars byggstenar bestod av färg och linje. I detta verk är färgglada, oregelbundet formade fält skiktade mot en neutral bakgrund. Den krökta bottenkanten av en grå form som framträder under en röd triangel och en vit trapezoid antyder tredimensionalitet, medan de livliga färgerna och utstickande kanterna som verkar sträcka sig bortom ramen väcker energisk rörelse. “
  4. Ett tomt alt-attribut ( alt="")

Som nämnt förut behöver du avgöra om bildens innehåll finns med i bildens sammanhang. I detta fallet har vi bara målningen på bildens namn och dess skapare. Den har ingen funktion i form av en länk och är en svårare nöt att knäcka än de andra.  

Alternativ A (“Målningen Painterly Architectonic av Liubov Popova”) är redundant då samma information finns i bildtexten. Detta är ett dåligt alternativ. Alternativ C är väl ordrik och omfattande. Det är bra om alt-texterna som mest är en mening eller två. Alternativ B förklarar bildens innehåll och skulle av dessa alternativ troligtvis vara det bästa. Alternativ D, det tomma alt-attributet, skulle också kunna vara ett alternativ om bilden i sig bara hade ett rent dekorativt syfte och inte inte förmedlar någon information relevant för texten. I det här fallet beror det på bildens kontext, vad handlar texten om och vilken funktion fyller bilden? Är det en text om ryska kubister, då är alternativ B troligtvis det bästa alternativet. Är det en illustration till en artikel om klientbemötande i offentlig sektor, ja, då är det troligtvis D som är det bästa valet. 

Ett tårtdiagram med blå, gröna, röda och gula tårtbitar med namnen Joe Abercrombie, JRR Tolkien, Robert Jordan och Terry Pratchett. Titel: Bästa fantasyförfattaren: Joe Abercrombie 15 (24,2%), JRR Tolkien 15 (24,2%), Robert Jordan 7 (11.3%) och Terry Pratchett 25 (40,3%). Under diagreammet står det Resultatet är en undersökning som en gång för alla slog fast vem som är den bästa inomfantastygenren.

Att skriva alt-texter blir svårare när det handlar om informationstung grafik som diagram och infografik av olika slag. Informationen som förmedlas visuellt ska också förmedlas i text. 

Vilken av nedanstående är det bästa valet av alt-text? Fundera en stund.

  1. “Ett diagram”
  2. Ett tomt alt-attribut (alt="")
  3. “Ett tårtdiagram med blå, gröna, röda och gula tårtbitar med namnen Joe Abercrombie, JRR Tolkien, Robert Jordan och Terry Pratchett.”
  4. “Bästa fantasyförfattaren: Joe Abercrombie 15 (24,2%), JRR Tolkien 15 (24,2%), Robert Jordan 7 (11.3%) och Terry Pratchett 25 (40,3%).”

Alternativ A förklarar inte diagrammets innehåll utan bara att bilden föreställer ett diagram, det är läsaren inte värst behjälpt av. Alternativ B är inte heller aktuellt då bilden i fråga bär på information som behöver förmedlas i text. Alternativ C beskriver själva diagrammet men glömmer diagrammets innehåll. Återstår gör D som återger diagrammets information. Formen på diagrammet är i sammanhanget oviktigt.

Piktogrambild på gammaldags telefonlur och telefoonummer 040 - 66-67-77

Vad bör ikonen föreställande en telefonlur ha för alt-text? Observera att telefonnumret bredvid inte är en del av bilden. 

  1. “Ett piktogram av en telefon”
  2. “Telefon”
  3. “En siluett av en telefonlur av äldre snitt”
  4. “040-666 777”
  5. Ett tomt alt-attribut (alt="")

I det här fallet är bildens funktion att identifiera numret som ett telefonnummer. Alternativ B är således det bästa alternativet. Alternativ A och C förmedlar information om bilden i sig, inte den informationen som bilden bär, det vill säga att siffrorna är ett telefonnummer.

Nedanstående bild som illustrerar hur man bör hosta bör kanske också ha en alt-text?

Tecknad bild på flicka som hostar i armvecket.
  1. “En tecknad bild på en person i pistagegrön t-shirt med långt hår mot bakgrund av blåa fält som håller armvecket för munnen som för att hosta.”
  2. “En tecknad bild som illustrerar att man ska hosta i armvecket.”
  3. “Hosta i armvecket.”
  4. Ett tomt alt-attribut ( alt="").

Det är som alltid kontexten bilden är placerad i som avgör vilken typ av alt-text som behövs. Utan den är det lite av en kuggfråga vi bjuder på här. I detta fall kan vi säga att det är en artikel som handlar om hygien i coronatider. Som i föregående exempel är det viktiga själva informationen som bilden är bärare av. I detta fallet spelar det ingen roll att bilden är tecknad och vad den egentligen föreställer. Det är uppmaningen att “Hosta i armvecket” som är det viktiga budskapet. Samma information hade också kunnat förmedlas som bildtext och då hade troligtvis inte alt-texten behövts. Alternativ C är således troligtvis det bästa alternativet.

Behöver nedanstående teaserbild från Digiteket någon alt-text? I så fall, vilken?

Teaserbild för Digiteketkurs. Tecknad bild på händer som knappar på datortangentbord. Text: Digiteket – Din guide i den digitala djungeln. Komma igång med digitala möten.
  1. “Digiteket – Din guide i den digitala djungeln. Komma igång med digitala möten.”
  2. “En tecknad bild på några händer som knappar på ett tangentbord på en laptop. Bredvid datorn ligger ett anteckningsblock och några pennor.”
  3.  “En tecknad bild på några händer som knappar på ett tangentbord på en laptop. Vinkeln är rakt ovanifrån. Personen har blå tröja. På skärmen är det en kvinna med röd tröja och brunt hår.  Bredvid datorn ligger ett anteckningsblock och några pennor. Längst upp i bild finns Digitekets logotyp och deras slogan i form av Din guide i den digitala djungeln. Till höger om skärmen står det Komma igång med digitala möte.”
  4. Ett tomt alt-attribut ( alt="").

Eftersom det finns text i bilden är det denna som bör återges i alt-attributet, det vill säga alternativ A. Alternativ B återger inte bildens information och är ett dåligt val. Alternativ C återger allt som händer i bilden och är för lång och omständlig i sin beskrivning av vad som skulle kunna betraktas som dekorativa element. Alternativ D är ett dåligt alternativ då bilden innehåller information som bör återges. 

Denna bild med tillhörande säljiga bildtext används för att illustrera en kampanj för en tjänst som säljer försäkringar. Bilden är från en bildbyrå och används för att förmedla en känsla av familjeliv och glädje. 

Lycklig mamma, pappa, barn. Text: Försäkra det viktigaste du har! Välj vår barnförsäkring! Nu 30 % rabatt om du samtidigt tecknar båtförsäkring hos oss!

Family of three av Vera Kratochil. CC0 Public Domain

  1. “En familj på tre: Mamma, pappa och en bebis. Alla ler och ser glada ut.”
  2. Ett tomt alt-attribut (alt="").
  3. “Familjelycka.”
  4. “En man med halvlångt vågigt hår och ljusblå/vit randig skjorta, en bebis i vit särk och en kvinna i vit klänning med långt brunt hår. Mannen och kvinnan står på varsin sida bebisen och håller dess hand. Alla ser lyckliga ut. “

Det är här upp till den som valt bilden att avgöra dess mening och vilken typ av information den bär. Om bilden ska förmedla en känsla, familjelycka, då väljer man det som alt-text. Annars är bilden i sig bara dekorativ. Det är bildens mening, dess syfte, som ska beskrivas och om syftet är att förmedla en känsla är det den känslan som ska beskrivas, inte bilden i sig. I detta fall är det svårt. Är du osäker så fundera igen på hur du skulle beskrivit bilden sidan för någon på telefon. Utgå från det! Det viktigaste är att de som läser med skärmläsare inte ska gå miste om viktig information som seende får tillgång till.

Om du loggar in kan du spara dina framsteg och få personligt rekommenderade kurser.

Författare: Ola Nilsson

Publicerad: 23 juni, 2020