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. For studenter med synshemninger er det avgjørende å ha bildebeskrivelser som forklarer innholdet i bildene. 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 å finne og løse tilgjengelighetsproblemer på siden din. Bruk lenken som er oppgitt for rapporten, og logg på. Åpne rapporten og se på listen over problemer i Tilgjengelighetsproblemer-tabellen.

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.

Hvis du starter i Oversikt -fanen, velg problemet og deretter domenet med problemet.

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. Innholdsredigeringsprogrammets tilbakemeldingspanel åpnes.

Forhåndsvis bildene uten beskrivelser

Allys tilbakemeldingspanel viser deg en forhåndsvisning av innhold samt detaljert tilbakemelding og støtte for å hjelpe deg å 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 i et vedlagt dokument, må du laste ned originalfilen.

Følg instruksjonene på Ally for å legge til bildebeskrivelser

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.

Alternative Text on Images

Writing good descriptions

Follow these best practices to write good alternative text descriptions for your images:

  • Describe the image based on the page context. Convey the full meaning of the image.
  • Avoid saying "image of" or "picture of". Screen readers automatically announce images as images.
  • Be concise.
  • Write narratives for complex images like infographics. Put this narrative on the page immediately following the infographic. Include an anchor link at the top of the page to view the text alternative. See an example of an infographic with a text alternative.
  • Avoid images of text. If you can't avoid it, copy the text into the alternative description.
  • Say something new. Don't repeat alternative descriptions on the same page. Don't repeat what is already said on the page.
  • Identify images that don't represent relevant content as decorative.

What is a decorative image?

An image is decorative when it doesn't add to the information on the page. For example, art work used to separate topics or a photo of someone on the phone when discussing communication skills.

They are valuable in their visual appeal but may not need to be read by screen readers.

More on decorative images on the web accessibility initiative website

Why are alternative image descriptions important?

There are many reasons to use alternative descriptions with your images.

  • Alternative descriptions, or text, are in the WCAG 2.2 guidelines
  • Students can search for an image
  • Students with visual impairments have difficulty perceiving images
  • Student with a poor network connection may have difficulty perceiving images
  • Screen readers can't read images
  • Some students learn better from descriptions than images
  • Text scales better than most images when the screen or page is enlarged

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 gjør det mulig å 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.

Besøk w3schools for å finne ut mer om HTML og CSS

Hvorfor kan jeg ikke se «img src» i mitt HTML?

Den vanligste metoden for å legge til bilder på nettsider er med img src HTML-attributtet. Img src Er et HTML-attributt som bruker nettadressen 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 kan du prøve å bruke CMS-verktøyene for å redigere bildeinnstillinger. 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.