De informatie die een afbeelding geeft, moet toegankelijk zijn voor mensen die de afbeelding niet of slecht kunnen zien. Maak deze informatie toegankelijk met een tekstueel alternatief.
Succescriterium 1.1.1 Niet-tekstuele content
Dit artikel gaat alleen over eenvoudige afbeeldingen. Denk aan een foto, een simpele tekening of een icoon. Voor tekst alternatieven bij andere soorten afbeeldingen lees:
Tips voor het schrijven van een tekstalternatief:
Als tekstueel alternatief kun je een alt-tekst gebruiken. Deze zet je in het alt-attribuut van een afbeelding. Deze tekst is niet zichtbaar en zit in de code gekoppeld aan je afbeelding. Daardoor wordt deze tekst bijvoorbeeld door een schermlezer voorgelezen.
Bij decoratieve afbeeldingen laat je de alt-tekst leeg. Dan kan hulptechnologie zoals een schermlezer de afbeelding overslaan. Bedenk goed of er echt geen informatie in de afbeelding staat.
In de meeste CMS’en zit standaard de mogelijkheid om een tekstueel alternatief toe te voegen als alt-tekst of afbeeldingen als decoratief te markeren. Vraag om deze functionaliteit bij de ontwikkelaar als je deze niet hebt.
Plaats je de code uit een SVG direct in de HTML-code van je website? Plaats dan bovenaan in het SVG-element een title-element met een korte beschrijving als tekstalternatief. Bijvoorbeeld <title id="title_id">Deze pagina delen op facebook</title>
. Voeg aan het SVG-element ook een aria-labelledby="title_id"
toe voor optimale ondersteuning op alle browsers.
Voeg een aria-hidden="true"
toe in het SVG-element van decoratieve afbeeldingen. Een schermlezer slaat deze afbeelding dan over.
Voeg ook in documenten een tekstalternatief toe aan informatieve afbeeldingen of geef aan dat ze decoratief zijn. Hoe je dit doet, hangt af van het soort document en programma. Lees meer over alternatieve teksten in Microsoft Word of Adobe InDesign.
Gebruik een label als tekstueel alternatief in een app. Zet de focus uit bij decoratieve afbeeldingen. Een schermlezer slaat deze afbeeldingen dan over.
Controleer of een afbeelding een beschrijving heeft:
Check de kwaliteit van de beschrijving en check of het antwoord op de volgende vragen ‘Ja’ is:
Fijn dat je het antwoord op je vraag hebt kunnen vinden. Heb je een idee over hoe we onze kennisbank kunnen verbeteren?
Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.
Waar was je naar op zoek?
Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.