WCAG 1.1.1

Samenvatting

WCAG 1.1.1 vereist dat alle niet-tekstuele content (zoals afbeeldingen, grafieken, knoppen of multimedia) een gelijkwaardig tekstalternatief biedt. Dit zorgt ervoor dat content toegankelijk is voor gebruikers die hulpmiddelen zoals screenreaders gebruiken of die om andere redenen tekstalternatieven nodig hebben.

Niveau: A
Categorie: Perceivable (Waarneembaar)

Wat is WCAG 1.1.1 – Niet-tekstuele inhoud?

Niet-tekstuele inhoud verwijst naar elk element op een webpagina dat geen leesbare tekst is, zoals afbeeldingen, pictogrammen, grafieken, audiofragmenten, video’s, knoppen of interactieve elementen zonder tekstlabels.

Deze richtlijn garandeert dat informatie niet verloren gaat voor gebruikers met een visuele beperking, cognitieve beperking of mensen die hulptechnologieën gebruiken. Tekstuele alternatieven (zoals alt-teksten) geven screenreaders de mogelijkheid om de informatie begrijpelijk over te brengen.

Wie heeft hier baat bij?

Mensen met een visuele beperking die gebruikmaken van screenreaders.
Mensen met cognitieve beperkingen die verduidelijking nodig hebben bij visuele informatie.
Gebruikers met langzame of beperkte internetverbinding waarbij afbeeldingen mogelijk niet laden.
Gebruikers die via spraakbediening browsen en interacteren met de pagina.

Hoe voldoe je aan WCAG 1.1.1?

Zorg altijd voor zinvolle tekstalternatieven bij niet-tekstuele elementen.

Gebruik van alt-attributen bij informatieve afbeeldingen:

<img src="hond.jpg" alt="Een bruine hond die speelt in het gras">

Een duidelijke alt-tekst beschrijft precies wat de afbeelding toont.

Gebruik van aria-labels bij interactieve iconen zonder zichtbare tekst:

<button aria-label="Menu openen">
  <svg><!-- pictogram --></svg>
</button>

Het aria-label verduidelijkt de actie voor gebruikers met hulpmiddelen.

Beschrijven van complexe afbeeldingen (zoals grafieken) via tekstuele toelichting en aria-labelledby:

<img src="omzet-grafiek.png" aria-labelledby="grafiekOmschrijving">
<p id="grafiekOmschrijving">
  Deze grafiek toont de omzetontwikkeling van 2020 tot 2025 met een sterke groei vanaf 2023.
</p>

Gebruikers kunnen de inhoud van complexe afbeeldingen beter begrijpen dankzij de uitgebreide beschrijving.

Gebruik lege alt-attributen (alt="") bij decoratieve afbeeldingen zodat hulptechnologieën ze negeren:

<img src="decoratief-patroon.png" alt="">

Decoratieve afbeeldingen worden genegeerd, zodat ze niet voor verwarring zorgen bij gebruikers met hulptechnologie.

Goede en slechte voorbeelden

✅ Goed voorbeeld:

<img src="logo-bedrijf.png" alt="Logo van Accesseo, een toegankelijkheidsbedrijf">

Duidelijke beschrijving van de inhoud van de afbeelding.

❌ Slecht voorbeeld (geen alt-attribuut):

<img src="logo-bedrijf.png">

Geen alt-attribuut; ontoegankelijk voor gebruikers met hulpmiddelen.

❌ Slecht voorbeeld (onduidelijke alt-tekst):

<img src="logo-bedrijf.png" alt="logo">

Onvoldoende omschrijving; zegt weinig over de inhoud of context.

Hoe test je WCAG 1.1.1?

Handmatige controle:

Controleer of alle informatieve afbeeldingen, iconen, grafieken, video's (waar relevant) en interactieve elementen een duidelijk tekstalternatief bevatten.
Controleer of decoratieve afbeeldingen expliciet zijn gemarkeerd met een leeg alt-attribuut (alt="").
Controleer of complexe visuele elementen (zoals grafieken en diagrammen) een aanvullende tekstuele beschrijving hebben.

Automatische hulpmiddelen:

Gebruik één of beide van de volgende standaardtools:

Axe DevTools
Lighthouse (Chrome DevTools)

Gebruik een screenreader:

NVDA (Windows)
VoiceOver (Mac)