Schrijf de juiste alt-tekst bij elk type afbeelding

Afbeeldingen komen in veel vormen: foto’s, iconen, grafieken, decoraties, infographics en meer. Op deze pagina zie je voorbeelden van verschillende typen afbeeldingen, met uitleg over wanneer je wel of geen alt-tekst toevoegt.

Deze uitleg sluit aan op de algemene richtlijnen over afbeeldingen. Je leest hier per situatie wat de juiste keuze is en krijgt voorbeelden en praktische tips.

Context is bepalend

De juiste alt-tekst hangt af van de context. Een afbeelding van een koe kan decoratief zijn bij een verhaal over het boerenleven, maar informatief in een artikel over verschillende koeienrassen.

Op een gemeentelijke website kan een foto van het gemeentehuis volstaan met “gemeentehuis van Amersfoort” als het artikel over de organisatie gaat. Gaat de tekst over duurzame verbouwingen, dan beschrijf je in de alt-tekst de zichtbare verduurzamingen zoals de zonnepanelen op het dak.

De context bepaalt dus of een afbeelding decoratief of informatief is, en wat er precies in de alt-tekst moet staan.

Informatieve afbeelding

Een informatieve afbeelding ondersteunt of verduidelijkt de inhoud van de pagina. Dat kan een eenvoudige afbeelding zijn, zoals een foto of illustratie, of een complexe, zoals een grafiek of kaart.

Alt-tekst bij een eenvoudige informatieve afbeelding

Beschrijf in de alt-tekst kort wat er te zien is en wat relevant is voor de inhoud. Laat weg wat niet belangrijk is om de boodschap te begrijpen.

Doen

Beschrijf kort wat er op de afbeelding te zien is en waarom die relevant is voor de inhoud.

Horeca gelegenheden in Amersfoort

Koffie drinken kun je in Amersfoort niet alleen op hele mooie plekken, maar ook in héél bijzonder gezelschap.

Twee mensen krijgen koffie geserveerd op het terras van Direntuin Amersfoort. Aan hun voeten liggen twee luipaarden.

<h2 class="utrecht-heading-2">Horeca gelegenheden in Amersfoort</h2><p>Koffie drinken kun je in Amersfoort niet alleen op hele mooie plekken, maar ook in héél bijzonder gezelschap.</p><img src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_content_afbeeldingen-Amersfoortse-Dierentuin.jpg" alt="Twee mensen krijgen koffie geserveerd op het terras van Direntuin Amersfoort. Aan hun voeten liggen twee luipaarden." class="utrecht-img"/>

Wil je meer uitleg geven bij de afbeelding? Voeg dan een onderschrift toe. Zet niet te veel tekst in de alt-tekst.

Doen

Een onderschrift gebruiken voor een langere beschrijving

Twee mensen op een terras. — 1963 - Op het terras van het café van de Amersfoortse dierentuin krijgen twee bezoekers een kopje koffie geserveerd. Dat is in eerste instantie niet heel bijzonder, maar het feit dat zij allebei een Afrikaans jachtluipaard aan hun voeten hebben liggen waarvan zij zelf de riem vasthouden wel!

<figure><img src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_content_afbeeldingen-Amersfoortse-Dierentuin.jpg" alt="Twee mensen op een terras." class="utrecht-img"/><figcaption>1963 - Op het terras van het café van de Amersfoortse dierentuin krijgen twee bezoekers een kopje koffie geserveerd. Dat is in eerste instantie niet heel bijzonder, maar het feit dat zij allebei een Afrikaans jachtluipaard aan hun voeten hebben liggen waarvan zij zelf de riem vasthouden wel!</figcaption></figure>

Alt-tekst bij een complexe informatieve afbeelding

Bevat de afbeelding veel informatie, zoals cijfers, verbanden of meerdere onderdelen die samen betekenis geven? Geef dan een korte samenvatting in de alt-tekst en zet de volledige uitleg naast of onder de afbeelding.

Doen

Schrijf een korte samenvatting in de alt-tekst. Voeg daarnaast altijd een uitgebreide beschrijving toe op de pagina zelf. Verwijs in de alt-tekst naar die beschrijving.

Toegankelijkheidsladder. Voor een uitgebreide beschrijving zie de tekst na deze afbeelding — Digitale toegankelijkheidsladder

Vooruitstrevend - Digitale toegankelijkheid is volledig geintegreerd in de processen van de organisatie

Proactief - Digitale toegankelijkheid heeft hoge prioriteit en wordt continu verbeterd

Berekenend - De regels voor digitale toegankelijkheid worden belangrijk gevonden

Reactief - Het verandergedrag rondom digitale toegankelijkheid is ad hoc en van korte duur

Passief - Het nut van toegankelijkheidsmaatregelen wordt niet ingezien

<figure><img src="https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen-content-afbeeldingen-voorbeeld-toegankelijkheidsladder.png" alt="Toegankelijkheidsladder. Voor een uitgebreide beschrijving zie de tekst na deze afbeelding" class="utrecht-img"/><figcaption>Digitale toegankelijkheidsladder<ol class="utrecht-ordered-list utrecht-ordered-list--html-content"><li>Vooruitstrevend - Digitale toegankelijkheid is volledig geintegreerd in de processen van de organisatie</li><li>Proactief - Digitale toegankelijkheid heeft hoge prioriteit en wordt continu verbeterd</li><li>Berekenend - De regels voor digitale toegankelijkheid worden belangrijk gevonden</li><li>Reactief - Het verandergedrag rondom digitale toegankelijkheid is ad hoc en van korte duur</li><li>Passief - Het nut van toegankelijkheidsmaatregelen wordt niet ingezien</li></ol></figcaption></figure>

