Textalternativ för bilder

Etusivu / Bild och ljud / Textalternativ för bilder

Innehållet i detta avsnitt:

Textalternativ är väsentliga för tillgängligheten

Textalternativ för bilder förbättrar webbinnehållets tillgänglighet avsevärt. Riktlinjerna för tillgängligt webbinnehåll (WCAG) kräver att allt icke-textbaserat webbinnehåll ska förses med textmotsvarigheter. Med andra ord ska information i bilder, videor och ljud också visas som text på nätet. I det här avsnittet fokuserar vi på bilder, videorna och inspelningarna behandlas separat.

Textalternativ, alternativtext och alt-text – vad är de?

Termerna textalternativ, alternativtext och alt-text används ofta för att indikera att en text har lagts till bilden med en programvara. Olika verktygsprogram och applikationer använder olika termer vilket kan göra det svårt att veta var textalternativ ska skrivas.

Textalternativ är en term som används i WCAG-riktlinjerna. (Obs! W3C:s officiella svenska översättningen av WCAG 2.0-kriterierna. Det finns fortfarande inte någon officiell översättning till svenska av WCAG 2.1.) Textalternativ är “text som är automatiskt associerad med innehåll som inte är text eller hänvisas från text som är automatiskt associerad med innehåll som inte är text. Automatiskt associerad text är text vars placering kan tydliggöras automatiskt utifrån innehållet som inte är text.” I praktiken innebär detta att

  1. Koden för en bild på en webbsida eller i en dokumentfil beskriver bildens innehåll som text. Texten visas inte, men ELLER
  2. Innehållet i bilden beskrivs i den synliga texten på webbplatsen eller i dokumentet, och bildkoden berättar var bilden beskrivs.

Termerna alternativtext och alt-text används i applikationer såsom ordbehandlingsprogram eller html-redigeringsprogram. När man använder en bild innehåller webbsidornas innehållshanteringssystem ofta fältet Alternativtext (eller Alt-text), där du kan skriva en bildbeskrivning när bilden läggs till. I html-koden på en www-sida finns alternativtexten i img-elementet i alt-attributet. Skärmläsaren förmedlar innehållet i alt-attributet, det vill säga alternativtexten, till programmets användare. Alt-attributet visas inte som text på webbsidan, utan det är dolt i sidans HTML-kod.

I dokumentfiler kan alternativtexten läggas till i bildkoden på motsvarande sätt.

Textalternativ hjälper dem som inte kan se bilden

Med hjälp av textalternativ förmedlas informationen i bilden till de personer som av någon anledning inte kan se bilden. Orsaken kan vara att personen har en synskada eller att bilderna inte har laddats ner eller att användaren inte vill ladda ner dem. Man får åtkomst till textalternativ med hjälp av ett skärmläsarprogram. Särskilt synskadade personer använder skärmläsare. Textalternativ kan bli synlig i webbläsaren om inställningarna förhindrar att bilder laddas ner. Då laddas alt-texten istället för bilderna ner.

Textalternativ är inte en bildtext eller bildens rubrik

Textalternativ är inte det samma som bildtexten eller bildens rubrik som i program kallas caption på engelska.

Bildtexten är texten som alla kan se och som ofta är placerad under eller bredvid bilden. Skärmläsaren läser bildtexten samt alt-texten, om en sådan har angetts. Därför ska alt-texten inte upprepa bildtexten som den är, eftersom skärmläsaren läser båda innehållen.

Observera att bildens titel (title på engelska) inte heller är ett textalternativ. I vissa innehållshanteringssystem kan man ge en bild ett titelattribut som visas när man hovrar över en bild med markören på en webbsida. Tillgänglighetskraven förutsätter att ett alt-attribut används, ett title-attribut behövs inte.

Måste man alltid skriva en alt-text?

Enligt tillgänglighetskraven ska bilder som används på webben ha ett textalternativ. Automatiska tillgänglighetskontroller rapporterar ett fel när de hittar en bild som saknar alt-attribut.

Innehållet i alternativtexten kan dock definieras som tomt, vilket innebär att man inte alltid behöver skriva en alt-text. En så kallad tom alt-text är tekniskt sett alt=”” inuti ett img-element i html-koden. Ange dock inte ”” som en alt-text i webbsidornas redigeringsprogram. Då kan det nämligen hända att den som använder skärmläsaren får höra följande meddelande vid bilden: citattecken citattecken.

