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 leerlingen met visuele beperkingen zijn beeldbeschrijvingen die de inhoud van een afbeelding uitleggen cruciaal voor hun leerproces. 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. Deze problemen vormen het grootste risico 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.
Tip
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.
Tip
Als je begint op het tabblad Overzicht selecteer je het probleem en vervolgens het domein met het probleem.
Tip
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
Belangrijk
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. Je ziet wat het probleem is, waarom dit een probleem is en hoe je het kunt oplossen.
Selecteer Beschrijvingen toevoegen om de stappen te volgen.
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.
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.
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.
Beeldinstellingen: 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.
Tip
Ga naar w3schools voor meer informatie over HTML en CSS
Waarom zie ik ‘img src’ niet in mijn HTML?
De meest gebruikelijke manier om afbeeldingen aan een webpagina toe te voegen is met het HTML-attribuut img src. Img src is een HTML-attribuut 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 in de HTML ziet, probeer dan 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.