Testo alternativo del pulsante immagine
Silktide trova nei tuoi moduli pulsanti immagine privi di . Un pulsante immagine senza testo alternativo non permette alle persone che non possono vederlo di sapere che cosa succederà quando lo premeranno.
<!-- Problema: attributo alt assente -->
<input type="image" src="button.png">
<!-- Problema: alt vuoto -->
<input type="image" src="button.png" alt="">
<!-- Risolto: il testo alt descrive l'azione -->
<input type="image" src="button.png" alt="Invia messaggio">
Perché è importante
Un pulsante immagine (<input type="image">) usa un'immagine al posto di un'etichetta di testo,
quindi il suo attributo alt è l'unico nome che uno
può pronunciare. Senza di esso, il
pulsante viene annunciato semplicemente come "pulsante" o con il nome del file. Un modulo il cui
pulsante di invio non può essere identificato è un modulo che alcuni visitatori non possono
completare con sicurezza: una barriera diretta per richieste di informazioni, iscrizioni e acquisti.
A differenza delle immagini ordinarie, un pulsante non può mai essere decorativo: fa sempre qualcosa, quindi ha sempre bisogno di un nome.
Come risolvere il problema
- Aggiungi un attributo
altche descriva l'azione eseguita dal pulsante, ad esempio "Cerca" o "Invia messaggio", come nell'esempio precedente. - Non lasciare l'attributo vuoto: un
alt=""vuoto nasconde il nome del pulsante senza nascondere il pulsante. - In alternativa, sostituisci il pulsante immagine con un elemento
<button>contenente testo reale, che è più semplice da personalizzare e accessibile per impostazione predefinita.
Come Silktide esegue il controllo
- Trova ogni pulsante immagine (
<input type="image">) in ogni pagina. - Ignora i pulsanti nascosti agli screen reader.
- Segnala ogni pulsante il cui attributo
altè assente o vuoto.
I pulsanti il cui testo alt esiste ma sembra poco utile sono coperti dal controllo separato Testo alternativo del pulsante di invio.