Alternatieve tekst voor afbeelding in link
Silktide vindt links die een afbeelding bevatten, maar geen leesbare tekst van welke aard dan ook. Zo'n link heeft geen naam, waardoor mensen die de afbeelding niet kunnen zien niet kunnen weten waar de link naartoe leidt.
<!-- Probleem: de link heeft geen toegankelijke naam -->
<a href="/apple">
<img src="apple.png">
</a>
<!-- Opgelost: de alternatieve tekst beschrijft de link -->
<a href="/apple">
<img src="apple.png" alt="Een rode appel">
</a>
Waarom dit belangrijk is
Wanneer de enige inhoud van een link een afbeelding is, wordt de van de afbeelding de naam van de link. Zonder deze tekst kondigt een iets als "link" aan, of valt deze terug op het voorlezen van de bestemmings-URL of de bestandsnaam van de afbeelding. Geen van deze opties vertelt de luisteraar waar de link naartoe leidt. Navigatie die is opgebouwd uit afbeeldingslinks, zoals logo's en pictogrammenu's, wordt giswerk.
Ook gebruikers van toetsenborden en spraakbediening worden getroffen: een link zonder naam is moeilijk met spraakopdrachten te selecteren en betekenisloos in een lijst met links.
Zo los je dit op
- Voeg alternatieve tekst toe aan de afbeelding die het doel van de link beschrijft — waar de link naartoe gaat of wat deze doet — in plaats van hoe de afbeelding eruitziet. Voor een logo met een link zijn "Home" of de naam van je organisatie beter dan "logo".
- Voeg eventueel zichtbare tekst naast de afbeelding toe binnen de link; de afbeelding kan dan een lege
alt=""hebben. - Pas sjablonen in je aan als dezelfde niet-gelabelde pictogramlink op meerdere pagina's terugkomt.
Hoe Silktide dit controleert
- Zoek elke afbeelding die zich binnen een link bevindt en sla links over die voor schermlezers verborgen zijn.
- Lees alle tekst die de link beschikbaar stelt aan , inclusief de alternatieve tekst van alles wat zich in de link bevindt.
- Rapporteer de afbeelding wanneer deze gecombineerde tekst geen letters of cijfers bevat, waardoor de link geen bruikbare naam heeft.
In tegenstelling tot andere controles voor alternatieve tekst is een lege alt="" hier niet voldoende: als de afbeelding de enige inhoud van de link is, blijft de link naamloos wanneer je de afbeelding als decoratief markeert.
Problemen oplossen
De afbeelding is decoratief
Binnen een link zonder andere tekst kan een afbeelding niet als puur worden behandeld — iets moet de link een naam geven. Geef de afbeelding alternatieve tekst die de bestemming beschrijft, of voeg zichtbare tekst toe aan de link.
De link heeft op een andere manier een label
Deze controle leest tekst en alternatieve tekst binnen de link. Als je link op een andere manier een naam krijgt en je hebt gecontroleerd dat deze correct wordt aangekondigd door een schermlezer, kun je de bevinding .