WCAG 1.1.1
Non-text Content (Niet-tekstuele inhoud)
Ontvang de laatste inzichten direct in jouw mailbox
Geen zorgen, het is een maandelijkse nieuwsbrief, u kunt zich op elk moment afmelden.
Non-text Content (Niet-tekstuele inhoud)
Geen zorgen, het is een maandelijkse nieuwsbrief, u kunt zich op elk moment afmelden.
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)
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.
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.
✅ 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.
alt="").Gebruik één of beide van de volgende standaardtools: