Decoratieve afbeeldingen: wanneer een lege alt-tekst de juiste keuze is

Stel: u heeft uw mediabibliotheek netjes bijgewerkt. Bij elke afbeelding staat een beschrijving, ook bij de lichtgrijze golflijn onder elke kop en bij het blaadje naast elk opsommingsteken. Dan zit u goed, zou u denken. Niet helemaal. Wie met een screenreader door die homepage gaat, hoort nu tientallen keren “afbeelding, decoratieve golf”. Een lege alt-tekst was bij die plaatjes de betere keuze geweest. Dit artikel gaat over die ene vraag: wanneer laat u de alt leeg, en hoe doet u dat goed?

Lege alt-tekst of geen alt-tekst: niet hetzelfde

Dit is het punt waar het in de praktijk het vaakst misgaat. Er zijn drie situaties, en ze klinken bijna hetzelfde:

Code	Wat de screenreader doet	Oordeel
alt="Twee monteurs bij een cv-ketel"	Leest de beschrijving voor	Goed voor een informatieve afbeelding
alt=""	Slaat de afbeelding over	Goed voor een decoratieve afbeelding
geen alt-attribuut	Leest vaak de bestandsnaam voor, zoals “IMG_4032 punt jpg”	Altijd fout

Een leeg alt-attribuut is dus een bewuste mededeling aan hulpsoftware: deze afbeelding draagt geen informatie, sla haar over. Een ontbrekend attribuut is een gat. De software weet niet wat ze moet doen en gaat gokken. Daarom keuren testtools een ontbrekende alt altijd af, maar een lege alt niet.

In HTML ziet het verschil er zo uit:

<!-- decoratief: bewust leeg -->
<img src="golflijn.svg" alt="">

<!-- fout: attribuut ontbreekt -->
<img src="golflijn.svg">

Let op de spatie. alt=" " met een spatie ertussen is niet hetzelfde als alt="". Sommige screenreaders behandelen die spatie als tekst en melden de afbeelding alsnog. Laat het echt leeg.

Wanneer is een afbeelding decoratief?

De WCAG-richtlijnen (succescriterium 1.1.1, niet-tekstuele content) zeggen het zo: een afbeelding die puur decoratie is, alleen voor de opmaak dient of geen informatie toevoegt, moet zo worden ingebouwd dat hulpsoftware haar kan negeren. Dat is mooi geformuleerd, maar in de praktijk helpt een simpele vraag meer:

Mist een bezoeker die de afbeelding niet ziet iets?

Is het antwoord nee, dan is de afbeelding decoratief. Een paar typische voorbeelden:

• Lijnen, vormen, golfjes en patronen die als scheiding of sfeer dienen.
• Een icoon naast een tekst die hetzelfde zegt, zoals een telefoontje naast “Bel 020 123 45 67”.
• Een sfeerfoto bovenaan een blog die niets toevoegt aan de inhoud, zoals een stockfoto van een laptop met koffie.
• Een foto die al volledig in het bijschrift of de tekst ernaast wordt beschreven.
• Achtergrondafbeeldingen achter een tekstblok.

Twijfelgevallen

Een sfeerfoto is niet automatisch decoratief. De foto van uw praktijkruimte op de pagina “Over ons” vertelt iets: hoe het eruitziet, of het licht en rustig is. Dan is een korte beschrijving zinvol. Dezelfde foto als achtergrond achter een kop op de homepage is waarschijnlijk wel decoratie. Het hangt dus af van de plek en de bedoeling, niet van de afbeelding zelf.

Ook een logo is geen decoratie. Staat het logo als link naar de homepage, dan beschrijft de alt waar de link heen gaat, bijvoorbeeld “Bakkerij Van Dam, naar de homepage”. Hoe u een goede beschrijving schrijft voor afbeeldingen die wel informatie dragen, leest u in ons artikel over alt-teksten schrijven.

Linkjes en knoppen: hier is leeg zelden goed

Een afbeelding die het enige onderdeel van een link of knop is, mag nooit een lege alt hebben. Denk aan een klikbare productfoto zonder tekst eronder, of een vergrootglas als zoekknop. Haalt u de alt weg, dan hoort een screenreadergebruiker alleen “link” of “knop”, zonder te weten waarheen.

