Afbeeldingen

Alle afbeeldingen moeten een tekstalternatief hebben. Een tekstalternatief kan op verschillende manieren worden toegevoegd:

Tekstalternatief voor een <img>-element

Bij een <img>-element wordt een tekstalternatief gegeven met behulp van het <alt>-attribuut.

In de code ziet dat er zo uit:

<img src="hond.jpg" alt="Hond speelt met een bal">

Tekstalternatief voor een <svg>-element

Bij een <svg>-element wordt een tekstalternatief gegeven met behulp van het title-element in de svg. Gebruik ook aria-attribuut role="img" om ervoor te zorgen dat zo veel mogelijk ondersteunende technologieën het <svg>-element herkennen als een afbeelding.

In de code ziet dat er zo uit:

<svg role="img">
<title>Hond speelt met een bal</title>
</svg>

Tekstalternatief voor afbeeldingen die is geplaatst met CSS

Aan een afbeelding die geplaatst is met CSS kan een tekstalternatief worden gegeven met een aria-label-label.

In de code ziet dat er zo uit:

<div id=”logo” aria-label=”Hond speelt met een bal”></div>

Soms is het niet mogelijk om een afbeelding volledig te beschrijven in een kort tekstalternatief. Bijvoorbeeld als het gaat om een uitgebreide infographic of een grafiek. Dit soort complexe afbeeldingen moeten ook volledig worden beschreven in een tekstalternatief. Geef in dat geval naast een beknopte beschrijving in het alt-attribuut ook een langere beschrijving in de omringende tekst.

<img src="grafiek.jpg" alt="Verkoopcijfers zijn in 2021 met 18% gestegen">
<div>
<p>De groei van maandelijkse verkopen in 2021 tegen 2020 verliep als volgt:</p>
<ul>
<li>Januari: +22%</li>
<li>
</div>

Een langere beschrijving mag ook op een aparte pagina worden geplaatst. Plaats dan een link met de verwijzing naar die andere pagina direct voor of na de afbeelding.

<img src="grafiek.jpg" alt="Verkoopcijfers zijn in 2021 met 18% gestegen">
<a href=”/langere-beschrijving.html”><Uitgebreide beschrijving van de grafiek met verkoopcijfers</a>

De omringende tekst hoort ook te worden gekoppeld aan de afbeelding. Dit is geen verplichting maar wel erg handig. Hiervoor kan gebruik worden gemaakt van het aria-describedby-attribuut. Gebruik het ID van het element waar de complexe afbeelding beschreven wordt. Deze informatie hoort dan ook zichtbaar te zijn voor bezoekers die wel kunnen zien.

<img src="grafiek.jpg" alt="Verkoopcijfers zijn in 2020 met 18% gestegen" aria-describedby="beschrijving">
<div id="beschrijving">
<p>Januari: +22%</p>
<ul>
<li>Januari: +22%</li>
<li>
</div>

Afbeeldingen die puur ter decoratie op de pagina zijn geplaatst, horen geen tekstalternatief te hebben. Dit zijn bijvoorbeeld afbeeldingen die geen informatie overdragen en niet noodzakelijk zijn voor het begrijpen van de tekst. Deze afbeeldingen moeten worden genegeerd door hulptechnologieën. Decoratieve afbeeldingen kunnen het best met CSS worden geplaatst.

<div class="line"</div>
.line {
background-image: url("horizontale-lijn.jpg");
}

Als het niet mogelijk is om een decoratieve afbeelding met CSS te plaatsen, dan moet het alt-attribuut in het <img>-element worden leeg gelaten. Het alt-attribuut moet wel aanwezig zijn maar het heeft dan geen tekst.

<img src="horizontale-lijn.jpg" alt="" />

Zorg dat alle bewegende, scrollende of knipperende content dat automatisch start én langer dan 5 seconden duurt kan worden gepauzeerd, gestopt of worden uitgezet. Onder bewegende, scrollende of knipperende content vallen onder andere carrousels, animaties op de pagina, bewegende advertenties, enz. Bezoekers met een cognitieve beperking kunnen er door worden afgeleid. Ook voor bezoekers die gebruik maken van een schermlezer kan dit storend zijn.

Deze regels gelden ook alle automatisch verversende content, maar hiervoor geldt ook de frequentie van updates mag worden aangepast.