Alt-tekst: zo beschrijf je afbeeldingen in je webshop

Waarom alt-tekst in een webshop telt

Een blinde klant ziet je productfoto niet. Hij hoort de alt-tekst. Staat die er niet, dan zegt de schermlezer alleen "afbeelding", of hij spelt de bestandsnaam: "D S C nul vier één twee". Kleur, model en aanzicht gaan verloren, terwijl een ziende klant juist daarop kiest.

Het komt vaak voor. In ons onderzoek onder 259 Nederlandse webshops had 21,6% van de homepages afbeeldingen zonder alt-tekst. Dat is een ondergrens. We maten alleen de homepage, en alleen wat software kan vaststellen. Een alt-tekst die er staat maar niets zegt, zit niet in dat cijfer.

De vuistregel: wat moet de klant weten?

Stel je voor dat je de afbeelding aan de telefoon beschrijft aan iemand die wil kopen. Wat je dan zegt, is je alt-tekst. "Foto van" laat je weg, want de schermlezer meldt zelf al dat het een afbeelding is. Bepaal daarna welke rol de afbeelding heeft.

• Hij vertelt iets. Beschrijf wat de klant moet weten. Denk aan een productfoto, een maattabel als plaatje of een foto die laat zien hoe groot een tas is.
• Hij versiert alleen. Geef een lege alt: alt="". De schermlezer slaat hem dan over. Laat het attribuut niet weg, want zonder alt lezen veel schermlezers juist de bestandsnaam voor.
• Hij doet iets. Staat de afbeelding in een link of knop, dan beschrijf je wat er gebeurt als je klikt. Hoe hij eruitziet, doet er dan niet toe.

Voor twijfelgevallen heeft W3C een beslisboom voor alt-teksten (Engelstalig).

Alt-tekst per soort afbeelding

Productfoto's

Noem het product en wat het onderscheidt: kleur, materiaal, model, aanzicht. De prijs en een verkoopzin horen er niet in. Die staan al in de tekst ernaast.

Zo niet<img src="jas-blauw-01.jpg" alt="jas-blauw-01.jpg">

Zo wel<img src="jas-blauw-01.jpg" alt="Blauwe regenjas met capuchon, vooraanzicht">

Heeft een product zes foto's, geef dan elke foto een eigen alt-tekst. Zes keer dezelfde productnaam vertelt niets over wat de volgende foto laat zien. Beschrijf wat er anders is: "achterkant met reflecterende streep", "detail van de rits", "gedragen met de capuchon op".

Varianten en kleurstalen

Een kleurstaal is meestal een knop met een plaatje van de stof of een gekleurd vlakje. Zonder naam hoort een schermlezergebruiker zes keer "knop". Zet je een afbeelding in de knop, geef die dan de kleurnaam als alt-tekst. Laat ook horen welke kleur gekozen is, bijvoorbeeld met aria-pressed op de knop.

Zo niet<button><img src="staal-14.png" alt=""></button>

Zo wel<button aria-pressed="true"><img src="staal-14.png" alt="Olijfgroen"></button>

Wisselt de grote productfoto mee met de gekozen kleur, pas dan ook de alt-tekst van die foto aan. Een groene jas met de alt-tekst "blauwe regenjas" zet een blinde klant op het verkeerde been, en dat merkt hij pas als het pakket binnen is.

Logo's en keurmerken

Je logo krijgt de naam van je winkel als alt-tekst. Niet het woord "logo", en ook geen slogan. Staat het logo in een link naar de homepage, wat bijna altijd zo is, dan beschrijft de alt-tekst ook waar de link heen gaat.

Zo niet<a href="/"><img src="logo.svg" alt="logo"></a>

Zo wel<a href="/"><img src="logo.svg" alt="Voorbeeldwinkel, naar de homepage"></a>

De rij logo's onderaan je pagina vertelt ook iets: met welke betaalmethoden je klant kan afrekenen en bij welk keurmerk je bent aangesloten. Geef elk logo daar de naam die erop staat.

Banners en sfeerbeelden

Een sfeerfoto boven een categoriepagina, een achtergrondpatroon of een sierlijn vertelt de klant niets wat hij nodig heeft. Die krijgt een lege alt, of je zet hem als achtergrond in de CSS.

Let wel op banners met tekst erin. "Uitverkoop: alle winterjassen afgeprijsd" in een plaatje is informatie. Die tekst hoort in de alt, of beter: als echte tekst in de HTML over de afbeelding heen. Echte tekst kan een bezoeker vergroten, en een zoekmachine leest hem ook.

Zo niet<img src="banner-uitverkoop.jpg" alt="banner">

Zo wel<img src="banner-uitverkoop.jpg" alt="Uitverkoop: alle winterjassen afgeprijsd">

Iconen in knoppen

Het winkelwagentje, het vergrootglas, het hartje voor je verlanglijst en het menu met drie streepjes zijn vaak alleen een pictogram. Zonder tekst hoort een schermlezergebruiker "knop" en moet hij raden. Geef de knop daarom een naam die zegt wat hij doet.

