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.

Alternatieve tekst voor afbeeldingen

Goede beschrijvingen schrijven

Volg deze aanbevolen procedures om goede alternatieve tekst te schrijven voor afbeeldingen:

  • Beschrijf de afbeelding op basis van de paginacontext. Breng de volledige betekenis van de afbeelding over.
  • Gebruik geen tekst zoals "afbeelding van" of "foto met". Schermlezers kondigen afbeeldingen automatisch aan als afbeeldingen.
  • Wees kort en bondig.
  • Gebruik een chronologische verhaallijn voor complexe afbeeldingen zoals infographics. Plaats deze verhaallijn op de pagina direct na de infographic. Voeg aan de bovenkant van de pagina een ankerkoppeling toe om de alternatieve tekst weer te geven. Zie een voorbeeld van een infographic met alternatieve tekst.
  • Voorkom afbeeldingen van tekst. Als het echt niet anders kan, kopieer de tekst dan in de alternatieve beschrijving.
  • Vertel iets nieuws. Herhaal alternatieve beschrijvingen niet op dezelfde pagina. Herhaal niet wat er al eerder is gezegd op de pagina.
  • Identificeer afbeeldingen die geen relevante inhoud vertegenwoordigen als decoratief.

Wat is een decoratieve afbeelding?

Een afbeelding is decoratief als deze geen informatie aan de pagina toevoegt. Denk aan illustraties tussen onderwerpen of een stockfoto van iemand aan de telefoon in een bespreking van communicatieve vaardigheden.

Deze afbeeldingen zijn wel waardevol vanwege hun visuele aspect, maar hoeven niet te worden opgelezen door schermlezers.

Meer over decoratieve afbeeldingen op de website van het webtoegankelijkheidsinitiatief

Waarom zijn alternatieve beschrijvingen van afbeeldingen belangrijk?

Er zijn verschillende redenen waarom je alternatieve beschrijvingen moet gebruiken met afbeeldingen.

  • Alternatieve beschrijvingen, of tekst, staan in de WCAG 2.2-richtlijnen
  • Studenten kunnen zoeken naar een afbeelding
  • Studenten met een visuele beperking hebben moeite met het zien van afbeeldingen
  • Studenten met een slechte netwerkverbinding hebben mogelijk moeite met het weergeven van afbeeldingen
  • Schermlezers kunnen afbeeldingen niet lezen
  • Sommige studenten leren beter van beschrijvingen dan afbeeldingen
  • Tekst kan beter worden geschaald dan de meeste afbeeldingen wanneer het scherm of de pagina wordt vergroot

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.