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

Hvordan barrierefri lesing av bilder er mulig!

Briller som ligger på en bok

Del innlegg:

Briller som ligger på en bok

Hvordan barrierefri lesing av bilder er mulig!

Del dette innlegget:

Briller som ligger på en bok

 

I en tid med digitalisering må ikke spørsmålet om tilgjengelighet neglisjeres. En måte å gjøre det lettere for personer med nedsatt funksjonsevne å få tilgang til innhold på Internett på, er å bruke 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 alternativ tekst? Hvem trenger dem? Og hvordan kan du lage en?

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 hjelper også til med å forstå grafikk, bilder og betjeningselementer. Skjermlesere eller punktskriftdisplayer bruker tekstalternativene og gjør 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. Dette forbedrer søkbarheten.

Hvordan lager du tekstalternativer?

Svaret på spørsmålet om hvordan man lager et tekstalternativ er ganske enkelt: Man setter ganske enkelt inn en alternativ tekst i det tilsvarende området i et element som skal forsynes 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 å opprette og administrere webinnhold.

Programmeringsspråket HTML kan også brukes til dette. Det er her alt-attributtet, også kjent som alt-taggen, kommer inn i bildet. Den settes 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 bør heller ikke glemmes, ettersom det finnes skjermlesere som ikke leser beskrivelsen i alt-attributtet, men i stedet i tittel-attributtet. Det er derfor fornuftig å skrive inn en identisk tekst for begge taggene. Dette har også den funksjonen at innholdet vises som tilleggsinformasjon om et element når du beveger musen over området.

Det finnes også et aria-attributt. 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 stadig mer digitaliserte, er det ikke nok å bare lage tekstalternativer. Det er mye mer effektivt å beskrive de ulike bildetypene på en korrekt måte, ettersom de også har ulik funksjon. Disse må imidlertid først gjenkjennes. Beskrivelser er ubrukelige hvis de ikke gjenspeiler bildets funksjon. Så spørsmålet er: Hvilke typer bilder finnes det? Og hvordan kan de beskrives på best mulig måte?

For det første bør du gjøre deg kjent med forskjellene mellom de ulike typene grafikk. Det er viktig å forstå betydningen av og formålet med grafikken. Generelt skiller man mellom informativ, funksjonell og dekorativ grafikk. Det finnes også såkalte skrifttyper. Her er beskrivelsen veldig enkel, du kopierer ganske enkelt teksten som vises 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 beskrives det kort hvordan logoen ser ut, og hvem som har designet den.

I eksemplet nedenfor er et tekstalternativ integrert i en logo i HTML:

Eye-Able-logoen. Den representerer et øye.

<img

src="logo.jpg"

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

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

</img>

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

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

Diagrammer

Hvis det er et diagram, må dette imidlertid alltid avgjøres fra sak til sak. Dette avhenger ofte av typen og informasjonen som finnes. Hvis diagrammet bare inneholder en liten mengde informasjon, kan denne inkluderes i den alternative teksten. For eksempel: "Viser partienes valgresultater i et søylediagram. Parti A: 40 %, Parti B: 30 %, Parti C: 20 % osv.". Hvis det er noe mer komplekst eller lengre som presenteres, er det imidlertid lurt å sette inn den detaljerte informasjonen i en påfølgende tekst. Den alternative teksten bør da bare angi diagrammets type og formål. I tillegg kan det gjøres oppmerksom på at en mer detaljert beskrivelse følger nedenfor. Et eksempel kan være et diagram som viser befolkningstallene i delstatene. Innholdet kunne 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 lenket grafikk. De er delt inn i lenker, elementer eller knapper. I tekstalternativene defineres funksjonen, ikke hva som skal gjenkjennes. I stedet angir du hvor lenken fører til.

Her er et eksempel i HTML for en lenket grafikk:

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

<img src=“logo.jpg“

alt="Startsiden til Eye-Able"

title="Startsiden til Eye-Able"

</img>

</a>

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

 

Det samme gjelder for symboler. Hvis man for eksempel bruker en diskett, er ikke ikonets utseende relevant for utdata med skjermleser, ettersom det symboliserer funksjonen lagring. Søkeikoner er et annet eksempel. Om det er et forstørrelsesglass eller ikke, er irrelevant. Handlingen bak er mye mer interessant. Dette symboliserer et søkealternativ eller starten på et søk.

 

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

