Denna webbplats använder teknik som troligen inte stöds i din webbläsare, därför kan vissa saker se konstiga ut eller inte fungera. Vi rekommenderar att du byter till en modern webbläsare istället.
Gå direkt till huvudinnehållet

Bilder på rätt sätt

När du väljer en bild, tänk alltid: "Vad förmedlar jag med den här bilden?" "Vad vill jag berätta?" Hur framstår vi: trovärdiga, kunniga och kompetenta, förtroendeingivande, trygga?

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. 
Mer om hur vi arbetar med bilder inom VGR kan du läsa här

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 (t ex alt = ""). 

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 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. I VGRs mallar får bilder som inte har alt-text automatiskt ett null atrribut som alt-text. 
  • 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 ALDRIG detta 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 eempel när grafer och figurer används för att förmedla information som inte finns i brödtexten (se nedan).
  • Komplexa bilder
    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) 
    Klickbara bilder används endast i undantagsfall på VGRs 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.



Senast uppdaterad: 2019-07-19 15:05