Legg til alternativ tekst til bilder
Legg til en omfattende beskrivelse for bilder og diagrammer for å øke forståelsen av dem
Bilder kan være en god måte å engasjere de besøkende og kan bidra til å kommunisere komplekse ideer.
Bildebeskrivelser kalles ofte «alternative beskrivelser», «alternativ tekst» og «alt-tekst». Bildebeskrivelser gir et tekstbasert, beskrivende alternativ til bildet. StudentFor elever med synshemminger er bildebeskrivelser som forklarer innholdet i et bilde avgjørende for læringen. Tekstbeskrivelser kan også gi bedre kontekst for alle studenter og dermed bidra til å øke forståelsen deres.
Ally ser etter bildebeskrivelser for alle bilder. Ally kontrollerer bilder på en nettside eller i en vedlagt fil.
Ally rangerer problemer etter alvorlig, større og mindre.
Alvorlig. Slike problemer utgjør størst risiko for tilgjengeligheten og bør utbedres først.
Større. Slike problemer har innvirkning på tilgjengeligheten, og selv om de ikke er like alvorlige, bør de utbedres.
Mindre. Slike problemer bør utbedres for å forbedre tilgjengelighetsresultatet.
Bilder som mangler alternativ tekst, er et stort problem.
Bruk Ally for å finne bilder som mangler beskrivelser
Bruk Allys tilgjengelighetsrapport for å oppdage og fikse tilgjengelighetsproblemer på ditt sted. Bruk lenken som er oppgitt for rapporten, og logg på. Åpne rapporten og se på listen over problemer i Tilgjengelighetsproblemer-tabellen.
Tips
Tilgjengelighetsproblemer-tabellen er både i Oversikt- og Domene-fanene. Start i Domene-fanen for å se problemer som er spesifikke for et domene.
Det er et stort problem å ha bilder uten alternativ tekst eller beskrivelser. Bruk Stor-fanen i Tilgjengelighetsproblemer -tabellen for å se listen over store problemer. Velg problemer med bilder som ikke har beskrivelser.
Tips
Hvis du starter i Oversikt -fanen, velg problemet og deretter domenet med problemet.
Tips
Problemer med bildebeskrivelser kan starte med Bilde, Dokument eller HTML i listen.
Fra listen over bildebeskrivelseproblemer i domenet, kan du velge poengsum-indikatoren ved siden av et element med problemet. Panelet for tilbakemelding om innholdsredigeringsverktøyet åpnes.
Forhåndsvis bildene uten beskrivelser
Allys tilbakemeldingspanel viser deg en forhåndsvisning av innhold samt detaljert tilbakemelding og støtte for å hjelpe deg med å fikse tilgjengelighetsproblemene dine. Bruk forhåndsvisningen for å se bildene uten beskrivelser.
Forhåndsvisningen fremhever hvor i dokumentet du kan finne spesifikke tilgjengelighetsproblemer. Fremhevingene viser alle forekomster av én problemtype av gangen. Hvis du for eksempel ikke har alternative beskrivelser for bildene dine, fremheves alle steder hvor dette spesifikke problemet forekommer.
Verktøy for forhåndsvisningen
Bruk forhåndsvisningsverktøyene for å utforske problemene i dokumentet ditt.
Gå gjennom forhåndsvisningen side for side.
Se hvor mange ganger et spesifikt problem vises.
Gå til andre steder problemet er fremhevet.
Vis eller skjul fremhevingene.
Zoom inn på eller ut av innholdet i forhåndsvisningen.
Hvis problemet er et vedlagt dokument, last ned den originale filen.
Følg instruksjonene på Ally for å legge til bildebeskrivelser
Viktig
Ally antar at du har grunnleggende kunnskap om HTML og hvordan du bruker et CMS (Content Management System). For å følge fremgangsmåten må du vite hvordan du kan redigere en nettside i HTML-eller kildekode i CMS.
Sammen med forhåndsvisningen gir Ally deg en trinnvis veiledning om hvordan du kan løse problemet. Ally organiserer denne tilbakemeldingen i et beslutningstre. Alt du trenger å gjøre, er å lese retningslinjene og svare på spørsmålene. Finn ut hva problemet er, hvorfor det er viktig, og hvordan du kan utbedre det på riktig måte.
Velg Hvordan legge til beskrivelse for å følge trinnene.
Skriv gode beskrivelser
Følg disse anbefalte fremgangsmåtene for å skrive gode alternative tekstbeskrivelser for bilder:
Beskriv bildet basert på konteksten på siden. Formidle hele meningen med bildet.
Unngå å si «Bilde av» eller «Bildet viser». Skjermlesere kunngjør automatisk bilder som bilder.
Vær konkret.
Skriv beskrivende tekster for sammensatte bilder, for eksempel infografikk. Plasser den beskrivende teksten på siden som kommer rett etter infografikken. Ta med en ankerlenke til tekstalternativet øverst på siden.
Unngå bilder av tekst. Hvis du ikke kan unngå det, bør du kopiere teksten til den alternative beskrivelsen.
Si noe nytt. Ikke gjenta alternative beskrivelser på samme side. Ikke gjenta det som allerede er sagt på siden.
Merk bilder som ikke inneholder relevant innhold, som dekorative.
Hva er dekorative bilder?
Bilder er dekorative når de ikke tilfører noe til informasjonen på siden. Eksempler på dette kan være et grafikkelement som brukes for å skille mellom ulike temaer, eller et bilde av noen som snakker i telefonen, i en del som omhandler kommunikasjonsferdigheter.
Slike bilder er verdifulle når det kommer til visuell appell, men det er ikke nødvendig at skjermlesere leser dem.
Hvorfor er det viktig å bruke alternative beskrivelser for bilder?
Det finnes mange grunner til å bruke alternative beskrivelser for bilder.
Alternative beskrivelser – eller tekst – er inkludert i WCAG 2.2-retningslinjene.
Studenter kan søke etter bilder
Studenter med synshemninger har vanskeligheter med å oppfatte bilder
Studenter med dårlig nettverkstilkobling kan ha vanskeligheter med å oppfatte bilder
Skjermlesere kan ikke lese bilder
Noen studenter lærer bedre med beskrivelser enn bilder
Tekst skaleres bedre enn de fleste bilder når skjermen eller siden gjøres større
Måter å legge til bildebeskrivelser på nettsider
Det finnes mer enn én måte å legge til eller redigere bildebeskrivelser på nettsidene.
HTML: Du ser en veiledning for hvordan du finner og redigerer bildebeskrivelser i HTML Ally. Finn frem til nettsiden med bildet. Rediger siden. Oppdater bildets HTML-kode for å inkludere et «alt text-attributt. Lagre siden.
Bildeinnstillinger: De fleste CMS-er tilbyr en måte å redigere alternativ tekst i bildeinnstillingene. Finn frem til bildet på Nettsiden eller i CMS-filens repositorium. Du kan bruke verktøyene i CMS til å redigere bildet. Legg til bildebeskrivelsen i alternativ tekst-eller alt tekst-feltet. Lagre bildet.
Tips
Besøk w3schools for å finne ut mer om HTML og CSS
Hvorfor kan jeg ikke se «img src» i mitt HTML?
Den vanligste måten å legge til bilder på en nettside er med HTML-attributtet img src. Img src er en HTML-attributt som bruker URL-en til bildefilen for å plassere bildet på nettsiden. Men hver eneste CMS er forskjellig. Nettstedet ditt kan bruke andre koder eller attributter.
I Drupal kan du for eksempel se noe som dette i stedet:
<drupal-entity data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>
Legg til alternativ tekst i starten av attributtet. For eksempel,
<drupal-entity alt="add image description here" data-embed-button="media_browser" data-entity-embed-display="view_mode:media.embedded" data-entity-embed-display-settings="" data-entity-type="media" data-entity-uuid="2961e3a2-8fbe-4e3f-baeb-953d69f70750"></drupal-entity>Hvis du ikke ser img src i HTML-en, prøv å bruke CMS-verktøyene for å redigere bildeinnstillingene. Finn frem til bildet på Nettsiden eller i CMS-filens repositorium. Bruk CMS-verktøyene for å åpne bildeinnstillingene. Legg til bildebeskrivelsen i alternativ tekst-eller alt tekst-feltet. Lagre bildet.
Hvis du fortsatt ikke vet hvordan du fortsetter, bør du kontakte administratoren eller utvikleren av webområdet. Be dem om å vise hvordan bilder legges til på nettsidene, og hvordan du legger til alternativ tekst.