Visar papper som är fasttejpade på en vägg. På pappren är de olika tillgänglighetssymboler.

Tillgänglighet i bilder | #2

Digital inkludering är en komplex fråga som debatterats i många år. Det är också en fråga som får allt större betydelse i takt med att vi går mot en alltmer digital värld. I detta inlägg tipsar jag om hur du och ditt företag kan arbeta med bilder på ett tillgängligt sätt.

Vad är tillgänglighet?

Tillgänglighet refererar till designen av produkter, tjänster eller miljöer för människor som upplever någon form av funktionshinder. Det kan exempelvis handla om synskada, rörelsehinder eller koncentrationssvårigheter. Att göra något tillgängligt är då att med hjälp av design göra de möjligt för alla, oavsett hinder, att tillgodogöra sig innehållet eller utföra tjänsten. Design är ett brett begrepp men jag använder det för att beskriva produktens eller tjänstens konstruktion, utseende och skapandeprocess.

Bakgrund

Som nämndes tidigare är tillgänglighet på internet en fråga som diskuterats flitigt genom åren. I maj 1999 publicerade World Wide Web Consortium (W3C), ett internationellt erkänt community som arbetar för att ta fram webbstandarder, de första riktlinjerna för tillgänglighet Web Content Accessibility Guidelines 1.0 (WCAG). 2008 släpptes en uppdaterad version, WCAG 2.0, och det är denna version som många refererar till när man talar om tillgänglighet på webben idag. Riktlinjerna i WCAG är utformade som påståenden som man kan testa mot sin plattform. Varje påstående har ett antal kriterier som är uppdelade i tre nivåer, A, AA och AAA, där A är den lägsta nivån. Sedan 2016 är det lagkrav inom EU att följa minst AA nivå vid upphandling av IT inom offentlig sektor.

Tillgänglighet diskuteras även på global nivå. I december 2006 antog FN en konvention om rättigheter för personer med funktionsnedsättning (CRPD). Det var 82 länder som skrev på konventionen direkt när signeringen öppnades 30 mars 2007, Sverige var ett av de länderna. Idag har mer än 150 länder skrivit under. CRPD klargör dels vilka grundläggande rättigheter människor med funktionshinder har men syftar även till att förändra synen och attityden gentemot funktionsnedsatta. Artikel 9 i konventionen är den del som inriktar sig på tillgänglighet. Där står det bland annat att personer med funktionsnedsättning ska ha tillgång till information och kommunikation, innefattande IT, på samma villkor som andra.

Detta är endast två exempel av en mängd olika initiativ som tagits för att adressera tillgänglighet på webben. Trots alla dessa ramverk och initiativ så är de få webbplatser som får högt betyg vid närmare undersökning. Här följer några tips på hur du kan göra för att förbättra din eller ditt företags webbplats gällande tillgänglighet i bilder.

Tillgänglighet i bilder

Bilder och grafik gör att innehållet ser trevligare ut och blir enklare att förstå för många människor, speciellt de som har kognitiva funktionsnedsättningar eller inlärningssvårigheter. Det kan dock också skapa hinder när webbplatser som förlitar sig till stor del på bilder inte gör dem tillgängliga. Bilder måste i de flesta fall ha textalternativ som beskriver informationen eller funktionen som de representerar. Hur det ska göras beror på vilken typ av bild det handlar om. Här följer en lista med sex olika typer av bilder och hur du gör dem tillgängliga.

1. Informativa bilder

Detta är de bilder som grafisk representerar begrepp och information, vanligtvis bilder, foton och illustrationer. Informativa bilder förmedlar enkla begrepp eller information som kan uttryckas i en kort fras eller mening. Textalternativet bör förmedla den mening eller det innehåll som visas visuellt, de behöver nödvändigtvis inte vara en bokstavlig beskrivning av bilden. Om bilden används som supplement till övrigt innehåll, och innehållet beskriver bildens innehåll, behövs ingen extra beskrivning. Beskrivningen blir då snarare ett störande hinder som upprepar det som redan sagts. Här följer några exempel på bilder och hur de bör beskrivas.