Det är ofta möjligt att markera en bild som dekorativ i systemen för hantering av webbinnehåll. Då anges ingen alt-text. Bilden kan också ofta markeras som dekorativ i ordbehandlings- och presentationsprogram (såsom Word eller PowerPoint).

När kan alt-texten vara tom eller en bild markeras som dekorativ?

Om alt-texten är tom eller bilden är markerad som dekorativ agerar skärmläsaren som om hela bilden inte finns och förmedlar sålunda inte information till användaren om att det finns en bild på sidan. Detta är inte ett problem om bilden eller informationen i den inte är relevant för användaren eller om bildens innehåll och innebörd beskrivs i den övriga texten på webbsidan.

Alternativtexten kan lämnas tom i följande fall:

  • När det är fråga om en dekorativ bild eller
  • innehållet i bilden är obetydligt för det övriga innehållet, det vill säga bilden illustrerar endast textinnehållet, eller
  • innehållet i bilden beskrivs fullständigt i den omgivande texten; eller
  • en synlig bildtext berättar det väsentliga om bilden.

Med dekorativa bilder avses bilder som inte förmedlar någon information och har lagts till för att dekorera innehållet. Ett tydligt exempel på en dekorativ bild är fina mönster eller linjer som skapar mellanrum i texten. För sådana bilder är det bäst om alt-texten är tom.

Webbsidor använder också ofta olika illustrationer för att pigga upp innehållet. I sådana fall lönar det sig att fundera på vad man vill kommunicera med illustrationen. Om man till exempel vill visa ett vackert landskap i hemkommunen kan man skriva in en kort text om platsen som alt-text, t.ex. ”Vackert sjölandskap vid stranden av Päijänne.” Alt-texten kan alltså förmedla stämningen som man vill att bilden skapar.

Men om bilden bara är ett element som ökar visualiteten och bilden kunde tas bort, lönar det sig att använda en tom alt-text eller markera bilden som dekorativ. Skärmläsaren förmedlar alt-texten på den plats där bilden finns. En påtvingad alt-text i mitten av brödtexten kan störa användaren av skärmläsaren i onödan.

Om innehållet i bilden i övrigt beskrivs i texten på webbsidan kan alt-texten lämnas tom eller markeras som dekorativ. Då är det dock viktigt att beakta om bilden nämns i brödtexten. Om texten till exempel beskriver statistik och bilden endast visualiserar den information som tillhandahålls som text, krävs ingen alt-text. Men om texten hänvisar till bilden, ska alt-texten berätta att bildens innehåll har förklarats i texten. Andra användare kanske också hänvisar till innehållet i bilden, så det är bra om skärmläsarens användare också vet att bilden finns.

Hur utarbetar man en alternativtext?

När du sätter ihop en alternativtext, fundera på svaret på följande frågor:

  • Vilken information saknas, om man inte ser bilden?
  • Vad är syftet med bilden på den plats där den finns?
  • Berättar den omgivande texten om bildens innehåll?

Textinnehållet bör tas i beaktande, eftersom det är onödigt att upprepa samma information i alternativtexten som läsaren ändå får. Om en bild till exempel har en bildtext kan alt-texten specificera eller förtydliga innehållet i bilden. Alt-texten får inte vara samma som bildtexten.

Om texten hänvisar direkt till bildinnehållet, till exempel ”som bilden visar”, är det ytterst viktigt att informationen som ses i bilden tillhandahålls. Fokusera dock inte på att redogöra för visuella saker (till exempel färger) utan på vad som är mest relevant i bilden. Visar bilden till exempel att något är förändrat?

Kontexten i bilden är relevant

Det vore frestande att skriva en alt-text för bilder, till exempel i bildbanken. Vad som är en lämplig alternativtext beror dock på sammanhanget, och samma alternativtext fungerar nödvändigtvis inte med samma bild överallt. Det är viktigt att fundera på vad som är viktigt i bilden i det sammanhang där den används. Vilken roll har bilden? Ger bilden någon ytterligare information i förhållande till texten? Utarbeta en alternativtext som passar exakt det textinnehåll där bilden finns.

Skriv så slående och tydligt som möjligt

Använd korta meningar och tydligt språk. 1–2 meningar eller cirka 250 tecken är en bra längd.

WCAG-kriterierna anger inte ett specifikt antal tecken, men det är bra att veta att i skärmläsaren kan användaren inte röra sig i alt-texten som i annan text, till exempel gå tillbaka till föregående mening, utan alt-texten ska antingen läsas helt eller hoppas över. Skärmläsare avbryter också långa alt-texter, vilket innebär att användaren meddelas om en ny bild mitt i alt-texten.

