Buone pratiche

Pulsanti senza nome accessibile: il difetto n°1 degli scanner

I pulsanti icona senza nome accessibile (lente d’ingrandimento, carrello, croce, menu hamburger) sono il difetto più rilevato dalle analisi di accessibilità. Per un utente di screen reader, si sente solo «pulsante» senza contesto. Scoprite le quattro tecniche per correggerli.

Numeri, metodologia e condizioni di ripresa: vedi i dati citabili →

La risposta breve

Un pulsante con icona SVG o immagine privo di attributo aria-label, aria-labelledby o testo visibile rimane invisibile a uno screen reader. L’utente sente solo « pulsante ». Per correggere: aggiungete aria-label per una breve etichetta, utilizzate testo visibile se lo spazio lo consente, oppure aria-labelledby per collegare a un testo esistente. Verificate con F12: la scheda Accessibility deve mostrare il nome del pulsante.

Perché questo difetto è critico

I pulsanti senza nome accessibile figurano tra le violazioni WCAG più frequenti negli Stati Uniti, secondo i dati pubblici degli studi di conformità. La regola W3C dedicata («Image button has non-empty accessible name») si applica ovunque: una lente di ricerca, un carrello della spesa, una croce di chiusura, una freccia di carosello, un'icona di social network - tutti richiedono un nome udibile.

Questo articolo si basa sullo studio Inclaria 2026: tra i 55 siti di e-commerce francesi analizzati, il 94,5% presenta almeno una non conformità critica o seria. I pulsanti icona mal nominati figurano in testa alle occorrenze rilevate, spesso su più pagine dello stesso sito.

Cosa sente un utente di screen reader

Mettetevi nei panni di qualcuno che naviga senza vedere lo schermo. Quando raggiunge un pulsante lente d’ingrandimento senza nome accessibile, il suo screen reader annuncia semplicemente «Pulsante», poi si ferma. Nessun contesto, nessuna indicazione sull’azione. Deve uscire dallo screen reader, aprire l’ispettore del browser o ricorrere a una documentazione esterna per capire di cosa si tratta.

Stesso scenario con un carrello della spesa presentato come un’icona SVG sola, una croce di chiusura di una modale o delle frecce per navigare un carosello. Ogni pulsante muto crea una zona di incertezza per l’utente. Su un sito con 15 o 20 pulsanti icona mal nominati, l’attrito si accumula rapidamente: alcuni utenti abbandonano.

Le quattro tecniche per nominare un pulsante

1. Testo visibile con visibilità nascosta (sr-only)

Aggiungete un elemento span di classe sr-only contenente l'etichetta. Invisibile sullo schermo, udibile per gli screen reader.

Codice

Pulsante contenente un'icona SVG di lente d'ingrandimento e un elemento span di classe « sr-only » con il testo « Ricerca ».

Vantaggio: il testo è anche nel DOM, quindi tecnicamente visitabile da un motore di ricerca. Svantaggio: presuppone una classe CSS sr-only definita nel vostro foglio di stile.

2. aria-label

Attributo diretto sul pulsante: aria-label=« Ricerca ». Breve, facile e non influisce sul DOM visivo.

Vantaggio: minimalista, rapido da aggiungere. Svantaggio: assente dal testo visibile, quindi invisibile al copia-incolla e all'SEO testuale.

3. aria-labelledby

Collega il pulsante a un altro elemento testuale del DOM tramite un identificatore: aria-labelledby=« search-label ». Ideale quando un testo pertinente esiste già sulla pagina.

Vantaggio: fa riferimento a contenuto reale, tracciabile. Svantaggio: richiede che il testo sorgente esista e sia dotato di un id univoco.

4. Attributo alt su input type=image

Se utilizzate un input di tipo immagine con la sorgente « search.png » e il testo alternativo « Ricerca », l'attributo alt funge direttamente da nome accessibile.

Vantaggio: semantica nativa. Svantaggio: soluzione obsoleta in HTML moderno, raramente raccomandata.

Quando utilizzare ciascuna? Matrice decisionale

Insidie comuni

L'attributo title non è sufficiente

