Hur barriärfri läsning av bilder är möjlig!

Delning uppmuntras:

Glasögon som ligger på en bok

I tider av digitalisering får ämnet tillgänglighet inte försummas. Ett sätt att underlätta för personer med funktionsnedsättning att få tillgång till innehåll på Internet är att använda så kallade alternativa texter. Dessa texter är utformade på ett sådant sätt att de kan förmedla innehållet på en webbplats till personer med vissa funktionshinder på ett sätt som de kan förstå. Men: Vad är egentligen en sådan alternativ text? Vem behöver dem?  Och hur man skapar en?

För att utveckla tillgängliga webbplatser och webbinnehåll är alternativa texter mycket viktiga för att underlätta tillgängligheten för personer med funktionsnedsättning. Dessa ger information och funktioner för blinda och synskadade, liksom personer med fysiska eller kognitiva begränsningar. De hjälper också till att förstå grafik, foton och kontroller. Skärmläsare eller punktskriftsskärmar använder textalternativen, vilket gör dessa element tillgängliga för personer med funktionshinder.

Å 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 upptäckbarheten.

Hur skapar man textalternativ?

Svaret på frågan om hur man skapar ett textalternativ är ganska enkelt: För detta ändamål infogas en alternativ text endast i motsvarande område av ett element som är försedd med sådan text. De flesta utvecklare tillämpar detta i ett så kallat CMS. Förkortningen CMS står för Content Management System. Detta är programvara som används för att skapa och hantera webbinnehåll.

HTML-programmeringsspråket kan också användas för detta. Där kommer alt-attributet eller alt-Tag kallas in i leken. Där sätts den in i img-taggen. I det inre området av alt-attributet skrivs texten, som sedan matas ut via hjälpmedelstekniken.

Men det räcker inte. Även titelattributet bör inte glömmas bort, eftersom det finns skärmläsare som inte läser beskrivningen av alt-attributet, utan titelattributet. Därför är det också vettigt att ange identisk text för båda taggarna. Dessutom har detta också funktionen att visa innehållet som ytterligare information om ett element när du flyttar musen över området.

Dessutom finns det aria-attributet. Mer specifikt attributet aria-label eller 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 mer och mer digitala räcker det inte bara med att skapa textalternativ. Mycket effektivare är den korrekta beskrivningen av de olika typerna av bilder, eftersom de också skiljer sig åt i funktion. Dessa måste dock först erkännas. Beskrivningar är meningslösa om de inte kan förmedla syftet med en grafik. Därför uppstår frågan: Vilka typer av bilder finns det? Och vad är det bästa sättet att formulera dem?

Först bör du bekanta dig med de enskilda skillnaderna i grafiken. Det är viktigt att förstå innebörden och syftet med en grafik. I allmänhet skiljer man mellan informativ, funktionell eller dekorativ grafik. Dessutom finns det så kallade typsnitt. Här är beskrivningen väldigt enkel, du tar bara över texten som kan ses i grafiken.

Informativa bilder

När det gäller informativa bilder förmedlas det synliga innehållet i en grafik via de alternativa texterna. På så sätt uppmärksammas den information som är relevant för bilduttalandet. Ett exempel på detta är en logotypbeskrivning. Här är en kort beskrivning av hur logotypen ser ut och vem logotypen kommer från.

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

Att Eye-Able Logotyp. Det representerar ett öga.

<img

src="logotyp.jpg"

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

title="Den Eye-Able Logotyp. Det representerar ett öga." >

</img>

Här används img-elementet i HTML för att inkludera en bildfil och src-attributet bestämmer bildkällan. Beskrivningen av bilden infogas inom citattecken i alt- och titelattributen. Således textinnehållet "Den Eye-Able Logotyp. Det representerar ett öga" via skärmläsaren eller punktskriftsdisplayen.

Detta tar bort barriären och gör det möjligt för alla användare av hjälpmedelsteknik att lära sig vad som kan ses i den här bilden.

Diagram

Men om detta är ett diagram bör detta alltid bestämmas individuellt. Detta beror ofta på vilken typ och information den innehåller. Om grafiken bara består av några få bitar av information kan detta inkluderas i den alternativa texten. Till exempel: "Visar partiernas valresultat i ett stapeldiagram. Parti A: 40 %, parti B: 30 %, parti C: 20 % osv." Men om något komplext eller längre presenteras är det lämpligt att infoga detaljerad information i en efterföljande text. Här bör endast diagrammets typ och syfte inkluderas i den alternativa texten. Dessutom kan man påpeka att nedan följer den mer detaljerade beskrivningen. Ett exempel på detta skulle vara om grafen skulle visa befolkningssiffrorna i de federala staterna. Då skulle innehållet lyda som följer: "Visar befolkningssiffrorna för de 16 delstaterna i ett stapeldiagram. Anmärkning: Den detaljerade beskrivningen beskrivs i följande text."

Funktionella bilder

Låt oss sedan titta på de funktionella bilderna. Dessa är länkade grafik. De är indelade i länkar, element eller knappar. I textalternativen definieras funktionen och inte vad som kan kännas igen. I stället anger du vart länken leder.

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

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

<img src=“logo.jpg“

alt="Startsida för Eye-Able"

title="Startsida för Eye-Able"

</img>

</a>

Den a-Tag och href-attributet används i HTML för att skapa en länk. I det här fallet länken till sidan https://eye-able.com/ skapad. I img-elementet kan du se igen logotypen för Eye-Able, men den här gången beskriver alt- och titelattributen funktionen, inte grafiken. Så nu innehållet "Hem för Eye-Able" utfärdas.

