L'alternativa della tabella dati
Offrire i numeri sottostanti in una tabella accessibile
L'alternativa della tabella dati è 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.
Quando le parole non bastano
Un riepilogo di una riga racconta la storia, ma alcuni utenti vogliono conoscere i numeri. Una tabella di dati fornisce i valori grezzi alla base del grafico.
La tabella è la fonte di verità
Pensate al grafico come alla visualizzazione di una tabella. Fornite la stessa tabella con markup reale e ogni tecnologia assistiva potrà leggerla perfettamente.
Usare un elemento table reale
Gli screen reader comprendono a fondo l’elemento nativo table: righe, colonne e intestazioni vengono annunciate correttamente senza ARIA aggiuntivo.
<table>
<tr><th>Month</th><th>Sales</th></tr>
<tr><td>Jan</td><td>120</td></tr>
</table>Dare una caption alla tabella
Una caption assegna un nome alla tabella, così l’ascoltatore sa quali dati contiene. Viene letta non appena il focus raggiunge la tabella.
<table><caption>Monthly sales in 2024</caption> ... </table>Celle di intestazione con th e scope
Contrassegnate le etichette come th con uno scope, così ogni valore viene annunciato insieme alla relativa colonna e riga. In una tabella, questo contesto è fondamentale.
<th scope="col">Sales</th>
<th scope="row">January</th>Posizionarla accanto al grafico
Posizionate la tabella alternativa accanto al grafico, non in una pagina separata. Gli utenti devono poter raggiungere i dati senza doverli cercare.
Nasconderla visivamente, se necessario
Se la tabella appesantisce il design, nascondetela visivamente ma conservatela per gli screen reader usando una classe visually-hidden, mai display none.
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; }Non usare display none per i dati
Attenzione: display: none rimuove completamente il contenuto dall’albero dell’accessibilità. Se viene nascosta in questo modo, la tabella alternativa non aiuta nessuno.
Anche un toggle details è efficace
Racchiudete la tabella in un elemento details, così gli utenti vedenti possono espandere i numeri quando ne hanno bisogno, mantenendo al contempo la piena accessibilità.
<details><summary>View data table</summary>
<table>...</table>
</details>Mantenere sincronizzate tabella e grafico
Se il grafico si aggiorna, deve aggiornarsi anche la tabella. Numeri obsoleti sotto un grafico aggiornato possono trarre silenziosamente in inganno le persone che fanno affidamento su di essi.
Un’unica fonte, due visualizzazioni
Idealmente, sia il grafico sia la tabella dovrebbero essere generati dagli stessi dati. In questo modo restano coerenti e non dovete gestire due versioni della verità. 🔗
Verifica rapida
Come dovreste nascondere una tabella di dati che volete comunque rendere leggibile agli screen reader?
Riepilogo: i numeri dietro l’immagine
Avete imparato a supportare ogni grafico con una tabella reale: dotata di caption, con scope nelle intestazioni, mantenuta sincronizzata e nascosta in modo sicuro quando necessario, mai con display none. 📋
Domande Frequenti
La lezione «L'alternativa della tabella dati» è gratuita?
Sì — il testo completo di «L'alternativa della tabella dati» è 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 «L'alternativa della tabella dati»?
Offrire i numeri sottostanti in una tabella accessibile 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 «L'alternativa della tabella dati»?
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