Alternatieve tekst van afbeeldingsknop
Silktide vindt afbeeldingsknoppen in je formulieren zonder . Een afbeeldingsknop zonder tekstalternatief geeft mensen die de knop niet kunnen zien geen manier om te weten wat indrukken ervan doet.
<!-- Probleem: geen alt-attribuut -->
<input type="image" src="button.png">
<!-- Probleem: lege alt -->
<input type="image" src="button.png" alt="">
<!-- Opgelost: de alt-tekst benoemt de actie -->
<input type="image" src="button.png" alt="Bericht verzenden">
Waarom dit belangrijk is
Een afbeeldingsknop (<input type="image">) gebruikt een afbeelding in plaats van een tekstlabel,
waardoor het alt-attribuut de enige naam is die een
kan uitspreken. Zonder dit attribuut wordt de
knop alleen aangekondigd als "knop" of met de bestandsnaam. Een formulier waarvan de
verzendknop niet kan worden geïdentificeerd, is een formulier dat sommige bezoekers niet vol vertrouwen kunnen invullen —
een directe belemmering voor vragen, inschrijvingen en aankopen.
In tegenstelling tot gewone afbeeldingen kan een knop nooit decoratief zijn: hij doet altijd iets en heeft daarom altijd een naam nodig.
Hoe je dit oplost
- Voeg een
alt-attribuut toe waarin je de actie benoemt die de knop uitvoert, zoals "Zoeken" of "Bericht verzenden", zoals in het bovenstaande voorbeeld. - Laat het attribuut niet leeg — een lege
alt=""verbergt de naam van de knop, maar niet de knop zelf. - Je kunt de afbeeldingsknop ook vervangen door een
<button>-element met echte tekst. Dat is eenvoudiger op te maken en standaard toegankelijk.
Hoe Silktide dit controleert
- Vind elke afbeeldingsknop (
<input type="image">) op elke pagina. - Sla knoppen over die verborgen zijn voor schermlezers.
- Rapporteer elke knop waarvan het
alt-attribuut ontbreekt of leeg is.
Knoppen waarvan de alt-tekst wel bestaat maar niet nuttig lijkt, worden behandeld door de afzonderlijke Alt-tekst van verzendknop-controle.