🎉 Nytt verktøy: Enkelt språk. Klikk på knappen og prøv det live

Hvor tilgjengelig lesing av bilder er mulig!

Briller liggende på en bok

Del innlegget:

Briller liggende på en bok

Hvor tilgjengelig lesing av bilder er mulig!

Del dette innlegget:

Briller liggende på en bok

 

I en tid preget av digitalisering må ikke spørsmålet om tilgjengelighet neglisjeres. En måte å gjøre det enklere for personer med nedsatt funksjonsevne å få tilgang til innhold på internett er gjennom såkalte alternative tekster. Disse tekstene er utformet på en slik måte at de gjengir innholdet på et nettsted i en form som personer med visse funksjonsnedsettelser kan forstå. Men hva er egentlig en slik alternativ tekst? Hvem trenger dem? Og hvordan kan man lage en slik tekst?

For å gjøre nettsteder og nettinnhold tilgjengelig er blant annet alternative tekster svært viktige for å lette tilgangen for personer med nedsatt funksjonsevne. De formidler informasjon og funksjoner for blinde og svaksynte samt for personer med fysiske eller kognitive funksjonsnedsettelser. De gjør det også lettere å forstå grafikk, bilder og kontroller. Skjermlesere eller punktskriftdisplayer bruker tekstalternativene og gjør dermed disse elementene tilgjengelige for personer med nedsatt funksjonsevne.

 

På den annen side er de også nyttige for søkemotoroptimalisering. Tekstalternativene overfører informasjonen om et bilde til søkemotorene. Det gjør det lettere å finne frem.

Hvordan lage tekstalternativer?

Svaret på spørsmålet om hvordan du oppretter et tekstalternativ er ganske enkelt: For å gjøre dette er det bare å sette inn en alternativ tekst i det tilsvarende området av et element som er utstyrt med en slik tekst. De fleste utviklere bruker dette i et såkalt CMS. Forkortelsen CMS står for Content Management System. Dette er programvare som brukes til å lage og administrere nettinnhold.

Programmeringsspråket HTML kan også brukes til dette formålet. Det er her alt-attributtet eller alt-Tag kommer inn i bildet. Der settes det inn i img-taggen. Teksten skrives i det indre området av alt-attributtet, som deretter sendes ut via hjelpeteknologiene.

Dette alene er imidlertid ikke nok. Tittel-attributtet må heller ikke glemmes, da det finnes skjermlesere som ikke leser opp beskrivelsen i alt-attributtet, men i tittel-attributtet. Derfor er det også fornuftig å angi en identisk tekst for begge taggene. I tillegg har dette også den funksjonen at innholdet vises som tilleggsinformasjon om et element når musen føres over området.

I tillegg har vi aria-attributtet. Nærmere bestemt aria-label-attributtet eller aria-labelledby-attributtet. Disse brukes til å merke knapper eller skjemafelt.

De ulike typene bilder

I en verden der vi blir mer og mer digitale, holder det ikke bare å lage tekstalternativer. Det er mye mer effektivt å beskrive de ulike typene bilder korrekt, ettersom de også har ulike funksjoner. Men disse må først gjenkjennes. Beskrivelser er ubrukelige hvis de ikke gjenspeiler bildets funksjon. Spørsmålet er derfor: Hvilke typer bilder finnes det? Og hvordan kan man beskrive dem på best mulig måte?

Først og fremst bør man sette seg inn i forskjellene mellom de ulike typene grafikk. Det er viktig å forstå hensikten med grafikken. Generelt skilles det mellom informativ, funksjonell og dekorativ grafikk. I tillegg finnes det såkalte skrifttyper. Her er beskrivelsen veldig enkel, man overtar ganske enkelt teksten som er synlig i grafikken.

Informative bilder

Når det gjelder informative bilder, formidles det synlige innholdet i grafikken ved hjelp av alternative tekster. Oppmerksomheten rettes mot informasjon som er relevant for bildets budskap. Et eksempel på dette er en logobeskrivelse. Her gis det en kort beskrivelse av hvordan logoen ser ut og hvem den kommer fra.

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

Logoen Eye-Able . Den forestiller et øye.

<img

src="logo.jpg"

alt="Logoen Eye-Able . Den representerer et øye."

