Alternatieve tekst
Elke betekenisvolle afbeelding heeft een tekstalternatief nodig dat het doel beschrijft — niet het uiterlijk. Decoratieve afbeeldingen krijgen alt="". 54% van de homepagina's heeft afbeeldingen zonder alt-tekst.
Een korte schriftelijke beschrijving van een afbeelding, zodat mensen die deze niet kunnen zien (en zoekmachines) toch weten wat erop te zien is.
WCAG 1.1.1 (Niveau A) vereist tekstalternatieven voor alle niet-tekstuele inhoud. Het kernprincipe: beschrijf het doel, niet het uiterlijk.
Beslisboom:
- Is het puur decoratief? → alt=""
- Is het een link of knop? → beschrijf de bestemming of actie
- Brengt het informatie over? → beschrijf die informatie
- Is het complex (grafiek, diagram)? → geef zowel korte alt als langere beschrijving
- Is het tekst weergegeven als afbeelding? → de alt-tekst IS de tekst
Waarom dit belangrijk is
Ontbrekende alt-tekst treft 54% van de homepagina's. Voor schermlezersgebruikers is een afbeelding zonder alt-tekst volledig onzichtbaar of wordt aangekondigd als bestandsnaam ("IMG_20240315_compressed.jpg"). Gelinkte afbeeldingen zonder alt-tekst creëren links zonder toegankelijke naam — een volledige navigatiebarrière.
Hoe te detecteren
Voer een geautomatiseerde scan uit (axe, WAVE) om ontbrekende alt-attributen te vinden. Controleer vervolgens handmatig: beschrijft de alt-tekst het doel van de afbeelding in context? Zijn decoratieve afbeeldingen gemarkeerd met alt=""? Worden complexe afbeeldingen (grafieken, infographics) adequaat beschreven?
Hoe op te lossen
<!-- Informative image --> <img src="chart.png" alt="Sales grew 40% in Q3, reaching .4M" /> <!-- Linked image --> <a href="/home"> <img src="logo.svg" alt="Acme Corp — Back to homepage" /> </a> <!-- Decorative image --> <img src="divider.svg" alt="" /> <!-- Complex image with long description --> <figure> <img src="flowchart.png" alt="User registration flow" aria-describedby="flow-desc" /> <figcaption id="flow-desc">Step 1: Enter email. Step 2: Verify. Step 3: Set password. Step 4: Choose preferences.</figcaption> </figure>