Testi alt, etichette e pulsanti: piccoli errori, grandi barriere
Molti problemi sono piccoli nel codice ma importanti per l’utente. Un’immagine senza alternativa, un campo checkout senza etichetta o un pulsante a icona senza nome può nascondere informazioni o funzioni agli screen reader.
Il testo alt deve avere uno scopo
Deve comunicare funzione o significato dell’immagine nel contesto. Le immagini decorative usano generalmente alt vuoto; le immagini prodotto possono comunicare informazioni importanti.
L’automazione rileva l’assenza di alt, ma non sempre può giudicare la qualità del testo.
- Descrivere il significato rilevante.
- Usare alt="" per decorazioni reali.
- Evitare nomi file o testi generici.
Etichette e nomi accessibili
Campi e pulsanti solo icona necessitano di un nome determinabile programmaticamente.
Preferisci label visibili. ARIA aiuta quando l’HTML nativo non basta, ma non deve mascherare interfacce poco chiare.
- Associare label e input.
- Dare un nome chiaro ai pulsanti icona.
- Verificare riferimenti ARIA a ID esistenti.
FAQ
Qualsiasi testo alt va bene?
No. Deve essere adatto alla funzione e al contesto dell’immagine.
aria-label deve sostituire le label visibili?
Di solito no. Le label visibili sono robuste e aiutano più utenti.
Fonti ufficiali: European Accessibility Act e W3C WCAG
W3C WCAG 2.2
Informazioni generali, non consulenza legale né dichiarazione formale di conformità WCAG. I controlli automatici non coprono tutti i criteri.
Mappa prima i rischi tecnici di accessibilità
Il Quick Scan gratuito controlla fino a 5 pagine rappresentative. Il Risk Report a pagamento analizza in background fino a 1.000 pagine pubbliche e viene inviato automaticamente via e-mail al termine.