title="Logoen Eye-Able . Den representerer et øye.">

</img>

Her legges en bildefil inn i HTML ved hjelp av img-elementet, og src-attributtet angir kilden til bildet. Beskrivelsen av grafikken settes inn i anførselstegn i alt- og title-attributtene. På denne måten blir tekstinnholdet "Logoen Eye-Able. Den forestiller et øye" vises via skjermleseren eller punktskriftdisplayet.

På denne måten fjernes barrieren, og alle som bruker tekniske hjelpemidler kan forstå hva som vises i denne grafikken.

Diagrammer

Hvis det dreier seg om et diagram, må dette imidlertid alltid vurderes i hvert enkelt tilfelle. Dette avhenger ofte av diagrammets type og hvilken informasjon det inneholder. Hvis diagrammet bare inneholder litt informasjon, kan denne inkluderes i den alternative teksten. For eksempel: "Presenterer partienes valgresultater i et søylediagram. Parti A: 40 %, Parti B: 30 %, Parti C: 20 % osv.". Hvis det er snakk om en mer komplisert eller omfattende presentasjon, er det imidlertid lurt å ta med den detaljerte informasjonen i en påfølgende tekst. Den alternative teksten bør da kun angi diagrammets type og formål. I tillegg kan det angis at den mer detaljerte beskrivelsen følger nedenfor. Et eksempel kan være et diagram som viser befolkningstallene i delstatene. Innholdet kan da lyde: "Viser befolkningstallene i de 16 delstatene i et søylediagram. Merk: Den mer detaljerte beskrivelsen følger i teksten".

Funksjonelle bilder

Deretter ser vi på de funksjonelle bildene. Dette er sammenkoblet grafikk. De er delt inn i lenker, elementer eller knapper. I tekstalternativene er det funksjonen som defineres, og ikke hva man kan se. I stedet angir man hvor lenken fører til.

Her er et slikt eksempel i HTML for en lenket grafikk:

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

<img src=“logo.jpg“

alt="Hjemmesiden til Eye-Able"

title="Hjemmesiden til Eye-Able"

</img>

</a>

a-Tag og href-attributtet brukes i HTML for å opprette en lenke. I dette tilfellet opprettes lenken til siden https://eye-able.com/. I img-elementet ser vi igjen logoen til Eye-Able, men denne gangen beskriver alt- og title-attributtene ikke grafikken, men funksjonen. Innholdet "Hjemmesiden til Eye-Able" vises nå via hjelpemidlene.

 

Det samme gjelder symboler. Hvis det for eksempel brukes en diskett, er ikonets utseende ikke relevant for utdata med skjermleser, ettersom det symboliserer lagringsfunksjonen. Et annet eksempel er søkeikoner. Om det er et forstørrelsesglass eller ikke, er irrelevant. Det som er mye mer interessant, er handlingen bak. De representerer et søkealternativ eller starten på et søk.

 

Det samme gjelder for knapper. En knapp som representerer en pil som peker mot høyre, bør aldri markeres med "pil som peker mot høyre" i alternativteksten. For en seende person er det tydelig at neste side åpnes når du klikker på den, men ikke for blinde. De hører nemlig bare "pil til høyre" via stemmestyringen. Dette er ikke tydelig nok eller viser ikke at neste side åpnes når man trykker på knappen. Derfor er det mer fornuftig å gi disse alternative tekstene "gå til neste side" eller "bla til neste side".

Dekorative bilder

En annen type grafikk er dekorative bilder. Disse brukes til å dekorere en nettside. Fremgangsmåten for å opprette alternative tekster er svært enkel. Her er innholdet i den alternative teksten ikke fylt ut. Det er viktig at attributtet til de alternative tekstene fortsatt er til stede. Her er det bare tekstinnholdet som er tomt. Resultatet er at skjermleseren hopper over denne irrelevante grafikken i utskriften.

Hvordan skriver man gode alternative tekster?

