Bilder på rätt sätt

Bilder ska stötta innehållet på sidan

Alla bilder på VGR:s webbplatser ska vara meningsbärande. Det innebär en bild som tillför något till texten den finns tillsammans med, eller sidan den är publicerad på. Använd aldrig bilder enbart i dekorativt syfte då det stjäl fokus i onödan från ditt huvudsakliga innehåll. Använd heller aldrig bilder på gemensamma informationssidor på vårt/våra intranät.

 

Bilder ska ha alt-text

Varje bild måste ha ett alt-attribut, eller en alt-text (förkortning för alternativ text).

Detta är ett tillgänglighetskrav och HTML-standard. Meningsbärande bilder ska ha alt-text men i vissa fall kan bilder ges ett tomt eller null alt attribut om de enbart är dekorativa. 

Alt-texten är en text som förklarar bildens innehåll för en användare som inte kan se bilden, eller helt enkelt väljer att inte visa bilder. Tänk på att;

• Alt-texten ska vara enkel, kortfattad (max 150 tecken) och tydlig och tillföra texten samma innehåll som bilden gör för den som ser den. 
• Alt-texten är beroende av sammanhanget och hur bilden används på just den sidan.  Samma bild kan alltså ha olika alt-texter beroende på sammanhanget.
• Bildens innehåll eller funktion ska presenteras så kortfattat som möjligt. Vanligtvis behövs inte mer än några ord, men ibland kan en kort mening eller två vara lämpliga. En alltför lång och utförlig text fungerar bättre som text på webbsidan. 
• Alt-texten ska inte ge samma information som redan ges i brödtext eller bildtext.
• Använd inte frasen bild på...  för att beskriva bilden. Skärmläsaren talar om för användaren att det är en bild. Om det faktum att en bild är ett fotografi eller en illustration, etc. är viktigt, kan det vara bra att skriva in detta i alternativ texten. 
• Bilder som inte innehåller någon meningsbärande information ska inte ha någon alt-text. För användaren, som får informationen på sidan uppläst, blir det onödigt brus att höra att en sida om trädgårdar har en bild på ett träd. Det är däremot intressant att få ett flödesschema om bevattning uppläst, om det finns som bild. Bilder som läggs in från VGR Mediebank och inte har alt-text får automatiskt ett null attribut som alt-text och läses inte upp av skärmläsare. 
• Om bild används som knapp ska alt-texten ha samma alt-text som texten på knappen. Om till exempel knappen visar ordet dokument och är en länk till dokumentsidan på webbplatsen, bör alt-texten vara dokument. Bilden kommer att identifieras som en länk av skärmläsaren, så "Länk till" är inte nödvändigt. När en bild innehåller enbart text kan texten som visas normalt användas som alternativ text.
• Ibland ser  man tipset att använda alt-text för att lägga till extra sökord för sökmotorer. Gör inte det om det inte är relevant för innehållet. Tillgänglighet prioriteras över SEO (sökmotoroptimering).
• Text i bild ska endast användas i undantagsfall, men om bilden har ett text-innehåll ska dess alt-text säga samma sak. Särskilt viktigt att tänka på till exempel när grafer och figurer används för att förmedla information som inte finns i brödtexten (se nedan).
• När ett likvärdigt alternativ för en komplex bild, som ett diagram, en graf eller en karta inte kan begränsas till ett kortfattat alt attribut (kanske ett par meningar i längd), bör alternativet tillhandahållas någon annanstans. Alternativt innehåll kan ofta presenteras inom sidans sammanhang, till exempel i en intilliggande datatabell. Alternativtexten kan också finnas på en separat webbsida som ger en längre beskrivning av den komplexa bilden. Länken kan vara intill bilden eller själva bilden kan länkas till den långa beskrivningssidan. Alternativtexten för bilden ska fortfarande beskriva bildens allmänna innehåll. 
• Klickbara bilder (så kallade Imagemaps eller  Bildkartor) används endast i undantagsfall på VGR:s webbplatser. Vid användning av klickbara bilder måste huvudbilden ha ett alt-attribut. Alt-attributet bör presentera det innehåll som presenteras med bilden. Om du till exempel har en karta över sjukhus i Västra Götalandsregionen som har länkar/hotspots vid varje sjukhus kan bilden ha ett alt attributvärde för sjukhus i Västra Götalandsregionen. Men om huvudbilden inte överför innehåll utan i första hand bara är en behållare för länkar/hotspots är alt = "" /alt null lämpligt för huvudbilden. Varje länk/hotspot måste sedan ha ett alt attribut, som var och en beskriver funktionen/ länken för just den hotspoten.
• Blocktypen puffblock (egentligen en bildsatt länk) ska inte i normalfallet inte ha alt-text (lämna tom för automatiskt null attribut). 

W3C:s beslutsträd för alt-texter