alt vuoto e immagine decorativa nascosta
Usi alt vuoto affinché gli screen reader la ignorino.
alt vuoto e immagine decorativa nascosta è 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 trucco dell'alt vuoto
Per le immagini decorative, la scelta corretta è un alt vuoto: scriva alt uguale a due virgolette senza nulla al loro interno.
<img src="flourish.png" alt="">Cosa fa un alt vuoto
Un alt vuoto contrassegna l'immagine come decorativa, così gli screen reader la ignorano completamente e non la annunciano.
Vuoto non significa mancante
Un alt vuoto e un alt mancante sono completamente diversi. Vuoto significa «ignorami intenzionalmente»; mancante significa che l'autore lo ha dimenticato.
Cosa provoca un alt mancante
Se non c'è alcun alt, molti screen reader leggono ad alta voce il nome del file, ad esempio IMG underscore 4823 dot jpg.
Includere sempre l'attributo
La regola è semplice: ogni img ha bisogno di un attributo alt. L'unica domanda è se debba essere vuoto o contenere testo.
Spaziatori e separatori
Gli spaziatori visivi, le linee e i separatori non hanno significato, quindi sono casi perfetti per un alt vuoto.
<img src="line.png" alt="">Evitare gli spazi all'interno
Non inserisca uno spazio tra le virgolette. Un alt realmente vuoto non contiene nulla, nemmeno un singolo carattere spazio.
Meglio ancora, usi CSS
Se un'immagine è davvero decorativa, spesso la soluzione più pulita è un'immagine di background CSS, che l'albero dell'accessibilità ignora completamente.
Nascondere con aria-hidden
Può anche nascondere un elemento grafico decorativo impostando aria-hidden su true, una soluzione comune per le icone SVG inline accanto a testo visibile.
<svg aria-hidden="true"><use href="#star"></use></svg>Non nascondere contenuto reale
Faccia attenzione: non inserisca mai un alt vuoto o aria-hidden in un'immagine informativa, altrimenti la eliminerà silenziosamente per alcuni utenti.
Quando la decorazione è un link
Se un'immagine decorativa si trova dentro un link, il link ha comunque bisogno di testo accessibile da qualche parte, altrimenti rimane senza nome.
Verifica rapida
Individui la differenza importante.
Riepilogo
Ben fatto! Un alt vuoto nasconde intenzionalmente le decorazioni, un alt mancante è un bug e aria-hidden o gli sfondi CSS mantengono silenziosi gli elementi ornamentali.
Domande Frequenti
La lezione «alt vuoto e immagine decorativa nascosta» è gratuita?
Sì — il testo completo di «alt vuoto e immagine decorativa nascosta» è 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 «alt vuoto e immagine decorativa nascosta»?
Usi alt vuoto affinché gli screen reader la ignorino. 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 «alt vuoto e immagine decorativa nascosta»?
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
- Informativa o decorativa: la prima decisione
- Scrivere un alt che comunichi lo scopo, non i pixel
- alt vuoto e immagine decorativa nascosta
- Immagini complesse: grafici, mappe e descrizioni lunghe