Mediakurser

MENY

Alt-texter för en tillgängligare webb

Alla som arbetar med webben idag måste tänka på webbplatsens tillgänglighet. Tillgänglighet betyder att den som har ett funktionshinder också ska kunna ta del av innehållet på en webbplats. Det kan handla om att man ska kunna navigera sig runt på webbplatsen med kortkommandon utan att behöva använda mus. Tillgänglighet kan också vara att knappar och länkar inte sitter för nära varandra på små skärmar som mobiltelefoner. Men det allra vanligaste handlar om att göra webbplatsen tillgänglig för den som har nedsatt syn eller är helt blind. Alt-texter är ett sätt att förbättra den tillgängligheten.

Hur den som inte kan se ändå kan ta del av webben

Det är svårt att förstå innehållet på en webbplats utan att se de foton och diagram som finns på sidorna. Men det är exakt vad synskadade människor måste hantera när de surfar på webben.

Synskadade använder skärmläsare som läser upp webbplatsen innehåll för dem. Dessa verktyg har utvecklats mycket genom åren. De gör ett bra jobb med att hjälpa människor att navigera på webbplatser även om de inte kan se bilder. Användaren kan justera läshastigheten efter behov och använda kortkommandon för att flytta sig runt bland innehållet på webbplatsen.

Om det inte finns något en alternativ text, eller alt-text kan inte skärmläsare informera vad en bild föreställer. En alt-text är en text som beskriver vad som finns i en bild. Skärmläsare läser upp bilders alt-texter. Det hjälper den som inte kan se att förstå vad seende upplever när de tittar på en bild.

lejon som ligger och vilar i grönt gräs

Så här ser alt-texten ut i HTML-koden: <img src="lejon.jpg" alt="lejonhane som ligger och vilar i grönt gräs" />

Tillgänglighet är en lag

Tillgänglighetsanpassning är inte ens något som är frivilligt för vissa typer av webbplatser. Lagen om tillgänglighet till digital offentlig service och gäller sedan 1 januari 2019. Det betyder att myndigheter, landsting, kommuner och andra offentligrättsliga organ ska tillgänglighetsanpassa sina webbplatser. Lagen gäller även vissa privata aktörer som utför tjänster med offentlig finansiering. Det finns olika standarder för tillgänglighet. Lagen anger att webbplatser och appar ska uppnå standarden för nivå AA, version 2.1 (WCAG).

alt-texter är en del av uppfylla standarden för tillgänglighet wcag-2-1

Även om er webbplats inte är omfattad av lagen om tillgänglighet bör man ändå försöka tillgänglighetsanpassa den så mycket som möjligt. Alternativ text är ett enkelt sätt att förbättra tillgängligheten. När allt kommer omkring förtjänar synskadade att ha samma tillgång till innehållet er webbplatser som alla andra.

Fler fördelar med tillgänglighet

Men alternativ text har fler fördelar än att de gör webbplatsen tillgänglig för synskadade. Sökmotorer prioriterar tillgängliga webbplatser. Deras algoritmer kan söka efter alt-taggar för att hjälpa till att analysera tillgänglighet och kategorisera webbinnehåll. Alt-texter gör det också enklare för dig och webbplatsens besökare att hitta bilder.

Det är enkelt att lägga till alt-texter. Det tar bara några sekunder att beskriva en bild. Men man ska inte lägga till vilken text som helst. En dåligt skriven alt-text kan i vissa fall orsaka mer förvirring än att hjälpa besökaren.

Så ska du skriva en alt-text

I de flesta webbsystem anger man en titel till en bild. Den kan vara mer generell och kortfattad än en alternativ text. En alt-text ska inte innehålla mer än 125 tecken och en bra riktlinje är ungefär 100 tecken. Det ska vara en tydlig beskrivning av vad vi ser och vad som händer i en bild.

Undvik att göra beskrivningarna för långa eller komplexa. Tänk på att all information ska vara relevant. Vilken alternativ text du ska skriva beror också på sammanhanget, anledningen till att du visar fotot.

Ett tjugotal svartvita kor som äter gräs i ett grönt landskap med trädbeklädda kullar i bakgrunden.
Alt-text: Ett tjugotal svartvita kor som äter gräs i ett grönt landskap med trädbeklädda kullar i bakgrunden.