Det är samma sak med 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. Om detta är ett förstoringsglas spelar ingen roll. Mycket mer intressant är åtgärden bakom den. Då visas ett sökalternativ eller början på en sökning.

Det är liknande med knappar. En knapp som representerar en pil till höger ska aldrig lagras i alternativtexten med "pil till höger". För en seende person är det uppenbart att nästa sida öppnas när du klickar på den, men inte för blinda personer. Eftersom de bara hör "pil till höger" via röstutgången. Detta är inte tillräckligt tydligt eller det går inte att känna igen att nästa sida öppnas när knappen körs. Därför är det mer meningsfullt att lagra dessa alternativa texter med "till nästa sida" eller "fortsätt rulla".

Dekorativa bilder

En annan typ av grafik är de dekorativa bilderna. Dessa används för att dekorera en webbplats. Förfarandet för att skapa alternativa texter är mycket enkelt här. Här lämnas innehållet i textalternativet tomt. Det är viktigt att attributet för de alternativa texterna fortfarande är närvarande. Endast textinnehållet förblir gratis här. Detta får till följd att skärmläsaren hoppar över den här irrelevanta bilden när den skrivs ut.

Hur skriver man bra textalternativ?

Nu när de olika grafikerna har presenterats återstår bara en fråga: "Hur formulerar du optimala alternativa texter?" Om du känner till alla dessa finesser och skillnaderna i bilderna finns det bara några regler att följa. För detta ändamål kan följande instruktioner följas:

  1. Början av ett textalternativ:

    Här är det viktigt att se till att ingen fördubbling sker. Så början bör inte börja med: "Bilden ...", "Grafiken ...", "Fotot ..." eller "Länken" ... börja. Om det här är en grafik eller en länk känns igen och skrivs ut av skärmläsarna ändå. Därför bör det undvikas.

  2. Texternas längd:

    Hur lång en alternativ text ska vara anges inte. Men för att beskriva en grafik bör en eller två meningar räcka. Helst är det 80 tecken. Varför 80? Blinda människor läser ofta dessa texter med hjälp av en punktskriftsdisplay. Punktskriftsskärmar kan mata ut mellan 40 och 80 tecken åt gången. För bättre tydlighet för användarna är det därför lämpligt att vara uppmärksam på denna begränsning. Naturligtvis kan en text ibland vara längre. Detta bör dock aldrig överstiga 120 tecken.

  3. Stavning och skiljetecken:

    Var uppmärksam på korrekt stavning. Om ett ord innehåller ett stavfel kan tvetydigheter snabbt uppstå, eftersom en skärmläsare skriver ut exakt vad som lagras i den alternativa texten. På samma sätt spelar rätt grammatik en viktig roll för att förstå bilder. Men korrekt skiljetecken är också relevant. Felaktiga eller saknade skiljetecken gör det svårt för lyssnare att förstå grafiken. Av denna anledning bör en stavnings- och grammatikkontroll utföras innan textinnehållet infogas.

  4. Upphovsrätt:

    Många grafik har upphovsrättsbevis. 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 endast det viktigaste placeras i en bildbeskrivning. Därför bör denna information utelämnas.

  5. Feedback:

    Huruvida bildbeskrivningen lyckades kan snabbt tas reda på. Hur? Frågan är lätt att svara på. Detta kräver inte mycket ansträngning. Huruvida ett textinnehåll har skrivits meningsfullt klargörs med en snabb återkoppling från en blind eller synskadad person. Men inte alla känner till en person med ögonskador. Men detta kan också lösas annorlunda. Den som ännu inte haft bilden framför sig kan intervjuas här. Naturligtvis kan detta bestämmas här skriftligen, men också per telefon. Så snart en "positiv" feedback kommer hit är beskrivningen framgångsrik.

Vad händer om alternativa texter saknas?

Om det inte finns några alternativa texter för bilder kan det vara irriterande, särskilt för blinda användare. Detta skulle innebära att de inte skulle märka innehållet i grafiken. Samtidigt skulle Scrrenreader i ett sådant fall bara mata ut 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. Men det är också viktigt att känna till skillnaderna för att kunna beskriva bilderna och grafiken på ett meningsfullt sätt. Hjälpmedel kan sedan reproducera detta med hjälp av textalternativen. Detta gör också Internet lite mer tillgängligt för alla.

Enkelt för alla

Intresserad? Vi hjälper dig gärna.

Med över 25 funktioner kring digital tillgänglighet, hjälper Eye-Able hjälper dig också att på ett hållbart sätt minska dina hinder. På så sätt gör du din information tillgänglig för alla och utesluter inte besökare – kort sagt: Du öppnar upp en ny målgrupp, utan höga marknadsföringsvolymer.

Ikonen visar tillgänglighetssiffran

Samråd

Icke-bindande samråd om digital tillgänglighet i allmänhet

Ikonen visar tillgänglighetssiffran

Analys

Diskussion om möjliga optimeringspotentialer på din webbplats

Ikonen visar tillgänglighetssiffran

Live Demo

Presentation av hjälpprogrammet direkt på din webbplats

Fler artiklar

Om du vill ha något mer:

Katedralen i Köln

Eye-Able når Rhen

Eye-Able når nya stränder. Från din hemstad Würzburg am Main, bort till Rhen! Staden Köln ger nu sitt bidrag och gör sitt