Succescriterium 1.1.1 Niet-tekstuele content lijkt erg eenvoudig: Geef alle niet-tekstuele content op een pagina een passend alternatief dat wel uit tekst bestaat. Toch gaat dit in de praktijk vaak mis.
In dit artikel staan handvatten voor het toevoegen van een tekstalternatief aan een afbeelding zoals een foto, illustratie of icoon. Hier kan een contentspecialist, webredacteur of ontwikkelaar afbeeldingen direct toegankelijker mee maken.
Succescriterium 1.1.1 Niet-tekstuele content valt onder principe 1: Waarneembaar van de richtlijnen voor toegankelijkheid van webcontent. Dit principe moet zorgen dat iedereen een website, document of app kan ervaren met de zintuigen die voor hen beschikbaar zijn. Niet iedereen heeft namelijk altijd, alle zintuigen ter beschikking.
Tekstalternatieven hebben meerdere functies:
- Schermlezers gebruiken het tekstalternatief om niet-tekstuele content te presenteren. Zo kan voorleessoftware tekst omzetten in spraak en kan een brailleleesregel tekst vertalen naar braille. Op deze manier wordt niet-tekstuele content ook toegankelijk voor mensen met een visuele beperking.
- Browsers laten het tekstalternatief zien als een afbeelding niet kan inladen door een fout in de code of een fout in de verbinding.
- Zoekmachines gebruiken het tekstalternatief bij het beoordelen van de inhoud van een webpagina.
Schrijven van een tekstalternatief
Een tekstalternatief kan in een CMS meestal makkelijk worden toegevoegd in de mediabibliotheek of in de editor op de pagina.
Een tekstalternatief is alleen nuttig als de beschrijving goed passend is; De inhoud van het tekstalternatief hangt af van het doel van de afbeelding. Afbeeldingen zijn in 4 categorieën te verdelen:
- Informatief: Afbeeldingen die informatie toevoegen aan een pagina.
- Functioneel: Afbeeldingen die ook een link of knop zijn.
- Decoratief: Afbeeldingen die niet noodzakelijk zijn voor het begrijpen van de tekst of de pagina.
- Complex: Afbeeldingen die veel informatie toevoegen aan een pagina.
Informatieve afbeeldingen
Geef informatieve afbeeldingen een tekstalternatief dat beschrijft wat er op de afbeelding te zien is.
Functionele afbeeldingen
Geef functionele afbeeldingen een tekstalternatief dat beschrijft wat het doel van de link is of beschrijft wat het resultaat van de actie is.
Decoratieve afbeeldingen
Zorg dat hulptechnologieën decoratieve afbeeldingen kunnen negeren. Een leeg tekstalternatief is vaak al voldoende.
Complexe afbeeldingen
Geef complexe afbeeldingen naast een beknopte beschrijving in het tekstalternatief ook een langere beschrijving in de omringende tekst.
Code van een tekstalternatief
<img>-element
Het <img>-element is een veelgebruikte manier om afbeeldingen toe te voegen aan een website. Een tekstalternatief voor een <img>-element wordt gegeven met het alt-attribuut. Alle <img>-elementen moeten een alt-attribuut hebben.
De inhoud van het alt-attribuut is standaard niet zichtbaar.
<img src="logo-wcag.jpg" alt="WCAG.nl">Bij een decoratieve afbeelding moet het alt-attribuut een lege waarde hebben (alt=""). Hierdoor kunnen hulptechnologieën de afbeelding negeren.
<img src="horizontale-lijn.jpg" alt="">Geef bij complexe afbeeldingen naast een beschrijving in het alt-attribuut ook een langere beschrijving in de omringende tekst. Deze kan in de code worden gekoppeld aan het <img>-element. Gebruik hiervoor het aria-describedby-attribuut met het id-attribuut van het beschrijvende element.
<img src="infographic.jpg" alt="besluitboom voor het schrijven van tekstalternatief" aria-describedby="1">
<div id="1">
<p>Afbeeldingen zijn in 4 categorieën te verdelen:</p>
<ol>
<li>Informatief</li>
<li>Functioneel</li>
<li>Decoratief</li>
<li>Complex</li>
</ol>
...
</div><svg>-element
Het <svg>-element is een container voor SVG-afbeeldingen. SVG-afbeeldingen zijn vector-based afbeeldingen. Deze afbeeldingen zijn hierdoor goed schaalbaar; ze kunnen worden vergroot zonder dat de kwaliteit verloren gaat.
Een tekstalternatief kan op een aantal manieren worden toegevoegd aan een <svg>-element. Bijvoorbeeld met het <title>-element of, bij voorkeur, samen met het aria-labelledby-attribuut.
<svg role="img">
<title>WCAG.nl</title>
...
</svg><svg role="img" aria-labelledby="1">
<title id="1">WCAG.nl</title>
...
</svg><svg role="img" aria-labelledby="2">
...
</svg>
<span id="2">WCAG.nl</span>Als het <svg>-element puur decoratief is, gebruik dan het aria-hidden="true"
<svg aria-hidden="true">
...
</svg><figure>-element
Het <figure>-element is toegevoegd in HTML5. In het <figure>-element kunnen afbeeldingen worden gepresenteerd (maar ook andere content zoals tekst, quotes, codeblokken, enz.).
Voor het plaatsen van een afbeelding met het <figure>-element wordt een <img>-element in het <figure>-element geplaatst. Het <img>-element heeft hier ook het alt-attribuut nodig.
Het <figcaption>-element geeft een zichtbaar bijschrift de afbeeldingen in een <figure>-element. Het <figcaption>-element is optioneel.
<figure>
<img src="teckel.jpg" alt="Teckel rennend met speelgoed">
<figcaption>
Mijn hond Jet
</figcaption>
</figure>Het <figure>-element is handig voor het presenteren van meerdere afbeeldingen in een groep.
<figure>
<img src="teckel_1.jpg" alt="teckel rennend in het gras">
<img src="teckel_2.jpg" alt="teckel staand in de zee">
<figcaption>
Mijn hond Jet
</figcaption>
</figure>Icon fonts of toolkits
Icon fonts zijn lettertypen met iconen in plaats van letters en cijfers. Icon toolkits bestaan uit een iconenbibliotheek met soms duizenden iconen. Deze manieren van het plaatsen van een icoon zijn populair omdat de iconen makkelijk met CSS kunnen worden vormgegeven en goed schaalbaar zijn.
Deze iconen zijn standaard nog niet goed toegankelijk. Ze hebben geen tekstalternatief en worden soms, net als gewone tekst, wél gepresenteerd door schermlezers. Zorg daarom dat het icoon wordt verborgen voor hulptechnologieën met het aria-hidden="true"-attribuut en geef het icoon een passend tekstalternatief.
Een tekstalternatief voor een icon font kan bijvoorbeeld worden toegevoegd met gewone tekst die dan wordt verborgen met CSS. Deze tekst is dan alleen voor hulptechnologieën te zien. Dit kan eventueel samen met het title-attribuut.
<i class="fas fa-calendar" aria-hidden="true" title="Datum"></i>
<span class="screenreader-text">Datum:</span>
<span>19 mei 2022</span>Met de CSS:
.screenreader-text {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}Dit is een voorbeeld met de icon toolkit Font Awesome. Kijk voor meer informatie ook eens op Font Awesome Accessibility: http://fontawesome.io/accessibility/ (Engelstalig)
Tips voor tekstalternatieven
Logo’s (of eventueel afbeeldingen met tekst) die ook een link zijn vallen in meerdere categorieën. In de categorie informatief én de categorie functioneel. Beschrijf in het tekstalternatief dan de tekst die op de afbeelding te zien is maar ook wat het doel van de link is.
Tot slot nog een paar tips andere voor het schrijven van een goed tekstalternatief:
- Beschrijf de informatie die belangrijk is voor de context en het doel van de afbeelding.
- Zorg dat de beschrijving beknopt maar relevant is (maximaal 150 tekens).
- Gebruik in de beschrijving alle tekst die op de afbeelding te zien is.
- Gebruik in de beschrijving alleen teksten zoals “foto van..”, “illustratie van..” of “schermafbeelding van..” als dit relevant is voor de context en het doel van de afbeelding.