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
- Geef elke afbeelding in je CMS of template een korte, specifieke beschrijving als alt-tekst.
- Beschrijf wat voor een klant belangrijk is: productnaam, kleur en de getoonde kant (bijvoorbeeld ‘Canvas tas in olijfgroen, vooraanzicht’).
- Decoratieve afbeeldingen horen een leeg alt-attribuut (alt="") te hebben, zodat schermlezers ze overslaan.
In Shopify
- 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.
- Beschrijf wat voor een klant belangrijk is: productnaam, kleur en de getoonde kant (bijvoorbeeld ‘Canvas tas in olijfgroen, vooraanzicht’).
- Decoratieve afbeeldingen horen een leeg alt-attribuut (alt="") te hebben, zodat schermlezers ze overslaan.
In WooCommerce en WordPress
- Open in WordPress Media > Bibliotheek, selecteer elke afbeelding en vul ‘Alternatieve tekst’ in. Afbeeldingen in de productgalerij gebruiken hetzelfde veld.
- Beschrijf wat voor een klant belangrijk is: productnaam, kleur en de getoonde kant (bijvoorbeeld ‘Canvas tas in olijfgroen, vooraanzicht’).
- 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.
Zo vindt FixReports het
Onze scan voert de axe-core-regel image-alt uit in een echte Chrome-browser op elke pagina die hij test, en meldt elk element dat niet slaagt, met de pagina, de markup en, waar van toepassing, een screenshot.
Een geautomatiseerde test bevestigt dat dit specifieke probleem aanwezig is. Hij kan niet zeggen of de rest van de pagina toegankelijk is: sommige drempels komen pas aan het licht als een mens de pagina controleert.