Niet-tekstuele inhoud

Wat het vereist

Niet-tekstuele inhoud — afbeeldingen, pictogrammen, diagrammen, animaties, CAPTCHA’s, audio-embeds, zintuiglijke ervaringen — moet een tekstalternatief bevatten dat dezelfde informatie of functie overbrengt. Het tekstalternatief is wat een hulptechnologie aan de gebruiker presenteert wanneer de originele inhoud niet waarneembaar is.

De vier categorieën die WCAG onderscheidt:

• Informatieve afbeeldingen vereisen een alt-attribuut dat de overgebrachte informatie beschrijft.
• Functionele afbeeldingen (links, knoppen) vereisen een alt die de actie beschrijft, niet het uiterlijk.
• Decoratieve afbeeldingen krijgen een leeg alt (alt="") zodat schermlezers ze overslaan.
• Complexe afbeeldingen (diagrammen, grafieken) vereisen een korte alt én een uitgebreidere beschrijving in de nabijgelegen tekst, in een <details>-blok of via aria-describedby.

Hoe te voldoen

• Voeg een alt-attribuut toe aan elk <img>-element. Leeg bij decoratieve afbeeldingen, beschrijvend bij informatieve.
• Geef elk pictogram-alleen-<button> een toegankelijke naam via aria-label, zichtbare tekst of een SVG-<title>.
• Schrijf voor grafieken en infographics een samenvattende alt van één zin en zet de onderliggende gegevens in een toegankelijke tabel direct voor of na de figuur.
• Bied voor CAPTCHA’s minimaal één niet-visueel alternatief aan (audio-CAPTCHA, e-mailverificatie, servergestuurde tariefbeperking).
• Bied voor audio die informatie overbrengt (een podcastfragment, een UI-geluid) een tekstequivalent aan.

Veelvoorkomende fouten

• alt="afbeelding" of alt="foto van een persoon" — beschrijft het medium, niet de inhoud.
• Pictogram-alleen-knoppen zonder toegankelijke naam (<button><svg /></button>). Schermlezers kondigen alleen „knop“ aan, zonder verdere context.
• Decoratieve afbeeldingen zonder alt="" — schermlezers vallen terug op het lezen van de bestandsnaam.
• <img>-tags voor grafieken met de diagramtitel als alt, terwijl de onderliggende gegevens nergens op de pagina staan.
• CSS-achtergrondafbeeldingen die betekenis dragen, zonder tekstlabel in de opmaak.

Waarom het belangrijk is

Dit is het fundament van schermlezertoegankelijkheid. Een site die niet aan 1.1.1 voldoet, is onbruikbaar voor blinde gebruikers — elke afbeelding wordt een dood spoor. Het is ook de meest voorkomende fout die axe en Lighthouse detecteren, omdat geautomatiseerde hulpmiddelen ontbrekende alt-attributen kunnen signaleren maar niet kunnen beoordelen of het aanwezige alternatief inhoudelijk correct is.