Exempel 1: Bilder som supplement till annan information

Pannkakor med blåbär, grädde och florsocker.

Vi leker med tanken att denna bild används i toppen på en sida med ett recept på pannkakor med blåbär. Bilden är då ett komplement till texten som förklarar hur man gör. Ett kort textalternativ är tillräckligt för att beskriva informationen som visas visuellt men inte förklaras i texten. I detta fall skulle textalternativet kunna vara ”Pannkakor staplade med grädde, blåbär och florsocker”.

Kodexempel:
<p>
  <img src="pancakes.jpg" alt="Pannkakor staplade med grädde, blåbär och florsokcer.">
</p>

Exempel 2: Bilder som etiketter för annan information

Telefon: 070-123 45 67

E-post: info@exempel.se

Detta exempel visar två bildikoner – en för telefon och en för e-post. För att göra den visuella representationen tillgänglig ska du lägga på textalternativen ”Telefon:” och ”E-post:”

Kodexempel:
<p>
  <img src="phone.jpg" alt="Telefon:">070-123 45 67
  <img src="email.jpg" alt="E-post:">info@exempel.se
</p>

Vill du dyka djupare i ämnet kan du läsa mer om informativa bilder på W3Cs webbplats.

2. Dekorativa bilder

De bilder som inte adderar någon information till en sidas innehåll kallas för dekorativa bilder. Till exempel kan informationen som tillhandahålls av bilden redan finnas med i angränsande text, eller så används bilden enbart för att göra webbsidan mer visuellt attraktiv. I båda fallen bör du ange en tom alt text (alt=””) för att skärmläsare ska ignorera bilden. Textvärden på dessa bilder skulle bara störa skärmläsares uppläsning eller distrahera användaren om ämnet skiljer sig från det i angränsande text. Att plocka bort alt-attributet är inte heller ett alternativ, vissa skärmläsare läser då istället upp filnamnet på bilden.

Om en bild är dekorativ eller informativ kan bara du som författare bedöma. För hjälpa dig bedöma tänker jag ge dig några riktlinjer. Bilder är dekorativa när de:

  • Används som visuell styling, såsom ramar, linjer, distanser eller hörn;
  • Kompletterar länkar för att göra de mer visuellt attraktiva eller öka den klickbara ytan;
  • Illustrerar den angränsande texten men inte tillför mer information;
  • Beskrivs av omgivande text.

Här följer två exempel på dekorativa bilder och hur de implementeras.

Exempel 1: Bilder som används för visuell styling

Denna bild används som bård i designen på webbplatsen och är endast för dekorativt syfte och ska inte beskrivas. Lämna alt-textfältet tomt för att dölja bilden från skärmläsare.

Kodexempel:
<img src="board.jpg" alt="">

Exempel 2: Bild som del av en länk

BLOMMOR

Bilden på blommorna till vänster i länken gör att länken blir lättare att se och gör den klickbara ytan större men den tillför ingen ytterligare information. I detta fall bör du precis som i tidigare exempel lämna alt-textfältet tomt.

Kodexempel:
<a href="flowers.html">
  <img src="flowers.jpg" alt="">
  <span>BLOMMOR</span>
</a>

Om du vill se fler exempel kan du läsa mer om dekorativa bilder på W3Cs webbplats.

3. Funktionella bilder

Funktionella bilder används för att förmedla åtgärder snarare än information. De används knappar, länkar och andra interaktiva element. I dessa bilder ska textalternativet beskriva vilken åtgärd som utförs vid interaktion med elementet istället för att beskriva själva bilden. Till exempel skulle bilden på en skrivare som indikerar en utskriftsfunktion märkas med ”Skriv ut” istället för ”(Bild på) skrivare” och sök med ”Sök” istället för ”förstoringsglas”.