Molti sviluppatori credono erroneamente che l'attributo title=« Cerca » su un pulsante sia sufficiente a nominarlo. In realtà, title è un attributo di suggerimento al passaggio del mouse (tooltip), non un nome accessibile. Gli screen reader lo ignorano, tranne in casi molto limitati. Non fateci affidamento.

aria-label in lingua straniera

Se i vostri contenuti mescolano le lingue, attenzione: aria-label utilizza sempre la lingua della pagina. Un aria-label=« Search » su un sito francese sarà letto in francese dallo screen reader. Preferite testo visibile o assicuratevi che aria-label rispetti la lingua locale.

L'insidia 2.5.3: « Label in Name »

Un'insidia sottile: se un pulsante ha del testo visibile (es. « OK »), il suo aria-label deve iniziare con lo stesso testo o contenerlo. Un pulsante che mostra « OK » con aria-label=« Conferma » crea un'incoerenza che gli utenti di comandi vocali (« clicca su OK ») non possono attivare. Allineate il nome accessibile al testo visibile.

SVG senza role appropriato

Un SVG da solo è solo un'immagine. Inseritelo sempre in un elemento semantico (button, a) o aggiungete role=« button ». Senza questo, lo screen reader può ignorarlo o annunciarlo come un'immagine.

Come verificare in due minuti

Aprite la vostra pagina in qualsiasi browser moderno (Chrome, Firefox, Safari).

• Premete F12 (o cliccate con il tasto destro, poi Ispeziona).
• Individuate il pulsante icona nell'HTML.
• Aprite la scheda Accessibility (Chrome, Edge, Firefox).
• Consultate il campo Accessible Name: deve mostrare un testo chiaro (es. «Cerca», «Carrello»). Se è vuoto o indica «button», manca un nome.

In alternativa: navigate con la tastiera (Tab) fino al pulsante, poi testate con uno screen reader gratuito.

Test con tastiera e screen reader

Su Windows, NVDA (gratuito, open source) è affidabile. Su Mac, VoiceOver è preinstallato (Cmd+F5). Esplorate il vostro sito: ogni pulsante icona deve annunciare chiaramente il suo nome. Se sentite solo «pulsante», correggete.

Casi concreti: lente d'ingrandimento, carrello, croce, frecce

Loupe de recherche

Un pulsante con aria-label=«Cerca» contenente un'icona SVG è l'approccio standard. Breve, chiaro. Se utilizzate testo nascosto: usate un pulsante contenente l'icona SVG e un elemento span di classe «sr-only» con il testo «Cerca».

Panier d'achat

Preferite aria-label=«Carrello» o aria-label=«Vedi il carrello (2 articoli)». Un numero di articoli può arricchire il contesto senza sovraccaricare l'annuncio.

Croix de fermeture

Un pulsante con aria-label=«Chiudi» contenente un'icona SVG di croce è classico. Un testo semplice, senza gergo.

Chevrons de carrousel

Pulsanti con aria-label=«Elemento successivo» e aria-label=«Elemento precedente» guidano l'utente. Evitate i generici come «Successivo» o «Precedente» da soli; specificate: «Slide precedente del carosello».

Icônes sociales

Un link con aria-label=«Seguici su X (Twitter)» o un pulsante con aria-label=«Condividi su LinkedIn» rende esplicita la rete di destinazione.

Intégration dans votre démarche de conformité

I pulsanti senza nome accessibile sono il difetto numero uno rilevato dagli scan automatizzati. Se avviate un audit di accessibilità sul vostro sito, questa violazione apparirà quasi certamente, spesso con decine di occorrenze.

La buona notizia: è facile e veloce da correggere. Una volta compreso il pattern, potete revisionare la vostra codebase, sistemare i pulsanti icona in poche ore e misurare l'impatto: una parte significativa del vostro punteggio di accessibilità migliora immediatamente.

Una strategia efficace: avviate uno scan automatizzato (Inclaria, aXe, WAVE), ordinate i risultati per gravità e iniziate dai pulsanti senza nome accessibile. Questo da solo elimina una parte significativa delle non conformità critiche su molti siti. Successivamente, procedete con i test manuali e i difetti strutturali (navigazione da tastiera, ordine di tabulazione, contrasti).