Nå som de ulike bildene er introdusert, gjenstår det bare ett spørsmål: "Hvordan formulerer man optimale alternative tekster?". Når du kjenner til alle disse finessene og forskjellene mellom bildene, er det bare noen få regler å følge. Følgende tips kan være til hjelp:

  1. Start på et tekstalternativ:

    Her bør man være forsiktig for å unngå gjentakelser. Begynnelsen bør derfor ikke begynne med: "Bildet ...", "Grafikken ...", "Bildet ..." eller "Lenken" .... Om det er en grafikk eller en lenke, gjenkjennes og vises uansett av skjermlesere. Derfor bør dette unnlates.

  2. Lengden på tekstene:

    Det er ikke spesifisert hvor lang en alternativ tekst skal være. En til to setninger bør imidlertid være tilstrekkelig for beskrivelsen av en grafikk. Ideelt sett 80 tegn. Hvorfor 80 tegn? Blinde leser ofte disse tekstene ved hjelp av en punktskriftdisplay. Punktskriftdisplayer kan vise mellom 40 og 80 tegn om gangen. Av hensyn til oversiktligheten er det derfor lurt å holde seg til denne grensen. En tekst kan selvfølgelig også være lengre. Den bør imidlertid ikke overstige 120 tegn.

  3. Rettskriving og tegnsetting:

    Man må være nøye med å sikre korrekt stavemåte. Hvis et ord inneholder en stavefeil, kan det raskt føre til tvetydighet, ettersom skjermleseren skriver ut nøyaktig det som er lagret i den alternative teksten. Korrekt grammatikk spiller også en viktig rolle for forståelsen av bilder. Men korrekt tegnsetting er også relevant. Feil eller manglende tegnsetting gjør det vanskelig for lytteren å forstå grafikken. Derfor bør det utføres en stave- og grammatikkontroll før tekstinnholdet settes inn.

  4. Opphavsrett:

    Mange grafiske fremstillinger har en copyright-merknad. Men er denne informasjonen viktig for å forstå et bilde? Svaret er: Nei! For en god formulering av tekstalternativer er denne informasjonen uinteressant, fordi det bare er det viktigste som står i en bildebeskrivelse. Derfor bør denne informasjonen utelates.

  5. Tilbakemeldinger:

    Det er enkelt å avgjøre om bildebeskrivelsen er vellykket. Men hvordan? Dette spørsmålet er enkelt å svare på. Det krever ikke mye innsats. En kort tilbakemelding fra en blind eller svaksynt person gir informasjon om hvorvidt tekstinnholdet er fornuftig formulert. Men det er ikke alle som kjenner en person med nedsatt syn. Dette kan løses på en annen måte. Alle som ennå ikke har sett bildet, kan bli spurt. Dette kan selvfølgelig gjøres skriftlig, men også per telefon. Så snart det kommer "positive" tilbakemeldinger, er beskrivelsen vellykket.

Hva skjer egentlig når alternative tekster mangler?

 

Mangelen på alternative tekster for bilder kan være spesielt irriterende for blinde brukere. Dette kan føre til at de ikke legger merke til innholdet i grafikken. Samtidig vil skjermleseren i et slikt tilfelle bare vise filnavnet, for eksempel: "img123.jpg". En slik beskrivelse vil ikke hjelpe noen. Utviklere bør derfor alltid sørge for å bruke tekstinnhold. Det er imidlertid også viktig å kjenne til forskjellene for å kunne beskrive bilder og grafikk på en meningsfull måte. Hjelpemiddelteknologier kan da gjengi disse ved hjelp av tekstalternativene. Dette gjør også internett litt mer tilgjengelig for alle.

Enkelt for alle

Er du interessert? Vi hjelper deg gjerne.

Med mer enn 25 funksjoner for digital tilgjengelighet hjelper Eye-Able deg også med å redusere barrierene på lang sikt. På denne måten gjør du informasjonen din tilgjengelig for alle og ekskluderer ingen besøkende - kort sagt: du får tilgang til en ny målgruppe uten store markedsføringsvolumer.

Ikonet viser tilgjengelighetstall

Konsultasjon

Ikke-bindende høring om digital tilgjengelighet generelt

Ikonet viser tilgjengelighetstall

Analyse

Diskusjon om mulig optimaliseringspotensial på nettstedet ditt

Ikonet viser tilgjengelighetstall

Live demo

Presentasjon av assistanseprogramvaren direkte på nettstedet ditt

Flere bidrag

Hvis det kan være litt mer: