Ogni grafico ha bisogno di un'alternativa testuale
Riassumere l'informazione chiave a parole, non in pixel
Ogni grafico ha bisogno di un'alternativa testuale è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Un grafico è solo formato da pixel
Per uno screen reader, spesso un grafico è un'immagine priva di informazioni. L'insight si trova nell'immagine, quindi gli utenti ciechi non ricevono nulla se non lo si esplicita in forma testuale.
Descriva il punto, non l'aspetto grafico
Nessuno ha bisogno di ascoltare prima la descrizione delle griglie e degli assi. Inizi dal messaggio principale: che cosa comunica davvero questo grafico al lettore?
Testo alternativo per un grafico img
Se il grafico è un'immagine, il suo attributo alt dovrebbe esprimere la conclusione, non limitarsi a dire grafico. 📊
<img src="sales.png" alt="Sales rose 40% from Q1 to Q4, peaking in December.">Testo alternativo breve, descrizione lunga
Un alt breve fornisce il messaggio principale. Quando i dati sono ricchi, lo abbini a una descrizione più lunga nelle vicinanze per raccontare l'intera storia.
I grafici SVG incorporati hanno bisogno di un nome
I grafici SVG non sono immagini per impostazione predefinita. Aggiunga role="img" e un nome, così le tecnologie assistive trattano l'intera grafica come un'unica unità con etichetta.
<svg role="img" aria-label="Revenue doubled over five years."> ... </svg>title all'interno di SVG
Un elemento title come primo figlio di un SVG gli assegna anch'esso un nome. Lo referenzi con aria-labelledby per ottenere un supporto affidabile tra i diversi screen reader.
<svg role="img" aria-labelledby="t1"><title id="t1">Visitors per month</title></svg>Indichi la tendenza
La maggior parte dei grafici serve a mostrare una tendenza o un confronto. La descriva con parole semplici: in crescita, in calo, stabile oppure una barra che sovrasta tutte le altre.
Dare un nome agli estremi
Indicate per nome e valore i punti massimo e minimo. Questa singola frase spesso comunica all’ascoltatore l’intero significato del grafico.
Fornire numeri reali
Parole vaghe come «molto» non aiutano nessuno. Includete le cifre effettive, così l’ascoltatore può ragionare sui dati proprio come farebbe chi legge il grafico visivamente.
Una didascalia visibile aiuta tutti
Inserite subito sotto il grafico un breve riepilogo testuale come didascalia visibile. Anche gli utenti vedenti lo leggono rapidamente, quindi non è mai uno sforzo sprecato. ✨
<figure><svg>...</svg><figcaption>Sales climbed steadily all year.</figcaption></figure>Evitare gli sparklines decorativi
Un piccolo spark decorativo accanto a un numero non aggiunge alcun significato. Nascondetelo con aria-hidden, così non appesantisce l’esperienza di ascolto.
<span aria-hidden="true"><svg>...spark...</svg></span> 1,204 usersVerifica rapida
Da cosa dovrebbe iniziare l’alternativa testuale di un grafico?
Riepilogo: parole, non pixel
Avete imparato che ogni grafico ha bisogno di un’alternativa testuale che esprima l’insight, indichi gli estremi con numeri reali e nasconda gli elementi grafici puramente decorativi. 🎯
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 «Ogni grafico ha bisogno di un'alternativa testuale» è gratuita?
Sì — il testo completo di «Ogni grafico ha bisogno di un'alternativa testuale» è 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 «Ogni grafico ha bisogno di un'alternativa testuale»?
Riassumere l'informazione chiave a parole, non in pixel 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 1 di 4.
Quanto tempo richiede la lezione «Ogni grafico ha bisogno di un'alternativa testuale»?
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
- Ogni grafico ha bisogno di un'alternativa testuale
- L'alternativa della tabella dati
- Colore, motivo ed etichette dirette
- Grafici interattivi navigabili con la tastiera