Dekorative bilder

En annen type grafikk er dekorative bilder. Disse brukes til å dekorere et nettsted. Fremgangsmåten for å lage alternative tekster er veldig enkel her. Innholdet i den alternative teksten er tomt. Det er viktig at attributtet for alternativ tekst fortsatt er til stede. Her er det bare tekstinnholdet som er tomt. Resultatet er at skjermleseren hopper over denne irrelevante grafikken i utdataene.

Hvordan skriver man gode alternative tekster?

Nå som de ulike grafiske elementene er presentert, 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. Begynnelsen på et tekstalternativ:

    Her bør man være nøye med å unngå duplisering. Begynnelsen bør derfor ikke starte med: "Bildet ...", "Grafikken ...", "Bildet ..." eller "Lenken" .... Om det er en grafikk eller en lenke, gjenkjennes og vises uansett av skjermlesere. Dette bør derfor utelates.

  2. Lengden på tekstene:

    Det er ikke spesifisert hvor lang en alternativ tekst skal være. En eller to setninger bør imidlertid være tilstrekkelig for å beskrive en grafikk. Den ideelle lengden er 80 tegn. Hvorfor 80 tegn? Blinde leser ofte disse tekstene ved hjelp av en punktskrifttavle. Punktskrifttavler kan vise mellom 40 og 80 tegn om gangen. Av hensyn til tydeligheten 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:

    Sørg for at stavemåten er korrekt. Hvis et ord inneholder en stavefeil, kan det fort bli uklart, ettersom en skjermleser 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 også korrekt tegnsetting er relevant. Feil eller manglende tegnsetting gjør det vanskelig for lytteren å forstå grafikken. Derfor bør man foreta en stave- og grammatikkontroll før man setter inn tekstinnholdet.

  4. Copyright:

    Mange bilder har en opphavsrettsangivelse. Men er denne informasjonen viktig for å forstå et bilde? Svaret er: Nei! Denne informasjonen er uinteressant for en god formulering av tekstalternativer, ettersom en bildebeskrivelse bare inneholder den viktigste informasjonen. Denne informasjonen bør derfor utelates.

  5. Tilbakemeldinger:

    Du kan raskt finne ut om bildebeskrivelsen er vellykket. Men hvordan? Dette spørsmålet er enkelt å svare på. Det krever ingen stor innsats. En kort tilbakemelding fra en blind eller svaksynt person gir informasjon om hvorvidt tekstinnholdet er fornuftig formulert. Men ikke alle kjenner en person med synshemming. Dette kan også løses på en annen måte. Alle som ennå ikke har sett bildet, kan stilles spørsmål. Dette kan selvfølgelig gjøres skriftlig, men også per telefon. Så snart man får et "positivt" svar, har beskrivelsen vært vellykket.

Hva skjer egentlig hvis alternative tekster mangler?

 

Mangelen på alternative tekster til bilder kan være spesielt irriterende for blinde brukere. Det betyr at de ikke vil være i stand til å gjenkjenne 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. Men det er også viktig å kjenne til forskjellene for å kunne beskrive bilder og grafikk på en meningsfull måte. Hjelpemidler kan da gjengi disse ved hjelp av tekstalternativer. Dette gjør også Internett mer tilgjengelig for alle.

Enkelt for alle

Er du interessert? Vi hjelper deg gjerne.

Med over 25 funksjoner knyttet til digital tilgjengelighet hjelper Eye-Able deg også med å redusere barrierene dine på lang sikt. Du kan gjøre informasjonen din tilgjengelig for alle uten å ekskludere noen besøkende - kort sagt: du kan nå en ny målgruppe uten store markedsføringsvolum.

Ikonet viser tilgjengelighetsfigur

Rådgivningsintervju

Ikke-bindende høring om digital tilgjengelighet generelt

Ikonet viser tilgjengelighetsfigur

Analyse

Diskusjon om mulig optimaliseringspotensial på nettstedet ditt

Ikonet viser tilgjengelighetsfigur

Live-demo

Presentasjon av assistanseprogramvaren direkte på nettstedet ditt

Ytterligere bidrag

Hvis du vil ha litt mer: