Testo alternativo delle immagini: quando e come
Scrivere un testo alternativo che trasmetta il significato delle immagini non decorative
Testo alternativo delle immagini: quando e come è una lezione HTML 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 HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Che cos'è il testo alt?
L'attributo alt fornisce un testo alternativo per le immagini:
- Viene letto dagli screen reader al posto dell'immagine
- Viene visualizzato quando l'immagine non può essere caricata
- Viene indicizzato dai motori di ricerca
- È obbligatorio per la conformità a WCAG
La regola d'oro
Il testo alt deve trasmettere le stesse informazioni o la stessa funzione che l'immagine comunicherebbe a un utente vedente:
<!-- The test: if you removed this image,
would the alt text give you the same information? -->
<!-- BAD: not descriptive -->
<img src="chart.png" alt="Chart">
<!-- GOOD: conveys the information -->
<img src="chart.png" alt="Bar chart showing 48% revenue increase from Q1 to Q4 2024">Immagini informative
Per le immagini che trasmettono informazioni, descriva il contenuto:
<img
src="signup-flow.png"
alt="Five-step signup flow: Email → Profile → Plan → Payment → Confirmation"
>
<!-- Describe what the image shows, not what it is -->
<!-- BAD: 'Image of a graph' -->
<!-- GOOD: 'Line graph showing download growth from 10k to 150k per month' -->Immagini decorative: alt vuoto
Le immagini puramente decorative devono avere un alt vuoto, così da essere ignorate:
<!-- Decorative separator -->
<img src="divider.png" alt="">
<!-- Icon beside text that already describes it -->
<img src="warning-icon.svg" alt=""> <span>Payment failed</span>
<!-- The icon duplicates the adjacent text — empty alt is correct -->
<!-- Never omit alt entirely — missing alt attribute is an error
Empty alt="" = intentionally decorative
Missing alt = unknown, screen readers may read the filename -->Immagini funzionali
Per le immagini che svolgono una funzione, descriva la funzione, non l'aspetto:
<!-- Logo that links to home -->
<a href="/">
<img src="logo.svg" alt="CoddyKit — Go to homepage">
</a>
<!-- Describes the destination, not the logo's appearance -->
<!-- Submit button using an image -->
<input type="image" src="submit.png" alt="Submit registration form">
<!-- Describes what happens when activated -->Immagini complesse: figure e descrizioni estese
Grafici o diagrammi complessi potrebbero richiedere più di un breve testo alt:
<figure>
<img
src="complex-diagram.png"
alt="Network architecture diagram — see the description below"
aria-describedby="diagram-desc"
>
<figcaption id="diagram-desc">
<p>The diagram shows three tiers: a client layer with browsers and mobile apps,
a middle tier with load balancers and app servers,
and a data tier with primary and replica databases.</p>
</figcaption>
</figure>Immagini contenenti testo
Eviti le immagini contenenti testo; se deve utilizzarle, l'alt deve corrispondere esattamente al testo:
<!-- Logo with text 'CoddyKit' -->
<img src="text-logo.png" alt="CoddyKit">
<!-- Promotional banner with text 'Save 50% this week only' -->
<img src="promo.jpg" alt="Save 50% this week only">
<!-- Better: use real HTML text styled with CSS
Images of text fail at zoom and high contrast modes -->Il contesto modifica l'alt
La stessa immagine potrebbe richiedere testi alt diversi in contesti diversi:
<!-- As part of an article about dogs: -->
<img src="golden.jpg" alt="Golden retriever fetching a yellow tennis ball">
<!-- As a product photo for 'Golden Retriever Dog Toy':
<img src="golden.jpg" alt="Golden retriever playing with our premium fetch toy">
<!-- As a decorative header image:
<img src="golden.jpg" alt=""> -->Lunghezza del testo alt
Linee guida per la lunghezza del testo alt:
- Lo mantenga conciso — non è necessario iniziare con 'Immagine di' o 'Foto di'
- Punti a meno di 125 caratteri (alcuni screen reader troncano il testo a 125 caratteri)
- Per le immagini complesse, utilizzi un breve alt + aria-describedby per una descrizione estesa
- Non riempia il testo di parole chiave — scriva per le persone
Testare il testo alt
Come testare il testo alt:
- Disabiliti le immagini nel browser (Firefox: Tools → Page Style → No Style)
- Utilizzi lo strumento WAVE per visualizzare tutto il testo alt contemporaneamente
- Ascolti con VoiceOver/NVDA ciò che viene annunciato
- Esegua Lighthouse: Accessibility → Image elements have [alt] attributes
SVG e nomi accessibili
Per gli SVG inline, fornisca i nomi accessibili in modo diverso:
<!-- Standalone SVG with title: -->
<svg role="img" aria-labelledby="icon-title">
<title id="icon-title">Settings</title>
<!-- SVG paths -->
</svg>
<!-- Decorative SVG: -->
<svg aria-hidden="true">
<!-- paths -->
</svg>Verifica rapida
Quale valore alt deve avere un'immagine puramente decorativa?
Riepilogo: testo alt
Elementi essenziali del testo alt:
- Includa sempre l'attributo alt; utilizzi alt="" per le immagini decorative
- Descriva le informazioni, non l'aspetto
- Immagini funzionali: descriva l'azione o la destinazione
- Immagini complesse: breve alt + aria-describedby per la descrizione completa
- Immagini contenenti testo: l'alt deve corrispondere esattamente al testo
Domande Frequenti
La lezione «Testo alternativo delle immagini: quando e come» è gratuita?
Sì — il testo completo di «Testo alternativo delle immagini: quando e come» è 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 HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Testo alternativo delle immagini: quando e come»?
Scrivere un testo alternativo che trasmetta il significato delle immagini non decorative Eserciti HTML 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 HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML 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 «Testo alternativo delle immagini: quando e come»?
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 HTML Academy?
Sì. Ogni lezione HTML 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
- Perché l’accessibilità è importante: livelli WCAG
- Gerarchia delle intestazioni per gli screen reader
- Testo alternativo delle immagini: quando e come
- Navigazione da tastiera e ordine del focus