Font di icone e problemi di accessibilità
Scoprire perché i font glifi vengono spesso letti come caratteri incomprensibili
Font di icone e problemi di accessibilità è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Che cos'è un icon font
Un icon font associa caratteri a glifi, così una lettera viene visualizzata come un cuore o una freccia. È pratico per il ridimensionamento, ma problematico per i lettori di schermo.
Il problema del carattere incomprensibile
Molti icon font nascondono i glifi nella private use area di Unicode. Se il font non è disponibile, un lettore di schermo potrebbe leggere un riquadro casuale o una lettera insolita.
I font possono non caricarsi
Se il file del font viene bloccato o non si carica, viene mostrato il glifo di fallback invece dell'icona. A quel punto gli utenti vedono un carattere fuori posto dove dovrebbe esserci un'icona chiara.
Il contenuto CSS non è testo reale
Gli icon font spesso inseriscono glifi tramite pseudo-elementi CSS. Questo contenuto generato è fragile e può essere interpretato erroneamente dalle tecnologie assistive.
i.icon-star::before {
content: "\e801";
}Nasconda i glifi decorativi delle icone
Se un glifo di un icon font è decorativo, lo racchiuda e aggiunga aria-hidden="true", così il carattere privo di significato non raggiunge mai l'albero dell'accessibilità.
<span class="icon-star" aria-hidden="true"></span>I glifi significativi hanno bisogno di testo
Quando il glifo trasmette un significato, affianchi all'icona nascosta del vero testo visivamente nascosto, così il significato sopravvive anche se il font non viene caricato.
<span class="icon-warn" aria-hidden="true"></span>
<span class="sr-only">Warning</span>I fogli di stile dell'utente li compromettono
Alcuni utenti sostituiscono i font per la dislessia o per problemi di vista. Il loro font sostituisce il Suo e ogni glifo dell'icon font diventa una semplice lettera.
Gli strumenti di traduzione li alterano
La traduzione del browser può sostituire i caratteri dei glifi con altro testo, deformando le icone perché tecnicamente sono lettere, non immagini.
Perché SVG è una scelta vincente
L'SVG inline evita tutti questi problemi: è una vera immagine, resiste alla sostituzione dei font e alla traduzione e supporta correttamente role ed etichette.
Abbandoni gli icon font
Il consiglio moderno è abbandonare gli icon font a favore di SVG inline o sprite SVG. Otterrà un rendering nitido e molti meno problemi di accessibilità.
Esegua il test con il font disabilitato
Blocchi il font negli strumenti per sviluppatori e ricarichi la pagina. Se vede caratteri fuori posto invece delle icone, deve migliorare i fallback e le etichette.
Verifica rapida
Ha ereditato una pagina che usa un icon font per una valutazione significativa a stelle. Qual è la correzione di accessibilità più sicura?
Riepilogo: usi gli icon font con cautela
I glifi degli icon font sono testo fragile: nasconda quelli decorativi con aria-hidden, supporti quelli significativi con testo reale e preferisca SVG. 🎯
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Font di icone e problemi di accessibilità» è gratuita?
Sì — il testo completo di «Font di icone e problemi di accessibilità» è 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 «Font di icone e problemi di accessibilità»?
Scoprire perché i font glifi vengono spesso letti come caratteri incomprensibili 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 4 di 4.
Quanto tempo richiede la lezione «Font di icone e problemi di accessibilità»?
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à