Det finns också bilder som inte behöver ha en alt-text. Det är bilder som helt saknar betydelse för sidans innehåll. Bilder som inte tillför någon betydelse är onödiga att få beskrivna av en skärmläsare. De bilder som inte har en alt-text kallas för artefakter och kommer inte bli upplästa av skärmläsare.

Lägg till alt-texter i WordPress mediabibliotek

Vid sidan av alt-texter ger de flesta webbsystem oss möjlighet att lägga till en hel del information till bilder. Här är ett exempel på hur mediabiblioteket i WordPress ser ut och vilken information man kan lägga till en bild. Den här typen av data om data heter metadata och varje del har sitt eget användningsområde på webbplatsen.

Metadata i WordPress mediabibliotek, där man kan lägga till alt-texter, rubrik, bildtext och beskrivning.

Rubrik – Använder man främst för internt bruk. En bildtitel är i allmänhet bara ett eller ett fåtal ord. I WordPress blir bildens filnamn automatiskt rubrik. Om filnamnet saknar betydelse kan man kan ändra rubriken till något mer användbart. Rubriken gör bilden sökbar för både webbplatsens administratörer. Om du vill att bildfilens namn ska vara sökbart för sökmotorer döper du bilden innan du laddar upp den till WordPress.

Bildtext – Är vanligtvis några meningar och ger ytterligare information eller sammanhang om bilden för läsaren. Bildtexter kan också visa fotografens namn eller len länk till en källa med mer information. Tanken med en bildtext är att man läser den efter att man tittat på själva bilden. Därför läser skärmläsare upp bildtexter efter att de läst den alternativa texten. Bildtexten och alternativtexten bör därför skilja sig en del från varandra.

Beskrivning – Bildbeskrivningar kan vara mycket längre än alt-texter eller bildtexter. De ger mer information om en bild om man behöver det. Vissa använder beskrivningsfältet för att förklara hur bilden ser ut mer i detalj än i alternativtexten eller för att lägga till information om hur bilden skapades. Här kan man också lägga till länkar, t.ex. till upphovsrättsinformation. Den som använder skärmläsare kan välja om de vill att bildbeskrivningar ska läsas upp eller inte. I WordPress visas inte bildbeskrivningen på själva webbsidan utan enbart om någon klickar på bilden, antingen från en sökmotor eller på en webbsida på din webbplats.

Vanliga fel med alt-texter

Ett vanligt fel många gör är att inkludera ordet bild i alt-texten. Skärmläsare informerar automatiskt att det handlar om en bild så den informationen behöver man inte lägga till. Samma sak gäller för sökmotorer, de förstår också att det handlar om en bild.

Det finns en del verktyg som automatiskt med hjälp av AI kan generera alt-texter baserat på bildens innehåll. Ofta skapar de verktygen riktigt bra beskrivningar, men de är långt ifrån felfria. Därför bör du, om du använder någon form av automatiskt verktyg, alltid kontrollera resultatet innan du publicerar resultatet.

I WordPress kan du lägga till alt-text till bilder på två ställen. Antingen i mediabiblioteket eller inne på sidan i bildblockets inställningar. Skillnaden är att om du lägger till alternativ text i mediabiblioteket kommer den texten användas på alla ställen där du använder bilden. Har du tänkt att använda samma bild på flera ställen sparar du lite tid genom att lägga till alt-texten i mediabiblioteket. Lägger du till alt-text inne på själva sidan kommer den texten bara höra ihop med bilden på den sidan. Det gör att du å andra sidan inte behöver ha samma alt-text på andra sidor där du använder samma bild.

Alt-texter är långt ifrån det enda som behövs för att göra webben mer tillgänglig för alla. Men det är en enkel detalj att åtgärda för oss som arbetar med webbplatsen.Så det är något alla webbplatser, oavsett lag eller inte, kan tillhandahålla till sina besökare.

Vill du få mer tips och råd om hur du ska skriva alt-texter kan du besöka W3C:s webbplats eller läsa den här tidigare artikeln i Tips&trix-bloggen. Där du hittar en hel del riktlinjer för bilder och tillgänglighet.