Zwakke alt-tekst

Afbeeldingen moeten geschreven beschrijvingen hebben die duidelijk maken wat ze tonen. Silktide rapporteert afbeeldingen waarvan de beschrijving wel bestaat, maar vermoedelijk geen echte waarde heeft, zoals een bestandsnaam of het woord "afbeelding".

Alt-tekst is bedoeld als vervanging voor de afbeelding. Tekst zoals een bestandsnaam, een URL of een algemeen woord beschrijft niets:

<!-- Zwak: een bestandsnaam zegt de luisteraar niets -->
<img src="chart.png" alt="chart-final-v2.png">

<!-- Beschrijvend: maakt duidelijk wat de afbeelding toont -->
<img src="chart.png" alt="Staafdiagram waarop te zien is dat de verkoop tussen 2024 en 2026 verdubbelt">

Waarom dit belangrijk is

Mensen die schermlezers gebruiken, horen de alt-tekst in plaats van de afbeelding. "IMG underscore 4 3 2 7 punt J P G" hardop voorgelezen is erger dan stilte: het onderbreekt de inhoud zonder iets duidelijk te maken. Zwakke alt-tekst betekent meestal dat een CMS het veld automatisch met de bestandsnaam heeft ingevuld. Daardoor slaagt de afbeelding voor een oppervlakkige test op "alt-tekst aanwezig", terwijl deze nog steeds niet voldoet voor de persoon voor wie de tekst bedoeld was.

Zoekmachines lezen alt-tekst ook om afbeeldingen te begrijpen. Zwakke tekst verspilt dus een kans om je afbeeldingen vindbaar te maken in zoekopdrachten.

Zo los je het op

1. Herschrijf de alt-tekst om te beschrijven wat de afbeelding toont of waarvoor deze dient, in een natuurlijke zin of zinsnede. Stel je voor dat je de pagina telefonisch aan iemand beschrijft.
2. Beschrijf bij afbeeldingen die links of knoppen zijn de bestemming of actie ("Zoeken", "Je winkelwagen bekijken") in plaats van de afbeelding.
3. Gebruik voor puur decoratieve afbeeldingen een lege alt="", zodat schermlezers ze volledig overslaan.
4. Los ook de oorzaak van het probleem op: veel CMS'en vullen alt-tekst automatisch in met bestandsnamen wanneer afbeeldingen worden geüpload. Voer echte beschrijvingen in je mediabibliotheek in.
5. Als gemarkeerde alt-tekst daadwerkelijk passend is, keur je de bevinding goed.

Hoe Silktide dit controleert

1. Zoek op de pagina naar elke afbeelding met niet-lege alt-tekst. Afbeeldingen met ontbrekende of lege alt-tekst worden door afzonderlijke controles gerapporteerd, zoals Ontbrekende alt-tekst.
2. Sla afbeeldingen over die geen beschrijving nodig hebben: afbeeldingen die voor schermlezers verborgen zijn, trackingpixels en andere afbeeldingen van 1 pixel, en afbeeldingen zonder bron.
3. Markeer alt-tekst die oninformatief lijkt:
   • De tekst lijkt op een bestandsnaam (zoals photo.jpg).
   • De tekst is een URL.
   • De tekst lijkt niet uit voor mensen leesbare woorden te bestaan (zoals img_4327_final-2).
   • De tekst is een bekend algemeen woord of een bekende algemene zin, zoals "afbeelding", "foto", "logo" of "klik hier".
   • De tekst bevat helemaal geen letters of cijfers.

Problemen oplossen

Mijn productcode of merk wordt gemarkeerd

Alt-tekst die uit één codeachtig token bestaat, kan er voor deze controle automatisch gegenereerd uitzien. Als de tekst echt de juiste beschrijving is (bijvoorbeeld een product-SKU die je klanten kennen), keur je de bevinding goed — of beter nog, breid je de tekst uit tot een zin: "Productfoto van de ZX-200-boormachine".

Afbeeldingen uit ingesloten kaarten worden gemarkeerd

Kaarttegels van ingesloten kaartdiensten worden door de provider gegenereerd en je kunt hun alt-tekst niet bewerken. Silktide kan externe afbeeldingen zoals deze uitsluiten van controles. Als je ziet dat ze worden gemarkeerd, keur je ze goed of vraag je ons naar het uitsluiten van problemen met externe inhoud voor je website.

Meer informatie

• Een beslisboom voor alt-tekst (W3C Web Accessibility Initiative)
• Niet-tekstuele inhoud (inzicht in WCAG 2.1)
• Ontbrekende alt-tekst