Hvordan en tilgængelig læsning af billeder er mulig!

I digitaliseringens tider må spørgsmålet om tilgængelighed ikke negligeres. En måde at gøre det lettere for mennesker med handicap at få adgang til indhold på internettet er gennem såkaldte alternative tekster. Disse tekster er designet til at give mennesker med visse handicap adgang til indholdet af en hjemmeside i en form, de kan forstå. Men: Hvad er sådan en alternativ tekst egentlig? Hvem har brug for dem? Og hvordan kan man lave en?

For at gøre hjemmesider og webindhold tilgængelige er alternative tekster blandt andet meget vigtige for at lette adgangen for mennesker med handicap. De formidler information og funktioner for blinde og synshandicappede samt for mennesker med fysiske eller kognitive handicap. De hjælper også folk med at forstå grafik, fotos og kontroller. Skærmlæsere eller brailledisplays bruger tekstalternativerne, hvilket gør disse elementer tilgængelige for mennesker med handicap.

På den anden side er de også nyttige til søgemaskineoptimering. Tekstalternativerne overfører informationen om et billede til søgemaskinerne. Dette forbedrer findbarheden.

Hvordan opretter man tekstalternativer?

Svaret på spørgsmålet om, hvordan man opretter et tekstalternativ, er ret simpelt: For at gøre dette skal du blot indsætte en alternativ tekst i det relevante område af et element, der skal forsynes med en sådan tekst. De fleste udviklere anvender dette i et såkaldt CMS. Forkortelsen CMS står for Content Management System. Dette er software, der bruges til oprettelse og administration af webindhold.

HTML-programmeringssproget kan også bruges til dette. Det er her, alt-attributten eller også kaldet alt-tagget kommer i spil. Der indsættes den i img-tagget. Teksten skrives i det indre område af alt-attributten, som derefter udskrives via de understøttende teknologier.

Dette alene er dog ikke nok. Titelattributten bør heller ikke glemmes, da der findes skærmlæsere, der ikke læser beskrivelsen af alt-attributten, men beskrivelsen af title-attributten. Derfor giver det også mening at angive en identisk tekst for begge tags. Derudover har dette også den funktion, at indholdet vises som yderligere information om et element, når musen holdes over området.

Derudover er der aria-attributten. Mere præcist aria-label-attributten eller også aria-labelledby-attributten. Disse bruges til at mærke knapper eller formularfelter.

De forskellige typer af billeder

I en verden, hvor vi bliver mere og mere digitale, er det ikke nok blot at lave tekstalternativer. Det er langt mere effektivt at beskrive de forskellige billedtyper korrekt, da de også adskiller sig i deres funktion. Disse skal dog først genkendes. Beskrivelser er ubrugelige, hvis de ikke kan afspejle et billedes funktion. Så spørgsmålet opstår: Hvilke billedtyper findes der? Og hvad er den bedste måde at beskrive dem på?

Først bør du gøre dig bekendt med forskellene mellem de forskellige typer grafik. Det er vigtigt at forstå formålet med en grafik. Generelt skelnes der mellem informativ, funktionel og dekorativ grafik. Derudover findes der de såkaldte skrifttyper. Her er beskrivelsen meget enkel, man overtager blot teksten, som skal ses i diagrammet.

Informative billeder

I tilfælde af informative billeder formidles grafikkens synlige indhold gennem alternative tekster. Der lægges vægt på information, der er relevant for billedets budskab. Et eksempel på dette er en logobeskrivelse. Her gives en kort beskrivelse af, hvordan logoet ser ud, og hvem det er fra.

I følgende eksempel er et tekstalternativ integreret i et logo i HTML:

<billede

src="logo.jpg"

alt="Eye-Able-logoet. Det repræsenterer et øje."

titel="Eye-Able-logoet. Det repræsenterer et øje.">

</img>

Her indlejres en billedfil i HTML ved hjælp af img-elementet, hvor src-attributten angiver billedets kilde. Beskrivelsen af grafikken indsættes i anførselstegn i alt- og title-attributterne. På denne måde udlæses tekstindholdet "Eye-Able-logoet. Det repræsenterer et øje" via skærmlæseren eller brailledisplayet.

På denne måde fjernes barrieren, og alle, der bruger hjælpemidler, kan forstå, hvad der ses i denne grafik.

Diagrammer

Hvis det er et diagram, skal dette dog altid afgøres individuelt. Dette afhænger ofte af typen og de indeholdte oplysninger. Hvis diagrammet kun indeholder få oplysninger, kan dette inkluderes i den alternative tekst. For eksempel: "Præsenterer partiernes valgresultater i et søjlediagram. Parti A: 40%, Parti B: 30%, Parti C: 20% osv." Hvis der derimod præsenteres noget mere komplekst eller længerevarende, anbefales det at inkludere de detaljerede oplysninger i en efterfølgende tekst. Den alternative tekst bør så kun angive diagrammets type og formål. Derudover kan det angives, at den mere detaljerede beskrivelse følger nedenfor. Et eksempel ville være et diagram, der viser befolkningstallene for de tyske delstater. Indholdet ville så lyde: "Repræsenterer befolkningstallene for de 16 delstater i et søjlediagram. Bemærk: Den mere detaljerede beskrivelse følger i teksten".

Funktionelle billeder

Lad os derefter se på de funktionelle billeder. Disse er linkede grafikker. De er opdelt i links, elementer eller knapper. I tekstalternativerne definerer du funktionen og ikke hvad der skal genkendes. I stedet specificerer du hvor linket fører til.

