Alternativtekst for bildeknapp
Silktide finner bildeknapper i skjemaene dine som ikke har . En bildeknapp uten et tekstalternativ gir personer som ikke kan se den, ingen mulighet til å vite hva det vil gjøre å trykke på den.
<!-- Problem: mangler alt-attributt -->
<input type="image" src="button.png">
<!-- Problem: tom alt -->
<input type="image" src="button.png" alt="">
<!-- Rettet: alternativteksten beskriver handlingen -->
<input type="image" src="button.png" alt="Send melding">
Hvorfor dette er viktig
En bildeknapp (<input type="image">) bruker et bilde i stedet for en tekstetikett, så alt-attributtet er det eneste navnet en kan lese opp. Uten det blir knappen lest opp bare som «knapp» eller med filnavnet. Et skjema der sendeknappen ikke kan identifiseres, er et skjema som enkelte besøkende ikke kan fylle ut med sikkerhet – en direkte hindring for henvendelser, registreringer og kjøp.
I motsetning til vanlige bilder kan en knapp aldri være dekorativ: den gjør alltid noe, og trenger derfor alltid et navn.
Slik løser du det
- Legg til et
alt-attributt som beskriver handlingen knappen utfører, for eksempel «Søk» eller «Send melding», som i eksempelet ovenfor. - Ikke la attributtet være tomt – en tom
alt=""skjuler knappens navn uten å skjule selve knappen. - Du kan også erstatte bildeknappen med et
<button>-element som inneholder faktisk tekst. Det er enklere å utforme og er tilgjengelig som standard.
Slik tester Silktide dette
- Finn alle bildeknapper (
<input type="image">) på hver side. - Hopp over knapper som er skjult for skjermlesere.
- Rapporter hver knapp som mangler
alt-attributt, eller der attributtet er tomt.
Knapper der alternativteksten finnes, men virker lite nyttig, dekkes av den separate kontrollen Alternativtekst for sendeknapp.