Hur en lättillgänglig läsning av bilder är möjlig!

I digitaliseringens tider får frågan om tillgänglighet inte försummas. Ett sätt att göra det lättare för personer med funktionsnedsättning att få tillgång till innehåll på internet är genom så kallade alternativa texter. Dessa texter är utformade för att förse personer med vissa funktionsnedsättningar med innehållet på en webbplats i en form de kan förstå. Men: Vad är egentligen en sådan alternativ text? Vem behöver dem? Och hur kan man skapa en?

För att göra webbplatser och webbinnehåll tillgängliga är alternativa texter, bland annat, mycket viktiga för att underlätta åtkomst för personer med funktionsnedsättningar. De förmedlar information och funktioner för blinda och synskadade personer samt för personer med fysiska eller kognitiva funktionsnedsättningar. De hjälper också människor att förstå grafik, foton och kontroller. Skärmläsare eller punktskriftsdisplayer använder textalternativen, vilket gör dessa element tillgängliga för personer med funktionsnedsättningar.

Å andra sidan är de också användbara för sökmotoroptimering. Textalternativen överför informationen om en bild till sökmotorerna. Detta förbättrar sökbarheten.

Hur skapar man textalternativ?

Svaret på frågan om hur man skapar ett alternativtext är ganska enkelt: för att göra detta, infoga bara en alternativtext i lämpligt område av ett element som ska förses med en sådan text. De flesta utvecklare använder detta i ett så kallat CMS. Förkortningen CMS står för Content Management System. Detta är en programvara som används för att skapa och hantera webbinnehåll.

HTML-programmeringsspråket kan också användas för detta. Det är där alt-attributet eller även kallat alt-taggen kommer in i bilden. Där infogas det inuti img-taggen. Texten skrivs i det inre området av alt-attributet, vilket sedan matas ut via hjälpteknikerna.

Detta ensamt räcker dock inte. Attributet title bör inte heller glömmas bort, eftersom det finns skärmläsare som inte läser beskrivningen av alt-attributet, utan beskrivningen av title-attributet. Därför är det också vettigt att ange identisk text för båda taggarna. Dessutom har detta funktionen att visa innehållet som ytterligare information om ett element när muspekaren förs över området.

Dessutom finns aria-attributet. Mer exakt, aria-label-attributet eller även aria-labelledby-attributet. Dessa används för att märka knappar eller formulärfält.

De olika typerna av bilder

I en värld där vi blir alltmer digitala räcker det inte att bara skapa textalternativ. Det är mycket mer effektivt att beskriva de olika typerna av bilder korrekt, eftersom de också skiljer sig åt i sin funktion. Dessa måste dock först identifieras. Beskrivningar är värdelösa om de inte kan återspegla en bilds funktion. Så frågan uppstår: Vilka typer av bilder finns det? Och vad är det bästa sättet att beskriva dem?

Först bör du bekanta dig med skillnaderna mellan de olika typerna av grafik. Det är viktigt att förstå syftet med en grafik. Generellt sett skiljer man mellan informativ, funktionell och dekorativ grafik. Dessutom finns det så kallade typsnitt. Här är beskrivningen mycket enkel, man tar helt enkelt över texten, som ska ses i diagrammet.

Informativa bilder

När det gäller informativa bilder förmedlas det synliga innehållet i en grafik genom alternativa texter. Uppmärksamhet ägnas åt information som är relevant för bildens budskap. Ett exempel på detta är en logotypbeskrivning. Här ges en kort beskrivning av hur logotypen ser ut och vem den kommer från.

I följande exempel integreras ett textalternativ i en logotyp i HTML:

<bild

src="logotyp.jpg"

alt="Eye-Able-logotypen. Den representerar ett öga."

titel="Eye-Able-logotypen. Den representerar ett öga.">

</img>

Här bäddas en bildfil in i HTML med hjälp av img-elementet, där src-attributet anger bildens källa. Beskrivningen av grafiken infogas inom citattecken i alt- och title-attributen. På så sätt matas textinnehållet "Eye-Able-logotypen. Den representerar ett öga" ut via skärmläsaren eller punktskriftsdisplayen.

På så sätt undanröjs barriären och alla som använder hjälpmedelsteknik kan förstå vad som syns i bilden.

Diagram

Om det däremot är ett diagram måste detta alltid avgöras från fall till fall. Detta beror ofta på typen och informationen som finns. Om diagrammet bara innehåller lite information kan detta inkluderas i den alternativa texten. Till exempel "Presenterar partiernas valresultat i ett stapeldiagram. Parti A: 40 %, Parti B: 30 %, Parti C: 20 %, och så vidare." Om något mer komplext eller längre presenteras rekommenderas det dock att inkludera den detaljerade informationen i en efterföljande text. Den alternativa texten bör då endast ange diagrammets typ och syfte. Dessutom kan det anges att den mer detaljerade beskrivningen följer nedan. Ett exempel skulle vara ett diagram som visar befolkningssiffrorna för de tyska delstaterna. Innehållet skulle då lyda: "Representerar befolkningssiffrorna för de 16 delstaterna i ett stapeldiagram. Obs: Den mer detaljerade beskrivningen följer i texten".

Funktionella bilder

Låt oss nu titta på de funktionella bilderna. Dessa är länkade grafiker. De är indelade i länkar, element eller knappar. I textalternativen definierar du funktionen och inte vad som ska kännas igen. Istället anger du där länken leder till.