Her er et eksempel i HTML på en linket grafik:

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

<img src=“logo.jpg“

alt="Hjemmeside fra Eye-Able"

titel="Hjemmeside fra Eye-Able"

</img>

</a>

a-Tag og href-attributten bruges i HTML til at oprette et link. I dette tilfælde oprettes linket til siden https://eye-able.com/ I img-elementet ser vi igen logoet for Eye-Able, men denne gang beskriver alt- og title-attributterne funktionen snarere end grafikken. Indholdet "Hjemmeside for Eye-Able" udskrives nu via hjælpeteknologier.

Det samme gælder for symboler. Hvis der f.eks. anvendes en diskette, er ikonets udseende ikke relevant for output med en skærmlæser, fordi det symboliserer funktionen at gemme. Et andet eksempel er søgeikoner. Om det er et forstørrelsesglas eller ej, er irrelevant. Meget mere interessant er handlingen bagved. Dette repræsenterer en søgemulighed eller starten på en søgning.

Situationen er den samme med knapper. En knap, der repræsenterer en pil, der peger mod højre, bør aldrig have "pil, der peger mod højre" i den alternative tekst. For en seende person er det tydeligt, at den næste side åbnes, når man klikker på den, men ikke for blinde. Dette skyldes, at de kun hører "pil til højre" via stemmen. Dette er ikke tydeligt nok eller viser ikke, at den næste side åbnes, når der trykkes på knappen. Derfor giver det mere mening at give disse alternative tekster "gå til næste side" eller "fortsæt med at scrolle".

Dekorative billeder

En anden type grafik er dekorative billeder. Disse bruges til at dekorere en webside. Fremgangsmåden til at oprette alternative tekster er meget enkel her. Her lades indholdet af den alternative tekst være tomt. Det er vigtigt, at attributten for de alternative tekster stadig er til stede. Kun tekstindholdet lades være tomt her. Dette har den konsekvens, at skærmlæseren springer denne irrelevante grafik over i outputtet.

Hvordan skriver man gode alternative tekster?

Nu hvor de forskellige grafikker er blevet introduceret, er der kun ét spørgsmål tilbage: "Hvordan formulerer man optimale alternative tekster?" Når man kender alle disse finesser og forskelle i billederne, er der kun et par regler at følge. Følgende tips kan hjælpe:

1. Start på et tekstalternativ:

   Her skal det sikres, at der ikke opstår dubletter. Begyndelsen bør derfor ikke starte med: "Billedet ...", "Grafikken ...", "Fotoet ..." eller "Linket" .... Uanset om det er grafik eller link, genkendes og udskrives det alligevel af skærmlæsere. Derfor bør dette udelades.

2. Teksternes længde:

   Hvor lang en alternativ tekst skal være, er ikke specificeret. En til to sætninger bør dog være tilstrækkeligt til beskrivelsen af en grafik. Den ideelle længde er 80 tegn. Hvorfor 80? Blinde læser ofte disse tekster ved hjælp af et brailledisplay. Brailledisplays kan udskrive mellem 40 og 80 tegn ad gangen. Af hensyn til klarheden er det derfor tilrådeligt at holde sig til denne grænse. En tekst kan selvfølgelig være længere. Den bør dog ikke overstige 120 tegn.

3. Stavning og tegnsætning:

   Man skal være omhyggelig med at sikre korrekt stavning. Hvis et ord indeholder en stavefejl, kan det hurtigt føre til tvetydighed, da en skærmlæser udskriver præcis det, der er gemt i den alternative tekst. Ligeledes spiller korrekt grammatik en vigtig rolle i forståelsen af billeder. Men korrekt tegnsætning er også relevant. Forkert eller manglende tegnsætning gør det vanskeligt for lytteren at forstå grafikken. På grund af dette bør der udføres en stave- og grammatikkontrol, før tekstindholdet indsættes.

4. Ophavsrettigheder:

   Mange grafikker har en copyright-meddelelse. Men er denne information vigtig for at forstå et billede? Svaret er: Nej! For en god formulering af tekstalternativer er denne information uinteressant, fordi i en billedbeskrivelse er kun det vigtigste skrevet. Derfor bør denne information udelades.

5. Feedback:

   Det er nemt at afgøre, om billedbeskrivelsen er vellykket. Men hvordan? Dette spørgsmål er nemt at besvare. Det kræver ikke den store indsats. En kort feedback fra en blind eller synshandicappet person giver information om, hvorvidt tekstindholdet er formuleret fornuftigt. Men ikke alle kender en person med et synshandicap. Dette kan løses på en anden måde. Alle, der endnu ikke har set billedet, kan stilles spørgsmål her. Dette kan gøres her skriftligt, selvfølgelig, men også telefonisk. Så snart en "positiv" feedback kommer her, er beskrivelsen vellykket.

Hvad sker der egentlig, når alternative tekster mangler?

Manglen på alternative tekster til billeder kan være særligt irriterende for blinde brugere. Det ville betyde, at de ikke ville være i stand til at se indholdet af grafikken. Samtidig ville skærmlæseren i et sådant tilfælde kun vise filnavnet, f.eks.: "img123.jpg". En sådan beskrivelse ville ikke hjælpe nogen. Udviklere bør derfor altid sørge for at bruge tekstindhold. Det er dog også vigtigt at kende forskellene for at kunne beskrive billeder og grafik på en meningsfuld måde. Hjælpemidler kan derefter gengive dem ved hjælp af tekstalternativerne. Dette gør også internettet lidt mere tilgængeligt for alle.