Ontbrekende alt-tekst

Silktide vindt afbeeldingen op je pagina's die helemaal geen alternatieve tekst hebben. Alternatieve tekst is de geschreven beschrijving die hardop wordt voorgelezen in plaats van een afbeelding, zodat afbeeldingen zonder alternatieve tekst betekenisloos zijn voor mensen die ze niet kunnen zien.

<!-- Probleem: geen alt-attribuut -->
<img src="apple.png">

<!-- Opgelost: beschrijvende alt-tekst -->
<img src="apple.png" alt="Een rode appel">

<!-- Ook geldig: expliciet decoratief -->
<img src="decorative-swirl.png" alt="">

Waarom dit belangrijk is

Een heeft niets om aan te kondigen voor een afbeelding zonder - in het beste geval leest deze de bestandsnaam voor, wat zelden nuttig en vaak verwarrend is. Mensen die blind zijn of slechtziend, missen alles wat de afbeelding overbrengt. En als de afbeelding een grafiek, knop of link is, kunnen ze de pagina mogelijk helemaal niet gebruiken.

Alt-tekst wordt ook weergegeven wanneer afbeeldingen niet kunnen worden geladen en helpt zoekmachines om je afbeeldingen te begrijpen, zodat het toevoegen ervan elke bezoeker ten goede komt.

Zo los je het op

Voeg alternatieve tekst toe aan elke afbeelding in je - de meeste hebben hiervoor een veld op de plek waar je een afbeelding invoegt. Gebruik in code het alt- attribuut zoals hierboven weergegeven.
Beschrijf de informatie of het doel van de afbeelding, niet het uiterlijk ervan. Beschrijf bij een afbeelding die als link of knop fungeert waar deze naartoe gaat of wat deze doet.
Als de afbeelding puur is, geef deze dan een lege alt="", zodat schermlezers deze overslaan. Verzin geen opvultekst - het horen van "decoratieve krulgrafiek" is erger dan helemaal niets horen.

WebAIM publiceert een uitgebreide gids voor het schrijven van alternatieve tekst.

Zo test Silktide dit

Zoek elke afbeelding op elke pagina.
Sla afbeeldingen over die geen alternatieve tekst nodig hebben: afbeeldingen zonder bron, afbeeldingen van 1 pixel of kleiner (meestal trackingpixels) en afbeeldingen die verborgen zijn voor schermlezers.
Sla afbeeldingen over die als decoratief zijn gemarkeerd met een attribuut role="presentation", omdat deze bewust verborgen zijn voor .
Rapporteer elke overgebleven afbeelding die helemaal geen alt-attribuut heeft.

Een afbeelding met een lege alt="" slaagt voor deze controle, maar valt onder Decoratieve afbeeldingen, waarin je wordt gevraagd te bevestigen dat deze echt decoratief is. Alt-tekst die wel bestaat maar niet nuttig is, valt onder Zwakke alt-tekst.

Problemen oplossen

De afbeelding is decoratief, dus waarom wordt deze gemarkeerd?

Een afbeelding wordt alleen als decoratief behandeld wanneer dit in de code wordt aangegeven, via een lege alt="" of role="presentation". Een afbeelding zonder alt-attribuut is ambigu - hulptechnologie kan niet zien of deze "decoratief" of "vergeten" is - en slaagt daarom niet voor deze controle. Voeg het lege attribuut toe om de bedoeling expliciet te maken.

De afbeelding komt van een externe dienst

Afbeeldingen die worden gegenereerd door ingesloten diensten, zoals kaarten, kunnen mogelijk niet door jou worden bewerkt. Je website-instellingen kunnen inhoud van externe partijen uitsluiten van deze controle, of je kunt individuele bevindingen die je niet kunt wijzigen .