Använd ett ordförråd och en stil som passar till den omgivande texten

Använd ord och termer i alt-texten som är bekanta för läsaren, det vill säga samma ordförråd som i resten av texten. Även om en ny term är kort och beskrivande, ska du inte använda den för första gången i en alt-text.

Avsluta alltid alternativtexten med en punkt

Även om alternativtexten vore mycket kort och en ofullständig mening, ska du använda en punkt i slutet av texten. Denna punkt gör det lättare för de användare av skärmläsare som använder funktionen Text till tal. Vid punkten gör rösten i skärmläsaren en liten paus och gör alternativtexten mer distinkt från resten av texten. Du kan alltså till exempel ge en illustration redogörelsen alt=”Ett skogslandskap på vintern”.

Börja inte alt-texten med ordet ”Bild” eller ”I bilden”

Skärmläsaren meddelar användaren att det är en bild innan skärmläsaren förmedlar alternativtexten. Om du vill kan du berätta att detta är en illustration, en karta eller en annan typ av bild. Börja dock inte alternativtexten med: ”I bilden syns” eller ”Bilden visar”.

Skriv en neutral beskrivning, undvik tolkning

Gör inte en egen tolkning av bilden, utan skriv neutralt om innehållet i bilden. Detta är särskilt viktigt om du skapar en alternativtext för en bild som någon annan har valt. “Barnet ler” och “Barnet är lyckligt” är två olika saker. Det senare har tolkat barnets känslomässiga tillstånd av leendet.

Det lönar sig att skriva texten i bilden i alt-texten

Om bilden innehåller text som ger ytterligare information och innehållet på webbsidan inte innehåller samma text, kan du skriva texten i bilden som alt-text. Om det finns mycket text i en bild, till exempel i infografik, kan du ge en kort beskrivning av infografens viktigaste punkter i alt-texten. Det vore bra att skriva in en längre beskrivning i brödtexten.

Det lönar sig att göra tabeller och förteckningar som äkta tabeller och förteckningar

Om det är fråga om en bild som föreställer en tabell eller en lista ska du inte göra en alt-text utan istället ersätta bilden med tabellen och listan med en äkta tabell eller lista. På en webbsida gör du en äkta tabell eller lista semantiskt med lämpliga html-element (tabell, tr, th, td, ol, ul, li, osv.). I ordbehandlingsprogram används tabell- eller listverktyg. På detta sätt kan skärmläsarens användare röra sig i en tabell eller lista.

Alt-text blir väldigt lång, vad kan jag göra?

Hur kan man uppfylla kravet på tillhandahållandet av en textmotsvarighet om bildens alternativtext blir för lång och några meningar inte räcker för att redogöra för det som är relevant i bilden? Man kan göra en längre bildbeskrivning. Webbsidor har olika sätt att visa en längre redogörelse. Redogörelsen kan skrivas i brödtexten och i alt-texten nämner man att bilden beskrivs i texten. Men om man inte vill förlänga brödtexten kan man lägga till en länk i samband med bilden till en separat sida där man hittar den långa redogörelsen. Det är också möjligt att producera en del som öppnas och stängs på webbsidan och där man kan sätta in en lång utredning. Se Infografik för ett exempel på ett avsnitt som öppnas.

Bilden är också en länk. Vad gör jag då?

Bilder används också ofta som länkar – när du klickar på bilden för den dig till en annan webbsida eller öppnar till exempel ett formulär. Många webbsidor använder också bildknappar (t.ex. ”Beställ”, ”Sök”, ”Skicka”). Utifrån bildlänkens funktion och sammanhang kan du bestämma vilken typ av alt-text du vill skriva.

Man bör i allmänhet ta i beaktande att länkar borde berätta för användaren om länkens objekt. Därför bör även seende användare undvika bildlänkar som inte innehåller information om objektet för en länk. Det säkraste är om det i samband med bilden även finns text som redogör för länkens objekt. På så sätt får alla användare veta var de hamnar när de klickar på bilden.

Alternativtexter för bildlänkar diskuteras mer i detalj i artikeln Toiminnallisten kuvien alt-tekstit (Alt-texter för funktionella bilder).

Följande är exempel på olika bilder och deras alternativa texter.

Exempel på alternativtexter för bilder

Illustrationer

Situationsbild med text

Infografik

Visualisering av numeriska data