Criterio WCAG 4.1.2 · Livello A CRITICO
Pulsanti senza nome accessibile
Un pulsante fatto solo di icona, senza testo, per la tecnologia assistiva è un pulsante "muto": chi non vede l'icona non può sapere cosa fa.
Cos'è
Ogni controllo interattivo deve esporre un nome accessibile: un'etichetta che la tecnologia assistiva possa annunciare. Con i pulsanti testuali questo accade da solo. Il problema nasce con i pulsanti fatti di sola icona — il carrello, la lente, l'hamburger del menu — dove non c'è testo da leggere.
Chi ne è penalizzato
Quando questo requisito non è rispettato, una parte reale dei tuoi visitatori non riesce a usare il sito:
- Chi usa uno screen reader sente solo "pulsante", senza sapere se apre il carrello, la ricerca o il menu.
- Chi usa comandi vocali non può attivarlo, perché non ha un nome da pronunciare.
- Chiunque, quando l'icona è ambigua e manca qualsiasi etichetta di supporto.
- Criterio
- WCAG 2.1 — 4.1.2 Nome, ruolo, valore
- Livello
- A
- Norma UE
- EN 301 549 §9.4.1.2
- Italia
- D.Lgs. 82/2022 (recepimento EAA)
Come appare l'errore
Questo pulsante contiene solo un'icona SVG. Non ha testo né etichetta: il suo nome accessibile è vuoto.
<button>
<svg><!-- icona carrello --></svg>
</button>Come si corregge
Dagli un nome. Il modo più semplice è aria-label; in alternativa, un testo visibile o un testo nascosto solo visivamente ma leggibile dagli screen reader.
<button aria-label="Apri il carrello">
<svg aria-hidden="true"><!-- icona carrello --></svg>
</button>Nota l'aria-hidden="true" sull'icona: evita che venga letta due volte. Il nome sta sul pulsante, l'icona è solo decorazione visiva.
Vuoi sapere se il tuo sito ha questo problema?
Scansiona il tuo sito gratis →Domande frequenti
Meglio aria-label o testo visibile?
Quando puoi, un testo visibile accanto all'icona è la soluzione migliore: aiuta tutti, non solo chi usa la tecnologia assistiva. Usa aria-label quando il design richiede la sola icona.
Vale anche per i link con sola icona?
Il principio è lo stesso, ma per i link il criterio di riferimento è il 2.4.4. Un link a freccia "→" senza testo ha lo stesso problema di un pulsante muto.
Il title basta come etichetta?
Non affidarti al solo attributo title: il supporto da parte delle tecnologie assistive è incostante e su mobile non compare. Usa aria-label o un testo dedicato.