Nascondere le icone decorative con aria-hidden
Tenere gli elementi ornamentali fuori dall'albero dell'accessibilità
Nascondere le icone decorative con aria-hidden è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Alcune icone non comunicano nulla
Un piccolo ornamento accanto a un'etichetta non aggiunge nulla per chi usa un lettore di schermo. Annunciarlo aggiunge soltanto rumore che l'utente deve attraversare. 🔇
La parola decorativo
Un'icona è decorativa quando rimuoverla non cambierebbe ciò che l'utente comprende. Il testo vicino contiene già il significato.
La nasconda dall'albero
Imposti aria-hidden="true" su un'icona decorativa per rimuoverla dall'albero dell'accessibilità, così i lettori di schermo la ignorano completamente.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>Nasconde anche i figli
Un solo aria-hidden="true" su un contenitore nasconde l'elemento e tutto ciò che contiene; pertanto lo imposti sul contenitore, non su ogni path.
alt vuoto ottiene lo stesso risultato per img
Se l'icona decorativa è un <img>, le assegni invece un alt vuoto. Un alt vuoto indica ai lettori di schermo di ignorare l'immagine.
<img src="sparkle.png" alt="" />Non nasconda mai contenuti visibili
La regola d'oro: non inserisca aria-hidden su qualcosa da cui dipende un utente vedente. Cancellerebbe contenuti reali per alcune persone.
Non nasconda mai elementi che ricevono il focus
Applicare aria-hidden a un elemento che riceve il focus crea un fantasma: gli utenti da tastiera raggiungono un controllo che i lettori di schermo rifiutano di annunciare.
Lo abbini a focusable false
Per gli SVG inline decorativi, aggiunga focusable="false" insieme ad aria-hidden, così nessun browser li inserisce di nascosto nell'ordine di tabulazione.
<svg aria-hidden="true" focusable="false">
<path d="..." />
</svg>Le icone ridondanti sono decorative
Un'icona a forma di cestino accanto alla parola Delete è ridondante. Nasconda l'icona e lasci che il testo visibile comunichi il significato a tutti.
Faccia attenzione all'icona isolata
Attenzione: un'icona senza testo vicino di solito non è decorativa. Nasconderla renderebbe il controllo silenzioso e privo di nome.
Confermi che sia scomparsa
Nell'inspector dell'accessibilità, un'icona correttamente nascosta semplicemente scompare dall'albero. È esattamente ciò che deve accadere.
Verifica rapida
Un'icona a forma di segno di spunta si trova accanto alla parola visibile Complete. Che cosa dovrebbe fare con l'icona?
Riepilogo: nasconda il rumore
Alle icone decorative assegni aria-hidden="true" (o un alt vuoto) e focusable false; non lo faccia mai per contenuti che ricevono il focus o che sono unici. Meno rumore, pagine più chiare. 🎯
Domande Frequenti
La lezione «Nascondere le icone decorative con aria-hidden» è gratuita?
Sì — il testo completo di «Nascondere le icone decorative con aria-hidden» è 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 «Nascondere le icone decorative con aria-hidden»?
Tenere gli elementi ornamentali fuori dall'albero dell'accessibilità 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 2 di 4.
Quanto tempo richiede la lezione «Nascondere le icone decorative con aria-hidden»?
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à