Dubbele alternatieve tekst

Silktide vindt gekoppelde afbeeldingen waarvan de alternatieve tekst de tekst er direct naast herhaalt. Wanneer een afbeelding en de tekst ernaast hetzelfde zeggen, horen mensen die een schermlezer gebruiken dezelfde woorden twee keer.

<!-- Probleem: aangekondigd als "Apple Apple" -->
<a href="/apple">
    <img src="apple.png" alt="Apple">
    Apple
</a>

<!-- Opgelost: lege alt-tekst, alleen de tekst benoemt de link -->
<a href="/apple">
    <img src="apple.png" alt="">
    Apple
</a>

Waarom dit belangrijk is

vervangt een afbeelding voor mensen die deze niet kunnen zien. Wanneer dezelfde woorden al naast de afbeelding staan, voegt de alternatieve tekst niets toe — een kondigt "Apple Apple" aan. Dat klinkt onjuist en maakt het luisteren zonder enig voordeel langzamer. Als dit zich herhaalt op een pagina met productkaarten of nieuwsberichten, wordt de herhaling echt vermoeiend.

Een afbeelding waarvan de betekenis volledig wordt overgebracht door aangrenzende tekst is in feite en moet als zodanig worden gemarkeerd.

Hoe je dit oplost

Geef de afbeelding een lege alt="", zodat deze overslaat en alleen de aangrenzende tekst voorleest, zoals in het bovenstaande voorbeeld.
Je kunt de afbeelding ook verbergen met aria-hidden="true" — handig wanneer je erop staat het alt-attribuut in te vullen.
Als de afbeelding en de tekst twee afzonderlijke links naar dezelfde bestemming zijn, voeg je ze eerst samen tot één link — zie Aangrenzende links.

Hoe Silktide dit test

Zoek elke afbeelding die zich binnen een link bevindt.
Lees de ondersteunende tekst van de afbeelding: het alt-attribuut of een aria-label.
Vergelijk deze met de zichtbare tekst van de elementen direct vóór en na de afbeelding.
Rapporteer de afbeelding wanneer de twee exact overeenkomen, waarbij hoofdletters en kleine letters worden genegeerd.

Problemen oplossen

De overeenkomende tekst maakt geen deel uit van de link

Bij de vergelijking wordt gekeken naar de directe buren van de afbeelding. Dit kan ook tekst net buiten de link omvatten. De duplicatie is nog steeds reëel voor een gebruiker van een schermlezer die door de pagina navigeert, dus dezelfde oplossingen zijn van toepassing.

De teksten verschillen een beetje

Alleen exacte overeenkomsten (waarbij hoofdletters en kleine letters worden genegeerd) worden gerapporteerd. Bijna-duplicaten zoals "Apple" naast alt="Apple logo" slagen voor deze controle, maar ga na of de alternatieve tekst voor een luisteraar nog wel iets toevoegt.