Alternatieve tekst aan afbeeldingen toevoegen

Een duidelijke beschrijving toevoegen aan afbeeldingen en grafieken voor een nog beter begrip.

Afbeeldingen kunnen een uitstekend hulpmiddel zijn om je bezoekers te betrekken bij de stof en om complexe ideeën te communiceren.

Afbeeldingsbeschrijvingen worden vaak 'alternatieve beschrijvingen', 'alternatieve tekst' en 'alt-tekst' genoemd. Afbeeldingsbeschrijvingen vormen een beschrijvend alternatief voor de afbeelding in de vorm van tekst.Voor studenten met een visuele beperking worden vaak afbeeldingsbeschrijvingen gebruikt om de inhoud uit te leggen van afbeeldingen die cruciaal zijn voor de lesstof. Voor alle studenten geldt dat tekstbeschrijvingen meer context kunnen bieden om het begrip van de stof te vergemakkelijken.

Ally controleert overal waar zich afbeeldingen bevinden of er afbeeldingsbeschrijvingen beschikbaar zijn. Ally controleert afbeeldingen op een webpagina of in een bijgevoegd bestand.

Ally rangschikt problemen op ernstige, grote en kleine problemen.

  • Ernstig probleem. Problemen met deze classificatie vormen de grootste bedreiging voor toegankelijkheid en vereisen de meeste aandacht.
  • Groot probleem. Deze problemen belemmeren de toegankelijkheid en hoewel ze niet ernstig zijn, vereisen ze wel aandacht.
  • Klein probleem. Deze problemen moeten worden aangepakt om de toegankelijkheidsscore verder te verhogen.

Afbeeldingen waarin alternatieve tekst ontbreekt, zijn een groot probleem.

Gebruik Ally om afbeeldingen te vinden waarin beschrijvingen ontbreken

Gebruik het toegankelijkheidsrapport van Ally om toegankelijkheidsproblemen op je site te ontdekken en op te lossen. Gebruik de koppeling die voor het rapport is opgegeven en meld je aan. Open het rapport en bekijk de lijst met problemen in de tabel Toegankelijkheidsproblemen.

De tabel Toegankelijkheidsproblemen bevindt zich op de tabbladen Overzicht en Domein. Start op het tabblad Domein om problemen van een specifiek domein te bekijken. 

Het is een groot probleem om afbeeldingen zonder alternatieve tekst of beschrijvingen te hebben. Gebruik het tabblad Groot probleem in de tabel Toegankelijkheidsproblemen om de lijst van grote problemen weer te geven. Selecteer de problemen waarbij afbeeldingen geen beschrijving hebben.

Als je begint op het tabblad Overzicht selecteer je het probleem en vervolgens het domein met het probleem.

Problemen met afbeeldingsbeschrijvingen kunnen beginnen met Afbeelding, Document of HTML in de lijst.

Uit de lijst met problemen met afbeeldingsbeschrijvingen in het domein selecteer je de score-indicator naast een item met het probleem. Het feedbackvenster van de inhoudseditor wordt geopend.

Bekijk een voorbeeld van de afbeeldingen zonder beschrijvingen

Het feedbackvenster van Ally geeft je een voorbeeld van de inhoud, gedetailleerde feedback en ondersteuning om je toegankelijkheidsproblemen op te lossen. Gebruik het voorbeeld om de afbeeldingen zonder beschrijvingen weer te geven.

In het voorbeeld worden markeringen weergegeven waar specifieke toegankelijkheidsproblemen in het document te vinden zijn. De markeringen geven één probleemtype per melding weer. Bijvoorbeeld: als er alternatieve beschrijvingen ontbreken bij je afbeeldingen, geven de markeringen steeds aan waar dit specifieke probleem voor komt.

Voorbeeldtools

Gebruik de voorbeeldtools om de problemen in je document te bekijken.

  • Navigeer per pagina door het voorbeeld.
  • Bekijk hoe vaak een specifiek probleem voorkomt.
  • Navigeer tussen de probleemmarkeringen.
  • Geef de markeringen weer of verberg ze.
  • Zoom de voorbeeldinhoud in of uit.
  • Als het probleem zich in een bijgevoegd document voordoet, download dan het oorspronkelijke bestand.

Volg de stappen van Ally om afbeeldingsbeschrijvingen toe te voegen

Ally gaat ervan uit dat je basiskennis hebt van HTML en van het gebruik van het Content Management System (CMS). Als je de stappen wilt volgen, moet je weten hoe je een webpagina in de HTML of broncode in je CMS kunt bewerken.

Naast het voorbeeld biedt Ally tevens stapsgewijze instructies over hoe je het probleem kunt oplossen. Ally organiseert deze feedback in een beslisboom.Je hoeft alleen maar de instructies te volgen en te reageren op de vragen. Lees meer over het probleem, waarom het van belang is, en hoe je het kunt verhelpen.

Selecteer Beschrijvingen toevoegen om de stappen te volgen.

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

Manieren om afbeeldingsbeschrijvingen toe te voegen aan webpagina's

Er zijn verschillende manieren om afbeeldingsbeschrijvingen toe te voegen aan of te wijzigen op je webpagina's.

  • HTML: In de stappen van Ally wordt uitgelegd hoe je afbeeldingsbeschrijvingen kunt vinden en wijzigen in HTML. Het komt erop neer dat je de webpagina met de afbeelding kunt vinden. Bewerk de pagina. Werk de HTML-code van de afbeelding bij om een alt-tekstkenmerk toe te voegen. Sla de pagina op.
  • Afbeeldingsinstellingen: De meeste CMS’en bieden een manier om alternatieve tekst te bewerken in de afbeeldingsinstellingen. Zoek de afbeelding op de webpagina of in de CMS-opslagplaats voor bestanden. Gebruik de CMS-tools om de afbeelding te bewerken. Voeg de afbeeldingsbeschrijving toe in het veld alternatieve tekst of alt-tekst. Sla de afbeelding op.

Ga naar w3schools voor meer informatie over HTML en CSS

Waarom zie ik ‘img src’ niet in mijn HTML?

De meest voorkomende manier om afbeeldingen aan een webpagina toe te voegen, is met het img src kenmerk HTML. Img src is een HTML-kenmerk dat de URL van het afbeeldingsbestand gebruikt om de afbeelding op de webpagina te plaatsen. Maar elke CMS is anders. Je site kan andere code of kenmerken gebruiken. 

Zo kan het er in Drupal bijvoorbeeld uitzien:

<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>

Voeg alt-tekst toe aan het begin van het kenmerk. Bijvoorbeeld:

<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>

Als je img src niet ziet in de HTML kun je proberen om de CMS-tools te gebruiken om de afbeeldingsinstellingen te bewerken.Zoek de afbeelding op de webpagina of in de CMS-opslagplaats voor bestanden. Gebruik de CMS-tools om de afbeeldingsinstellingen te openen. Voeg de afbeeldingsbeschrijving toe in het veld alternatieve tekst of alt-tekst. Sla de afbeelding op.

Als je nog steeds niet weet hoe je verder moet gaan, neem dan contact op met de beheerder of ontwikkelaar van de website. Vraag dan of ze je kunnen laten zien hoe afbeeldingen worden toegevoegd aan webpagina's en hoe je alternatieve tekst kunt toevoegen.