WCAG-succescriterium 1.1.1 Niet-tekstuele content

Niveau A

Uitleg

Alle niet-tekstuele content die aan de gebruiker wordt gepresenteerd, heeft een tekstalternatief dat een gelijkwaardig doel dient.

Uitzonderingen zijn bedieningselementen en invoer met een toegankelijke naam, op tijd gebaseerde media, een test of oefening, content bedoeld om een specifieke zintuiglijke ervaring te creëren, CAPTCHA's en niet-tekstuele content bedoeld voor decoratie.

Gerelateerde NL Design System-richtlijnen

Stijl: Iconen.
Formulieren - Buttons: De toegankelijke naam van een button.

Bronnen

De alt-beslisboom van 200 OK: wanneer en hoe kun je een alternatieve tekst toevoegen aan een afbeelding.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

Hoe te testen

Alternatieve teksten op afbeeldingen

Inspecteer in de gegenereerde HTML-code van de webpagina de <img>-elementen, bijvoorbeeld met een browser inspector.

Check voor afbeeldingen:

het alt-attribuut moet altijd aanwezig zijn, het kan zonder waarde (leeg) zijn: codevoorbeeld
```
<img src="img-url" alt="" />
```
of met een alt-tekst codevoorbeeld
```
<img src="img-url" alt="wit konijn" />
```
als een afbeelding betekenisvol is, moet de alt-tekst het doel ervan beschrijven.
als een afbeelding decoratief is, kan het alt-attribuut leeg zijn: alt="". Een alt-tekst toevoegen voor een afbeelding die decoratief is leidt niet tot afkeuring, een afbeelding kan naast tekst ook emotie overdragen. Lees hierover, de post van Text descriptions and emotion rich images van Léonie Watson en het bericht van Eric Eggert op Mastodon.
het alt-attribuut kan leeg zijn als de betekenis van de afbeelding vlak bij de afbeelding in tekst staat.
bevat een afbeelding tekst, die informatie toevoegt aan de content, dan moet deze tekst opgenomen zijn in de alt-tekst.

Controleer voor afbeeldingen in links en buttons:

de alt-tekst van een afbeelding in een link moet het doel van de link beschrijven.
de alt-tekst van een afbeelding in een button moet de actie beschrijven.
als zowel de inhoud van de afbeelding als het doel of de actie even belangrijk zijn, moet de alternatieve tekst beide beschrijven. Bijvoorbeeld bij een link op een logo.
als een afbeelding decoratief is, kan het alt-attribuut leeg zijn: alt="", maar de toegankelijke naam van een link of button moet volledig betekenisvol zijn. Bijvoorbeeld:

<a href="url">
  Meer informatie over de intocht van Sinterklaas
  <img src="pijltje-rechts.svg" alt="" />
</a>

Niet doen:

<!-- Foute code, niet gebruiken -->
<a href="url">
  <img src="iDEAL.svg" alt="" />
</a>

Benoem waar een video of audio over gaat

Geef tekstalternatief voor een video of audio zodat de bezoeker weet waar deze over gaat. Dan kan de bezoeker al dan niet besluiten de video of audio af te spelen. Dit door bijvoorbeeld een title-attribuut te geven aan de iframe-embed. Of door het onderwerp te beschrijven in de begeleidende tekst of een kopje erboven.

W3C referenties

Engelse tekst van het WCAG-succescriterium: 1.1.1 Non-text Content.
Nederlandse vertaling van het WCAG-succescriterium: 1.1.1 Niet-tekstuele content.
Engelstalige informatie op How to Meet WCAG: Quick Reference 1.1.1 Non-text Content.
Engelstalige toelichting: Understanding SC 1.1.1: Non-text Content.

Belangrijk: De richtlijnen van NL Design System zijn niet verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.