Pulsanti con icone che hanno comunque un nome
Dare a un pulsante senza testo un'etichetta accessibile chiara
Pulsanti con icone che hanno comunque un nome è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
Il problema del pulsante silenzioso
Un pulsante che contiene solo un'icona appare chiaro visivamente, ma un lettore di schermo potrebbe pronunciare soltanto pulsante, senza indicare cosa faccia. 🔇
Ogni controllo ha bisogno di un nome
Ogni controllo interattivo deve avere un nome accessibile. Per i pulsanti testuali lo fornisce il testo; un pulsante composto solo da un'icona non ha testo da cui ricavarlo.
Aggiunga aria-label al pulsante
La soluzione più semplice: inserisca aria-label direttamente sul pulsante per indicare l'azione, anche quando al suo interno c'è solo un'icona.
<button aria-label="Close">
<svg aria-hidden="true">...</svg>
</button>Nasconda l'icona interna
Contrassegni l'icona interna con aria-hidden="true". Il nome appartiene al pulsante; una volta presente l'etichetta, l'icona è puramente decorativa.
<button aria-label="Search">
<svg aria-hidden="true" focusable="false">...</svg>
</button>Oppure usi testo visivamente nascosto
Preferisce testo reale? Aggiunga uno span con la classe visually-hidden. Gli utenti vedenti vedranno solo l'icona; i lettori di schermo sentiranno le parole.
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Add to cart</span>
</button>Come appare il CSS sr-only
Una classe visually-hidden riduce il testo a un singolo pixel senza usare display none, che lo nasconderebbe anche ai lettori di schermo.
.sr-only {
position: absolute;
width: 1px; height: 1px;
clip-path: inset(50%);
}Indichi l'azione, non l'icona
Indichi ciò che accade, non l'immagine. Usi Delete, non trash can. Gli utenti hanno bisogno del verbo, non della descrizione del glifo.
Non usi mai da solo l'attributo title
L'attributo HTML title è inaffidabile come nome: esclude completamente gli utenti di dispositivi touch e quelli che usano la tastiera. Usi invece aria-label o testo nascosto.
I pulsanti di attivazione/disattivazione hanno bisogno dello stato
Per un toggle con icona, come mute, aggiunga anche aria-pressed, così il pulsante annuncia se è attualmente attivo o disattivo.
<button aria-label="Mute" aria-pressed="false">
<svg aria-hidden="true">...</svg>
</button>Mantenga sincronizzato il nome
Se un pulsante con icona cambia significato, aggiorni anche il suo nome. Un pulsante play diventato pause deve ora annunciare Pause, non Play.
Verifichi il nome pronunciato
Nell'inspector dell'accessibilità, selezioni il pulsante e legga il suo nome calcolato. Deve corrispondere all'azione e non essere mai vuoto.
Verifica rapida
Ha un pulsante che contiene solo un SVG con una lente d'ingrandimento e nessun testo. Come può assegnargli un nome accessibile?
Riepilogo: dia un nome a ogni pulsante con icona
Assegni un nome ai pulsanti composti solo da un'icona tramite aria-label o testo visivamente nascosto, nasconda l'icona ed etichetti l'azione. Ora ogni pulsante parla. ✅
Domande Frequenti
La lezione «Pulsanti con icone che hanno comunque un nome» è gratuita?
Sì — il testo completo di «Pulsanti con icone che hanno comunque un nome» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Pulsanti con icone che hanno comunque un nome»?
Dare a un pulsante senza testo un'etichetta accessibile chiara Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Pulsanti con icone che hanno comunque un nome»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- SVG inline: role img e un title
- Nascondere le icone decorative con aria-hidden
- Pulsanti con icone che hanno comunque un nome
- Font di icone e problemi di accessibilità