Alternativtext för bildknapp
Silktide hittar bildknappar i dina formulär som saknar . En bildknapp utan textalternativ ger personer som inte kan se den inget sätt att veta vad som händer när de trycker på den.
<!-- Problem: inget alt-attribut -->
<input type="image" src="button.png">
<!-- Problem: tomt alt-attribut -->
<input type="image" src="button.png" alt="">
<!-- Åtgärdat: alt-texten beskriver åtgärden -->
<input type="image" src="button.png" alt="Skicka meddelande">
Varför detta är viktigt
En bildknapp (<input type="image">) använder en bild i stället för en textetikett,
så dess alt-attribut är det enda namn som en
kan läsa upp. Utan det läses
knappen upp enbart som ”knapp” eller med sitt filnamn. Ett formulär vars
skicka-knapp inte kan identifieras är ett formulär som vissa besökare inte
kan fylla i med tillförsikt – ett direkt hinder för förfrågningar, registreringar
och köp.
Till skillnad från vanliga bilder kan en knapp aldrig vara dekorativ: den gör alltid något och behöver därför alltid ett namn.
Så här åtgärdar du problemet
- Lägg till ett
alt-attribut som beskriver den åtgärd knappen utför, till exempel ”Sök” eller ”Skicka meddelande”, som i exemplet ovan. - Lämna inte attributet tomt – ett tomt
alt=""döljer knappens namn utan att dölja själva knappen. - Du kan också ersätta bildknappen med ett
<button>-element som innehåller riktig text. Det är enklare att formge och är tillgängligt som standard.
Så här testar Silktide detta
- Hitta varje bildknapp (
<input type="image">) på varje sida. - Hoppa över knappar som är dolda för skärmläsare.
- Rapportera varje knapp vars
alt-attribut saknas eller är tomt.
Knappar vars alt-text finns men verkar föga hjälpsam omfattas av den separata kontrollen Alternativtext för skicka-knapp.