Cos'è
Molti pulsanti sui siti web moderni usano solo un'icona senza testo visibile — una lente d'ingrandimento per la ricerca, un'icona hamburger per il menu, una X per chiudere un popup. Un visitatore vedente riconosce queste icone istantaneamente per familiarità e contesto, ma uno screen reader non ha nulla da leggere ad alta voce a meno che il pulsante non abbia anche un testo accessibile allegato dietro le quinte, tipicamente tramite un attributo aria-label (per esempio, aria-label="Cerca") che non viene mostrato visivamente ma viene annunciato a uno screen reader.
Senza questo, uno screen reader annuncia semplicemente la parola generica "pulsante" senza ulteriori informazioni, senza dare alcuna indicazione di cosa farebbe effettivamente premerlo.
Perché è importante
Un'icona ovvia visivamente per una persona vedente non trasmette da sola alcuna informazione a chi non può vederla — l'icona in sé non è intrinsecamente significativa senza la vista, solo il concetto che rappresenta lo è, e quel concetto deve essere comunicato in qualche altro modo per un utente di screen reader. Una pagina piena di pulsanti con solo icona, ognuno annunciato solo come "pulsante, pulsante, pulsante", lascia un utente di screen reader senza modo di sapere cosa fa ciascuno senza indovinare e premerli per scoprirlo.
Questo è un problema diffuso e facile da trascurare proprio perché i pulsanti con solo icona sono un pattern di design comune e visivamente pulito — il divario di accessibilità diventa evidente solo testando effettivamente con uno screen reader invece di limitarsi a guardare la pagina.
Come risolverlo
- Identifica ogni pulsante sul tuo sito che usa solo un'icona senza etichetta di testo visibile.
- Aggiungi un attributo
aria-labelche descriva l'azione del pulsante in poche parole, es.aria-label="Chiudi menu"oaria-label="Cerca". - Dove possibile, valuta di aggiungere una breve etichetta di testo visibile accanto all'icona invece — questo aiuta anche i visitatori vedenti e riduce la dipendenza dal ricordare i significati delle icone.
- Se usi un website builder, controlla se i pulsanti icona generati dalla piattaforma includono già etichette accessibili di default — alcuni lo fanno, altri richiedono di compilare manualmente un campo "nome accessibile" o "testo per screen reader".
- Testa con uno screen reader gratuito (NVDA, VoiceOver) navigando con tab fino a ogni pulsante icona e confermando che annunci un'azione chiara e specifica invece di solo "pulsante".