Bilder
Om du ska ska använda en bild på en webbsida finns det en del att tänka på.
Bilder på VGR:s webbsidor ska vara meningsbärande, alltså tillföra något till texten den finns tillsammans med, eller sidan den är publicerad på.
Använd aldrig bilder för att dekorera en sida. Det tar fokus i onödan från ditt huvudsakliga innehåll. Använd inte heller bilder på gemensamma informationssidor på intranätet.
Använd VGR Mediebank för att publicera bilder till Optimizely. Inga bilder får publiceras direkt i Optimizely. Läs mer om Mediebanken och hur du får behörighet, på din förvaltnings intranät.
Bildriktlinjer
En bild kan ha många syften, den kan berätta en historia eller visa hur någon ser ut, förmedla en känsla eller förstärka ett budskap. När du väljer en bild ska du alltid fundera på vad du förmedlar med bilden och hur vi framstår som organisation, arbetsgivare och samarbetspartner.
I bildriktlinjerna i varumärkesmanualen kan du läsa om vad du ska tänka på när du fotar, beställer, köper och väljer bilder.
Att tänka på när du väljer bild
Behöver du verkligen en bild?
Det första att tänka på när det gäller bilder för webben är att de ska vara meningsbärande det vill säga de ska tillföra något en text inte kan förmedla. Vi har aldrig bilder enbart för dekoration.
Använd inte bilder för att visa text
Det är svårare att ta till sig text som finns som finns i en bild. Dels på grund av kontraster och dels på grund av att skärmläsare inte kan läsa den texten.
Använd text, inte bilder av text, för att visa text - Digg.se
Bilder påverkar prestandan
Bilder på en webbsida påverkar prestandan, sidan tar längre tid att ladda. Om en sida tar för lång tid att ladda kan besökare tröttna och lämna sidan innan den visats. Hur snabb en webbplats är påverkar också hur den rankas av Google. VGR Mediebank optimerar bilder för att visas på webben, men trots det försämrar varje bild prestandan. Ta hänsyn till prestandaförsämringen när du överväger en bild på en sida. Bilder i formatet JPG tar mindre plats än bilder i formatet PNG, båda formaten finns i VGR Mediebank.
Du kan själv testa hur lång tid en sida tar att ladda med olika uppkopplingar med verktyget WebPageTest.
Bilder ska beskrivas med en alternativ text
Alt-texter (förkortning för alternativ text) är ett tillgänglighetskrav och HTML-standard. Meningsbärande bilder ska ha alt-text, men i vissa fall kan bilder ges en tom alt-text om de bara är dekorativa. Men, återigen, undvik dekorativa bilder.
Alt-texten är en text som förklarar bildens budskap för en besökare som inte kan se bilden, eller helt enkelt väljer att inte visa bilder i sin webbläsare. Tänk på att alt-texten:
- ska vara beskrivande, kortfattad (max 150 tecken) och förmedla bildens budskap,
- är beroende av sammanhanget och hur bilden används på just den sidan,
- ska vara skriven som en mening med punkt på slutet.
- ska inte ge samma information som redan ges i brödtext eller bildtext,
- ska vara skriven med det viktigaste först och mindre viktig information sist.
Det finns ytterligare en antal saker att tänka på när det gäller alt-texter.
- 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 är viktigt att bilden är ett fotografi eller en illustration, kan det vara bra att skriva in detta i alt-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.
- 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 en kortfattad alt-text (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 ha alt-text, lämna fältet tomt.
W3C:s beslutsträd för alt-texter
Om du lägger in en bild i brödtextfältet måste du skriva bildtexten direkt i brödtexten.