Här är ett sådant exempel i HTML för en länkad grafik:

<a href=“ https://eye-able.com/ >

<img src=“logotyp.jpg“

alt="Startsida från Eye-Able"

titel="Startsida från Eye-Able"

</img>

</a>

a-Taggen och href-attributet används i HTML för att skapa en länk. I det här fallet skapas länken till sidan. https://eye-able.com/ I img-elementet ser vi återigen logotypen för Eye-Able, men den här gången beskriver attributen alt och title funktionen snarare än grafiken. Således matas innehållet "Startsida för Eye-Able" nu ut via hjälpmedelsteknik.

Detsamma gäller symboler. Om till exempel en diskett används är ikonens utseende inte relevant för utdata med en skärmläsare eftersom den symboliserar funktionen att spara. Ett annat exempel är sökikoner. Huruvida det är ett förstoringsglas eller inte är irrelevant. Mycket mer intressant är handlingen bakom det. Detta representerar ett sökalternativ eller början på en sökning.

Situationen är liknande med knappar. En knapp som representerar en pil som pekar åt höger ska aldrig ha "pil som pekar åt höger" i alternativtexten. För en seende person är det tydligt att nästa sida öppnas när man klickar på den, men inte för blinda. Detta beror på att de bara hör "pil till höger" via röstmeddelandet. Detta är inte tillräckligt tydligt eller visar inte att nästa sida öppnas när knappen trycks ner. Därför är det mer meningsfullt att förse dessa alternativtexter med "gå till nästa sida" eller "fortsätt skrolla".

Dekorativa bilder

En annan typ av grafik är dekorativa bilder. Dessa används för att dekorera en webbsida. Proceduren för att skapa alternativa texter är mycket enkel här. Här lämnas innehållet i den alternativa texten tomt. Det är viktigt att attributet för den alternativa texten fortfarande finns kvar. Endast textinnehållet lämnas tomt här. Detta har till följd att skärmläsaren hoppar över denna irrelevanta grafik i utdata.

Hur skriver man bra alternativa texter?

Nu när de olika grafikerna har introducerats återstår bara en fråga: "Hur formulerar man optimala alternativa texter?" När man väl känner till alla dessa finesser och skillnader mellan bilderna finns det bara några få regler att följa. Följande tips kan hjälpa:

1. Början av ett textalternativ:

   Här ska man se till att inga dubbletter uppstår. Början bör därför inte börja med: "Bilden ...", "Grafiken ...", "Fotot ..." eller "Länken" .... Oavsett om det är en grafik eller en länk känns det igen och visas ändå av skärmläsare. Därför bör detta utelämnas.

2. Texternas längd:

   Hur lång en alternativ text ska vara är inte specificerat. En till två meningar bör dock räcka för att beskriva en grafik. Den ideala längden är 80 tecken. Varför 80? Blinda personer läser ofta dessa texter med hjälp av en punktskriftsdisplay. Punktskriftsdisplayer kan skriva ut mellan 40 och 80 tecken åt gången. För tydlighetens skull är det därför lämpligt att hålla sig till denna gräns. Naturligtvis kan en text vara längre. Den bör dock inte överstiga 120 tecken.

3. Stavning och interpunktion:

   Man måste vara noggrann med att stava korrekt. Om ett ord innehåller ett stavfel kan det snabbt leda till tvetydighet, eftersom en skärmläsare matar ut exakt det som lagras i den alternativa texten. Likaså spelar korrekt grammatik en viktig roll för att förstå bilder. Men korrekt interpunktion är också relevant. Felaktig eller saknad interpunktion gör det svårt för lyssnaren att förstå grafiken. På grund av detta bör en stavnings- och grammatikkontroll utföras innan textinnehållet infogas.

4. Upphovsrätt:

   Många bilder har en upphovsrättsmeddelande. Men är denna information viktig för att förstå en bild? Svaret är: Nej! För en bra formulering av textalternativ är denna information ointressant, eftersom i en bildbeskrivning skrivs bara det viktigaste. Därför bör denna information utelämnas.

5. Feed-back:

   Det är lätt att avgöra om bildbeskrivningen är lyckad. Men hur? Denna fråga är lätt att besvara. Den kräver inte mycket ansträngning. En kort feedback från en blind eller synskadad person ger information om huruvida textinnehållet formulerades förnuftigt. Men inte alla känner en person med synnedsättning. Detta kan lösas på ett annat sätt. Alla som ännu inte har sett bilden kan tillfrågas här. Detta kan göras här skriftligen, förstås, men även per telefon. Så snart en "positiv" feedback kommer hit är beskrivningen lyckad.

Vad händer egentligen när alternativa texter saknas?

Bristen på alternativa texter för bilder kan vara särskilt irriterande för blinda användare. Det skulle innebära att de inte skulle kunna se innehållet i grafiken. Samtidigt skulle skärmläsaren i ett sådant fall bara visa filnamnet, till exempel: "img123.jpg". En sådan beskrivning skulle inte hjälpa någon. Utvecklare bör därför alltid se till att använda textinnehåll. Det är dock också viktigt att känna till skillnaderna för att kunna beskriva bilder och grafik på ett meningsfullt sätt. Hjälpmedelstekniker kan sedan återge dem med hjälp av textalternativen. Detta gör också internet lite mer tillgängligt för alla.