Is het pictogram een afbeelding, dan is dat de alt-tekst. Bij een SVG zet je een aria-label op de knop en verberg je de SVG voor hulpsoftware. Staat er al zichtbare tekst naast het pictogram, zoals "Winkelwagen", dan krijgt het pictogram zelf een lege alt. Anders hoort de klant het woord twee keer.

Zo niet<button><svg>…</svg></button>

Zo wel<button aria-label="Zoeken"><svg aria-hidden="true">…</svg></button>

Afbeeldingen in links

In een productoverzicht linken de foto en de productnaam vaak allebei naar dezelfde pagina. Een schermlezer leest dan twee links achter elkaar voor die naar hetzelfde gaan, en de eerste heeft soms geen naam. Netter is één link om foto en naam samen, met een lege alt op de foto. De productnaam is dan de linktekst.

Zo niet<a href="/regenjas-blauw"><img src="jas.jpg"></a>
<a href="/regenjas-blauw">Blauwe regenjas</a>

Zo wel<a href="/regenjas-blauw"><img src="jas.jpg" alt=""> Blauwe regenjas</a>

Staat er alleen een afbeelding in de link, zonder tekst, dan beschrijft de alt-tekst de bestemming. Een link zonder enige tekst was in ons onderzoek de tweede fout: 64,5% van de 259 homepages had er minstens één.

Veelgemaakte fouten

• De bestandsnaam als alt-tekst, zoals "IMG_4032" of "product-foto-def.jpg". Sommige platforms en plug-ins vullen die automatisch in.
• Eén los woord: "afbeelding", "foto" of "logo".
• "Afbeelding van" vooraan. Dat zegt de schermlezer al.
• Een rij zoekwoorden, zoals "jas regenjas blauwe jas waterdicht". Voor een schermlezer is dat onverstaanbaar, en Google raadt het zelf af.
• Een lap tekst. Een volledige productbeschrijving hoort in de pagina, niet in de alt.
• Het alt-attribuut weglaten bij een sierbeeld. Een lege alt is iets anders dan geen alt.
• Tekst in een afbeelding die nergens anders staat.

Alt-tekst en SEO

Google gebruikt de alt-tekst samen met beeldherkenning en de tekst op de pagina om te begrijpen wat een afbeelding laat zien. Dat staat in de richtlijnen van Google voor afbeeldingen (Engelstalig). Dezelfde richtlijnen waarschuwen tegen alt-teksten vol zoekwoorden, omdat je site daardoor als spam kan worden gezien.

Een alt-tekst die je klant helpt, helpt Google dus ook. Gebruik de naam waaronder een klant naar het product zoekt, en beschrijf wat er echt op de foto staat.

Alt-tekst invullen in Shopify, WooCommerce en Lightspeed

Shopify

1. Ga in je Shopify-beheer naar Producten en klik op het product.
2. Klik op een foto om het voorbeeldscherm te openen.
3. Kies de optie om alt-tekst toe te voegen, typ de tekst en sla op.

Shopify staat tot 512 tekens toe en raadt 125 of minder aan. Voor veel producten tegelijk kun je de alt-teksten ook via een CSV-bestand importeren. Bron: Shopify Help Center (Engelstalig).

WooCommerce

Productfoto's in WooCommerce zijn gewone WordPress-media: je kiest ze bij het product uit de mediabibliotheek. Ga naar Media, Bibliotheek en klik op de afbeelding. In het venster met de bijlagedetails vul je het veld Alternatieve tekst in. WordPress slaat het meteen op. Bronnen: WooCommerce-documentatie en WordPress-documentatie (beide Engelstalig).

Lightspeed

Lightspeed eCom (E-Series) gebruikt standaard de productnaam als alt-tekst voor alle productfoto's. Elke foto krijgt dan dezelfde tekst, en dat is precies de fout uit het blok over productfoto's. Een eigen tekst per foto stel je in bij het product zelf. De precieze menunamen verschillen per Lightspeed-versie; het Help Center beschrijft de stappen. Bron: Lightspeed Help Center (Engelstalig).

Gebruik je een van deze platforms, lees dan ook hoe je een webshop op Shopify of WooCommerce toegankelijk maakt.

Wat een scan wel en niet ziet

Onze scan vindt afbeeldingen, beeldknoppen en pictogrammen zonder alt-tekst. Daarnaast meldt hij alt-teksten die aantoonbaar niets beschrijven: een bestandsnaam of cameranaam, één los woord als "afbeelding" of "logo", of een lap van meer dan 200 tekens. Een scan die alleen de code leest, keurt zulke alt-teksten goed, want er staat iets.

Of een alt-tekst klopt, kan geen enkele scanner beoordelen. De scan leest dat er "rode jurk" staat. Of de foto ook een rode jurk toont, bekijk je zelf. Daarom staat 1.1.1 in onze WCAG 2.2 checklist als "deels". Hoe je zelf snel controleert of je afbeeldingen een beschrijving hebben, staat in test 4 van website toegankelijkheid testen.