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.
A short written description of an image, so people who can't see it (and search engines) still know what it shows.
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>