Alt-text

Alt-text är den korta beskrivande text du kopplar till en bild så att den som inte kan se bilden ändå förstår vad den visar. Den lever i sidans kod, i bildens image tag, och syns normalt inte för en seende besökare, men den gör tungt arbete i bakgrunden: en skärmläsare läser upp den för någon med nedsatt syn, och en search engine använder den för att tolka vad bilden föreställer.

Tänk dig att du beskriver en bild i telefon för en kompis som inte ser skärmen, eftersom det ungefär är den nivå av tydlighet som en bra text alternative ska ha. Inte en roman, inte ett enda staplat sökord, utan en sann och kort förklaring av motivet i sitt sammanhang, ungefär samma omsorg du lägger på en genomtänkt innehållsstrategi för din sajt. Hur väl bilderna beskrivs spelar in i hur trovärdig sidan upplevs, något vi går igenom i vår ordlista om E-E-A-T.

Vad alternativtext faktiskt är

Alt-text, på svenska alternativtext, är värdet i alt-attributet på en bild i HTML, och när en webbläsare inte lyckas to load bilden visas texten i stället medan en skärmläsare läser upp den högt. Det är därför the text alternative ibland kallas just alternativtext: den är ett alternativ till själva grafiken när bilden av någon anledning inte når fram till besökaren, vilket också spelar in när du jobbar med sidhastighet och laddningstid.

Begreppet hör hemma i både tillgänglighet och SEO, vilket är ovanligt för en så liten detalj. Riktlinjerna i WCAG, som ligger till grund för regelverk som EAA i EU och Americans with Disabilities Act i USA, kräver att meningsbärande bilder har ett text alternative, och samtidigt läser search engines som Google av samma text för att understand what the image föreställer. Kraven gäller oavsett om besökaren sitter i England, Canada eller New York, och de omfattar även ett document, en PDF och inbäddade tables, något du kan koppla ihop med hur du tänker kring trovärdighet och E-E-A-T. Vill du förstå hur den här koden hjälper Google att tolka en sida är strukturerad data en närbesläktad pusselbit.

En bildtext (caption) syns under bilden för alla, medan alt-texten är dold och riktar sig till dem som inte ser the image, så de kan komplettera varandra men ska inte säga exakt samma sak. I praktiken behöver du sällan röra koden, eftersom ett CMS som WordPress eller Drupal har ett eget fält där du fyller i texten, och vill du gå djupare i plattformen hittar du mer i vår guide till SEO för WordPress, men det hjälper att veta att det under huven handlar om en image tag och dess alt-attribut. Samma princip att märka upp innehåll för maskiner går igen i strukturerad data.

• Bildtext: synlig för alla, ger sammanhang eller en källa.
• Alt-text: dold, beskriver motivet för skärmläsare och search engines.
• Filnamn: en svagare signal som aldrig ersätter alt-texten.
• Title-attribut: visas vid hovring, men är ingen ersättning för alt.
• Alt-attributet: samma princip i ett document, en PDF och Microsoft Office.

Varför alternativtext spelar roll

Det finns två tunga skäl, och de drar åt samma håll, vilket gör det här till en av få insatser där du slipper välja mellan människa och maskin. Det första handlar om besökare, det andra om search engines, och tillsammans påverkar de hur sidan i slutänden upplevs både av människor och av Google, ungefär som du resonerar i en genomtänkt innehållsstrategi.

För en visually impaired besökare är texten ofta den enda vägen in i en bild, eftersom en skärmläsare inte kan tolka pixlar utan bara läser den text du skrivit, och saknas den hör besökaren ingenting eller i värsta fall ett kryptiskt filnamn. För din community och dina customers är välskriven text helt enkelt en fråga om att ingen ska lämnas utanför, och i många fall är det dessutom ett lagkrav via WCAG och EAA. Vad som bygger den här sortens förtroende går vi närmare igenom i ordlistan om E-E-A-T.

En search engine ser ingen bild på samma sätt som du, utan lutar sig mot signaler runt omkring, och alt-texten är en av de tydligaste, eftersom den hjälper Google att understand what the image visar och därmed kan ge synlighet i bildsök och mer kontext åt sidan. AI-baserade ytor som AI Overviews bygger på att maskinen förstår innehållet, och hur du syns i dem berör vi närmare i ordlistan om GEO och AI-svar, eftersom text for bilder är en del av det underlaget. Att tunga sidor laddar snabbt spelar in i samma helhet, vilket vi tar upp i guiden om sidhastighet.

• Skärmläsaren läser upp din text ord för ord för besökare med disabilities.
• God text gör att fler kan ta del av hela sidan och dess innehåll, oavsett om du satsar brett eller lokalt som i Kalmar.
• Tillgänglighet är ofta även ett lagkrav via WCAG, EAA och liknande.
• Texten ger Google kontext om bildens innehåll och ämne.
• Den kan förbättra synligheten i Googles bildsök för rätt fråga.
• Den stärker sidans samlade relevans och hjälper AI Overviews tolka innehållet.

Så skriver du bra alternativtext i praktiken

Grundregeln är enkel, och allt annat följer av den: alt text should describe vad bilden visar, sant och kort, anpassat efter sammanhanget på just den sidan. Samma foto kan behöva olika text på en produktsida och i en nyhetsartikel, så tänk på vad bilden ska illustrera där den ligger, precis som du väger budskap mot sammanhang i en genomtänkt plan för ditt innehåll.