Exempel 1: Logotyp i form av bild med länk

SilfverbergCreative logotyp Gå till SilfverbergCreatives startsida.

Denna bild är det enda innehållet i en länk som leder till webbplatsens startsida. Bilden har textalternativet ”Gå till silfverbergcreatives startsida.” för att indikera vart länken tar användaren.

Kodexempel:
<a href="http://www.silfverbergcreative.se">
  <img src="silfverbergcreative.png" alt="Gå till silfverbergcreatives startsida.">
</a>

Om länken också skulle innehålla text som identifierar vart den leder kan textalternativet skippas. Detta då det endast blir en störande repetition.

Kodexempel:
<a href="http://www.silfverbergcreative.se">
  <img src="silfverbergcreative.png" alt=""> SilfverbergCreatives startsida
</a>

Exempel 2: Ikon utan text som används för att illustrera en funktion

Följande bild är en ikon som föreställer skrivare. Dess syfte är att illustrera utskriftsfunktionalitet och den har därför textalternativet ”Skriv ut denna sida”. Här är det inte viktigt vad bilden visar utan vad som händer när du interagerar med den.
Skriv ut denna sida.

Kodexempel:
<a href="javascript:print()">
  <img src="print.png" alt="Skriv ut denna sida.">
</a>

Om du vill se fler exempel kan du läsa mer om funktionella bilder på W3Cs webbplats.

4. Bilder med text

Bilder med text bör generellt undvikas. Många användare är i behov av att kunna anpassa textens storlek eller färg för att kunna läsa, något som försvåras när texten är i bildform. Du som arbetar med digitala verktyg bör därför undvika att omvandla text till bild så långt då går. Det finns undantag till regeln men de är få. Det är godkänt om:

  • Texten är en logotyp.
  • Texten är av avgörande betydelse för att bildens syfte ska uppnås (exempelvis på skärmdumpar eller skyltar).

Om det enda du vill är att texten ska vara placerad på en bild finns det mer tillgängliga sätt att göra det på än att placera texten i bilden. Du kan till exempel placera texten över bilden med hjälp av CSS kod. Om du måste placera texten i bilden, och bilden inte faller in under de undantag som tidigare nämnts, ska alternativtexten innehålla samma ord.

Om du vill se fler exempel kan du läsa mer om bilder med text på W3Cs webbplats.

5. Komplexa bilder

Komplexa bilder innehåller mycket information – mer än vad som kan förmedlas i en kort fras eller mening. Det är vanligtvis:

  • grafer och diagram, inklusive flödesscheman och organisationskartor;
  • figurer och illustrationer där sidans text bygger på att användaren kan förstå bilden;
  • kartor som visar platser eller annan information så som väder.

I dessa fall krävs två textalternativ. Den första delen är den korta beskrivningen som är till för att identifiera bilden och, vid behov, ange platsen för den långa beskrivningen. Den andra delen är den långa beskrivningen – en textuell representation av den viktigaste informationen som bilden ger. Följande exempel visar olika metoder som kan användas för att ge sådana korta och långa beskrivningar.

Exempel: Beskrivning som innehåller strukturerad information

I det här exemplet har stapeldiagrammet nedan den korta beskrivningen ”Stapeldiagram som visar det totala antalet besök per månad för webbplatserna 1-3 under första kvartalet 2017, bilden beskrivs på separat sida som nås via länken efter bilden.”, som tillhandahålls via alt attributet för bilden. Den långa beskrivningen ger detaljerad information, inklusive skalor, värderingar, relationer och trender som visas visuellt i diagrammet. Den långa beskrivningen kan t.ex. peka på de konsekventa värdena för webbplats 1, ökande för webbplats 2 och minskande för webbplats 3. Det finns flera sätt att göra detta diagram tillgängligt på men jag rekommenderar att du lägger den långa beskrivningen på en separat sida som i exemplet nedan. Detta är för att inte göra sidan för komplicerad för dem som kan tillgodogöra sig innehållet visuellt, vi vill att de ska vara tillgängligt för dem också.