Doen

Geef de gegevens in een grafiek ook weer in een toegankelijke tabel direct onder of naast de afbeelding. Gebruik de alt-tekst om kort samen te vatten waar de grafiek over gaat en verwijs naar de tabel voor de volledige informatie.

Staafdiagram met investering, verkoop en winst van de afgelopen vier jaar. De volledige informatie uit grafiek staat in de tabel na deze afbeelding.

Chart Title
Year	Invest	Sales	Profit
Year 1	4.3	2.4	2
Year 2	4	3.5	3
Year 3	3.5	2.8	3.8
Year 4	4.5	2.8	5

<img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Bar_graph_-_stock_price_statistics.jpg" alt="Staafdiagram met investering, verkoop en winst van de afgelopen vier jaar. De volledige informatie uit grafiek staat in de tabel na deze afbeelding." class="utrecht-img"/><table><caption>Chart Title</caption><thead><tr><th>Year</th><th>Invest</th><th>Sales</th><th>Profit</th></tr></thead><tbody><tr><th>Year 1</th><td>4.3</td><td>2.4</td><td>2</td></tr><tr><th>Year 2</th><td>4</td><td>3.5</td><td>3</td></tr><tr><th>Year 3</th><td>3.5</td><td>2.8</td><td>3.8</td></tr><tr><th>Year 4</th><td>4.5</td><td>2.8</td><td>5</td></tr></tbody></table>

Decoratieve afbeelding

Een decoratieve afbeelding is alleen bedoeld voor aankleding of sfeer. De afbeelding voegt geen betekenis toe aan de inhoud van de pagina en mag daarom genegeerd worden door hulptechnologie.

Of een afbeelding echt decoratief is, hangt af van de context. Een foto die op de ene pagina puur sfeer toevoegt, kan op een andere pagina juist informatie overbrengen en dan wél een alt-tekst nodig hebben.

[Meer voorbeelden invoegen]

Doen

Laat het alt-attribuut leeg. Zo wordt de afbeelding overgeslagen door schermlezers.

<img src="https://upload.wikimedia.org/wikipedia/commons/a/a6/1183_Diamonds_and_Hearts.jpg" alt="" class="utrecht-img"/>

Functionele afbeelding

Een functionele afbeelding is een afbeelding waarmee je iets kunt doen, zoals op klikken, of waarmee een actie wordt aangegeven. Denk aan een pictogram op een knop, een afbeelding als link of een icoon met een waarschuwing.

[Meer voorbeelden invoegen]

Doen

Beschrijf wat de functie is van de afbeelding, niet wat je ziet. De tekst moet duidelijk maken wat er gebeurt als iemand erop klikt of wat de bedoeling is van het pictogram.

<a href="" class="utrecht-link utrecht-link--html-a"><img src="https://upload.wikimedia.org/wikipedia/commons/4/43/Minimalist_info_Icon.png" alt="Meer informatie over..." class="utrecht-img"/></a>

Afbeeldingen met tekst

Sommige afbeeldingen bevatten tekst. Denk aan een logo, een knop met tekst of een infografiek. In dat geval is het belangrijk om goed na te gaan of de tekst nodig is in de afbeelding zelf, en hoe je die toegankelijk maakt.

Tekst in een afbeelding wordt niet voorgelezen door een screenreader en kan niet worden aangepast aan de behoeften van de bezoeker. Gebruik daarom liever gewone tekst in HTML.

Soms is een afbeelding van tekst wél gerechtvaardigd, bijvoorbeeld bij een logo of als de typografie onderdeel is van de boodschap.

Complexe afbeeldingen met tekst

Bevat de afbeelding veel tekst, zoals in een infografiek of kaart? Geef dan in de alt-tekst een korte samenvatting en zet de volledige tekst naast of onder de afbeelding.

Voorbeeld

Afbeelding: Infografiek over stappen van een subsidieaanvraag. Alt-tekst: Stappen van een subsidieaanvraag. De volledige beschrijving staat onder de afbeelding.

1..

Functionele afbeeldingen met tekst

Een functionele afbeelding met tekst is een afbeelding waarmee je iets kunt doen, zoals een knop of link.

Beschrijf in de alt-tekst de functie van de afbeelding, niet de exacte tekst. Gebruik waar mogelijk echte tekst op de knop of link.

Voorbeeld

Afbeelding: Knop met het woord “Verstuur”. Alt-tekst: Formulier versturen.

Tekst als visueel element

Soms bevat een afbeelding tekst die alleen voor de vorm is gebruikt, zoals een decoratieve banner met het woord Welkom.

Laat in dat geval de alt-tekst leeg (alt="") zodat schermlezers de afbeelding overslaan.

Voorbeeld

Afbeelding: Banner met het woord “Welkom” in sierletters. Alt-tekst: (leeg laten)

Over deze richtlijnen

Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.