Bra text är descriptive utan att svälla, fångar det som har betydelse och utelämnar resten, och nämner färg (color) eller color contrast bara när det bär mening. Så här tänker du steg för steg.

1. Titta på bilden och fråga vad som är viktigt här, i det här sammanhanget.
2. Skriv en mening på vanlig svenska som beskriver det, gärna 5 till 15 ord.
3. Ta bort onödiga inledningar som bild av eller foto av.
4. Lägg in ett nyckelord bara om det passar naturligt i meningen.
5. Läs texten högt och kontrollera att den faktiskt beskriver motivet.

Olika bilder behöver olika behandling, för en produktbild, en logotyp, en knapp och ett diagram bär helt olika information. Ett komplext motiv som en graf, en decision tree eller tables med mycket data ryms sällan i en kort mening, så då ger du en sammanfattande text och lägger den fulla informationen i löpande text below the image. En funktionell bild som en länk eller knapp ska beskrivas efter vad som händer vid klick, inte efter hur grafiken ser ut, och vill du se hur konkurrenter löser samma sak ger en konkurrentanalys av deras sidor ofta bra idéer. Driver du WordPress hittar du de praktiska handgreppen i vår guide till SEO för WordPress.

• Sammanfatta huvudpoängen för ett diagram eller report i alt-texten.
• Lägg den fulla datan i text below the image eller i en närliggande tabell.
• Funktionell bild: beskriv åtgärden, till exempel Sök eller Lägg i varukorg.
• Logotyp som länk: skriv företagets namn i stället för en grafikbeskrivning.
• Dekorativ icon bredvid tydlig text: lämna alt-attributet tomt.
• Produktbild i en webbshop: ta med modell, färg och annat kunden väljer på.

Vanliga missförstånd och hur du undviker dem

Det cirkulerar en del seglivade myter om alternativtext, ofta från äldre råd som inte längre stämmer, och de leder lätt fel om du litar på dem, ungefär som de myter du stöter på när du jämför dig mot andra i en konkurrentanalys.

Det här är inte en plats att gömma sökord. Det är en beskrivning för en människa som inte ser bilden, och search engines är byggda för att förstå just det.

Allt fler verktyg föreslår text med AI, och det är bekvämt, men en maskin ser fortfarande inte sammanhanget på din sida. AI är hyfsad på att känna igen objekt, personer och text i bilden men sämre på att förstå varför just den bilden ligger där den ligger, så använd förslagen som utkast och redigera så att de passar sidan och dina customers innan du sparar, precis som du anpassar tonen efter vad som bygger trovärdighet enligt E-E-A-T. Hur AI-svar plockar upp ditt innehåll går vi närmare in på i ordlistan om GEO.

• Myt: ju fler nyckelord, desto bättre ranking. Fel, det är keyword stuffing.
• Myt: varje bild måste ha text. Nej, dekorativa images ska ha tomt alt.
• Myt: title-attributet är samma sak som alt. De fyller olika syften.
• Myt: filnamnet kan ersätta texten. Det är en svagare signal som hörs dåligt.
• Myt: AI-genererad text är facit. Den är ett utkast som alltid behöver granskas.

Alternativtext i dokument, PDF och olika CMS

Tillgänglighet slutar inte vid webbsidan, för i ett document du publicerar som en PDF ska bilderna också ha textalternativ, och i Microsoft Office finns ett eget fält för detta under bildens advanced settings. Fyller du i det i originalfilen innan export följer texten med, vilket är enklare än att redigera den färdiga PDF-filen i efterhand. Tänk på alt-texten som ännu ett sätt att strukturera innehåll för maskiner, i samma anda som strukturerad data.

I ett CMS som WordPress eller Drupal är det ännu smidigare, eftersom du fyller i fältet Alternativtext direkt vid uppladdning, ofta obligatoriskt som standard, och fler praktiska handgrepp för plattformen samlar vi i vår guide till SEO för WordPress. Du kommer långt med free tools och lite rutin: webbläsarens granska-läge visar befintliga alt-attribut och enkla tillgänglighetskontroller flaggar bilder utan text. När du ändå ser över bilderna är det ett bra tillfälle att kontrollera att de inte tynger sidhastigheten.

• Microsoft Word: alternativtext under bildens format-meny, viktigt före export till PDF.
• Excel och PowerPoint: alt-text per diagram och objekt i Microsoft Office.
• WordPress: fältet Alternativtext per bild i mediabiblioteket eller blockredigeraren.
• Drupal: alt-fält vid uppladdning, ofta påtvingat som standard.
• Free tools: granska-läge och tillgänglighetskontroller som flaggar bilder utan text.
• AI-förslag: använd som utkast, alltid granskade av en människa.

Har du redan tusentals images kan en genomgång ta tid, och då kan det vara värt att lägga några timmar själv eller ta in hjälp. En enskild bild tar någon minut att beskriva väl, och en full genomgång av en mindre sajt brukar landa på några timmars arbete, så det finns sällan skäl att betala dyrt för ett hantverk vem som helst kan lära sig på en eftermiddag. Vi på seoninja.se är en kunskapsbank snarare än en pushig byrå, så hör gärna av dig om du kör fast. Driver du dessutom lokalt kan du knyta ihop bildarbetet med den lokala synligheten, till exempel i vår guide om SEO i Göteborg, SEO i Stockholm, SEO i Umeå eller SEO i Västerås.

Vill du förstå hur bilderna passar in i en större plan är en genomtänkt innehållsstrategi nästa naturliga steg, och bygger du allt på WordPress hittar du resten i vår guide till SEO för WordPress.