Stapeldiagram som visar det totala antalet besök per månad för webbplatserna 1-3 under första kvartalet 2017, bilden beskrivs på separat sida som nås via länken efter bilden.

Beskrivning av stapeldiagrammet som visar antalet besökare till exempel.se webbplatser under första kvartalet 2017.

Du kan klicka in på länken här ovanför om du vill se ett exempel på hur den långa beskrivningen skulle kunna se ut för diagrammet.

Kodexempel:
<p>
  <img src="diagram.png" alt="Stapeldiagram som visar det totala antalet besök per månad för webbplatserna 1-3 under första kvartalet 2017, bilden beskrivs på separat sida som nås via länken efter bilden.">
  <a href="2017-forsta-kvartalet.html">Förklaring av bilden på ett stapeldiagram som visar antalet besökare till exempel.se webbplatser under första kvartalet 2017.</a>
</p>

Om du vill se fler exempel kan du läsa mer om komplexa bilder på W3Cs webbplats.

6. Grupper av bilder

Ibland används flera bilder ihop för att tillsammans representera en bit information. Till exempel brukar flera stjärnikoner användas ihop för att representera ett betyg. I detta fall behöver endast den första bilden ha ett textalternativ, medan de andra ska ha tomma alt attribut för att ignoreras av hjälpmedelsteknik (exempel 1).

I andra fall kan det handla om en grupp av bilder som tillsammans bildar en samling av relaterade bilder. Till exempel kan de vara en samling av bilder på konst som är tematiskt relaterade. I det fallet behöver varje bild ha sitt textalternativ som beskriver det individuellt, såväl som dess förhållande inom gruppen (exempel 2).

Exempel 1: Flera bilder som tillsammans förmedlar en och samma information

Betyg 3,5 av 5 stjärnor.

Kodexempel:
<img src="star.png" alt="Betyg 3,5 av 5 stjärnor.">
<img src="star.png" alt="">
<img src="star.png" alt="">
<img src="star-half.png" alt="">
<img src="star-empty.png" alt="">

Exempel 2: En samling av bilder med samma tema

När det är en samling bilder är det bra om du börjar med att skriva en tydlig rubrik som förtydligar att de handlar om en tematisk samling. Därefter brukar jag oftast dela upp beskrivningen i två delar. Först beskriver jag vad som visas på bilden via alt attributet, därefter beskriver jag kontexten kort under själva bilden. Till exempel skulle textalternativet för den första bilden kunna vara ”En samling pyramider omgiven av öken.” och den kontextuella beskrivningen under bilder ”Pyramiderna i utkanten av Kairo, Egypten.”.

Samling av bilder på landmärken från hela världen

En samling pyramider omgiven av öken.
Pyramiderna i utkanten av Kairo, Egypten.

Stålbyggnad formad som en kon.
Eiffeltornet i Paris, Frankrike.

Ansikten som skulpterats ut ur en bergvägg.
Mount Rushmore i South Dakota, USA.

Kodexempel:
<h4>Samling av bilder på landmärken från hela världen</h4>
<p>
  <img src="pyramids.jpg" alt="En samling pyramider omgiven av öken.">
  <p>Pyramiderna i utkanten av Kairo, Egypten.</p>
</p>
<p>
  <img src="eiffeltower.jpg" alt="Stålbyggnad formad som en kon.">
  <p>Eiffeltornet i Paris, Frankrike.</p>
</p>
<p>
  <img src="mount-rushmore.jpg" alt="Ansikten som skulpterats ut ur en bergvägg.">
  <p>Mount Rushmore i South Dakota, USA.</p>
</p>

Tack!

Hoppas du lärt dig något nytt om bilder och tillgänglighet. Om du har några frågor eller funderingar så tveka inte att kontakt mig.