Staat er wel tekst in dezelfde link, dan kan de afbeelding weer leeg blijven, anders hoort men alles dubbel:

<a href="/schoenen/wandelschoen-terra">
  <img src="terra.jpg" alt="">
  Wandelschoen Terra
</a>

Hier zegt de linktekst al wat er te zien is. De foto beschrijven als “Wandelschoen Terra” zou betekenen dat de bezoeker twee keer hetzelfde hoort.

Zo regelt u een lege alt-tekst in WordPress

WordPress geeft een afbeelding zonder ingevuld alt-veld in de meeste gevallen een leeg alt-attribuut mee. Dat lijkt handig, maar het betekent ook dat elke vergeten beschrijving stilletjes als “decoratief” wordt behandeld. Een testtool slaat dan geen alarm, terwijl er wel informatie ontbreekt.

Werk daarom bewust:

1. Blokeditor. Klik op de afbeelding en kijk in de zijbalk bij “Alternatieve tekst”. Laat het veld alleen leeg als de afbeelding echt decoratief is. Bij informatieve beelden vult u het in. Meer over werken met blokken leest u in toegankelijke content in de blokeditor.
2. Mediabibliotheek. Een alt die u daar invult, wordt meegenomen als u de afbeelding later invoegt. Handig, maar de juiste beschrijving hangt af van de plek. Controleer hem daarom bij elk gebruik.
3. Page builders. In Elementor, Divi en vergelijkbare builders hebben afbeeldingswidgets soms een eigen alt-veld, of nemen ze de alt uit de mediabibliotheek over. Controleer in de broncode wat er werkelijk op de pagina komt.
4. Achtergrondafbeeldingen. Een afbeelding die via CSS als achtergrond is ingesteld, wordt door hulpsoftware sowieso niet voorgelezen. Voor decoratie is dat prima. Staat er informatie in, zoals tekst, dan is een achtergrond juist de verkeerde plek. Zie tekst in afbeeldingen.

Svg-iconen

Inline svg-iconen hebben geen alt-attribuut. Als ze decoratief zijn, verbergt u ze met aria-hidden="true":

<svg aria-hidden="true" focusable="false">...</svg> Bel ons

Veel thema’s doen dit al goed. Bij zelfgebouwde blokken of oudere plugins ontbreekt het nog weleens.

Zelf controleren in vijf minuten

U hoeft geen specialist te zijn om een eerste ronde te doen:

1. Open een pagina en klik met de rechtermuisknop op een afbeelding, kies “Inspecteren”. U ziet de img-code met het alt-attribuut, of zonder.
2. Installeer de gratis WAVE-extensie en draai hem op de pagina. Afbeeldingen zonder alt worden rood gemarkeerd. Afbeeldingen met een lege alt krijgen een eigen icoon, zodat u per stuk kunt beoordelen of “decoratief” klopt.
3. Loop de lijst langs met de vraag van hierboven: mist iemand iets als hij deze afbeelding niet ziet?
4. Let extra op afbeeldingen die als link werken. Die mogen niet leeg zijn als er geen andere tekst in de link staat.

Twee fouten ziet u in die ronde vaak terug: informatieve foto’s die door het lege standaardveld van WordPress als decoratie doorgaan, en decoratieve plaatjes met een overbodige beschrijving zoals “blauw vlak” of “decoratieve lijn”. Beide zijn met een paar klikken te herstellen.

Een kwestie van keuzes, niet van regels uit het hoofd

Een lege alt is geen luiheid en ook geen trucje om een testtool tevreden te stellen. Het is een redactionele beslissing: wat moet een bezoeker weten, en wat is ruis? Wie die vraag per afbeelding stelt, maakt een pagina die met een screenreader net zo prettig is als met de ogen. Hoe alt-teksten passen in het grotere geheel van een toegankelijke site, leest u op onze pagina over uw website toegankelijk maken. Wilt u weten hoe uw site in de praktijk klinkt, dan kunt u ook uw website laten testen met een screenreader.