# Afbeeldingen moeten een tekstalternatief hebben

<https://www.fixreports.com/nl/issues/image-alt>

WCAG 1.1.1 Niet-tekstuele content · Niveau A

Afbeeldingen missen een tekstalternatief, waardoor gebruikers van een schermlezer niet weten wat ze tonen.

## Wat deze regel controleert
Zorg dat <img>-elementen een tekstalternatief hebben, of de rol none of presentation.

## Waarom het belangrijk is
WCAG 1.1.1 vraagt een tekstalternatief voor betekenisvolle afbeeldingen. Zonder tekstalternatief weet iemand met een schermlezer niet welk product een foto toont.

## Zo los je het op
### Op elke website
1. Geef elke afbeelding in je CMS of template een korte, specifieke beschrijving als alt-tekst.
2. Beschrijf wat voor een klant belangrijk is: productnaam, kleur en de getoonde kant (bijvoorbeeld ‘Canvas tas in olijfgroen, vooraanzicht’).
3. Decoratieve afbeeldingen horen een leeg alt-attribuut (alt="") te hebben, zodat schermlezers ze overslaan.

### In Shopify
1. Open in de Shopify-beheeromgeving Producten > [product] > Media, klik op elke afbeelding en vul ‘Alt-tekst’ in. Voor afbeeldingen in secties open je Webwinkel > Thema’s > Aanpassen en stel je de alt-tekst van de afbeelding in bij de instellingen van de sectie.
2. Beschrijf wat voor een klant belangrijk is: productnaam, kleur en de getoonde kant (bijvoorbeeld ‘Canvas tas in olijfgroen, vooraanzicht’).
3. Decoratieve afbeeldingen horen een leeg alt-attribuut (alt="") te hebben, zodat schermlezers ze overslaan.

### In WooCommerce en WordPress
1. Open in WordPress Media > Bibliotheek, selecteer elke afbeelding en vul ‘Alternatieve tekst’ in. Afbeeldingen in de productgalerij gebruiken hetzelfde veld.
2. Beschrijf wat voor een klant belangrijk is: productnaam, kleur en de getoonde kant (bijvoorbeeld ‘Canvas tas in olijfgroen, vooraanzicht’).
3. Decoratieve afbeeldingen horen een leeg alt-attribuut (alt="") te hebben, zodat schermlezers ze overslaan.

## Zo controleer je de oplossing
- Scan de betrokken pagina’s opnieuw.
- Gebruik een schermlezer (VoiceOver: Cmd+F5 op een Mac) om te horen hoe de productafbeeldingen worden voorgelezen.

## Bronnen
- Documentatie van de axe-core-regel (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Uitleg bij WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content