th, scope e l'elemento caption
Dare alla tabella un titolo e celle di intestazione corrette
th, scope e l'elemento caption è 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.
Le tabelle di dati trasmettono significato
Una vera tabella di dati mostra le relazioni tra righe e colonne. Se la struttura è corretta, gli screen reader possono annunciare a quale intestazione appartiene ogni valore.
Una tabella semplice crea confusione
Se ogni cella è solo un td, uno screen reader legge i numeri senza contesto. L’utente sente i valori, ma non capisce mai che cosa significhino.
<table>
<tr><td>Name</td><td>Score</td></tr>
<tr><td>Ada</td><td>92</td></tr>
</table>Le celle di intestazione usano th
Sostituisca td con th nelle celle di intestazione. Ora il browser sa che quelle celle descrivono i dati, invece di contenerli, e le espone come intestazioni.
<tr><th>Name</th><th>Score</th></tr>Perché th cambia tutto
Un elemento th viene annunciato come intestazione e può essere associato alle celle che descrive. È questo collegamento a dare significato ai numeri isolati.
L’attributo scope
Aggiunga scope a ogni th per indicare quali celle copre. Il valore è col per un’intestazione di colonna oppure row per un’intestazione di riga.
<th scope="col">Score</th>scope=col per le intestazioni superiori
Utilizzi scope=col sull’intestazione in cima a una colonna. Ogni cella sottostante eredita quell’etichetta mentre l’utente si sposta verso il basso.
<th scope="col">City</th>scope=row per le intestazioni laterali
Utilizzi scope=row sulla prima cella di una riga quando questa dà il nome alla riga, ad esempio una persona o una data lungo il bordo sinistro.
<th scope="row">Ada</th>caption dà un nome alla tabella
L’elemento caption assegna un titolo all’intera tabella. Gli utenti di screen reader lo sentono per primo e capiscono che cosa stanno per esplorare.
<table>
<caption>Quiz scores by student</caption>
</table>caption deve essere il primo elemento
Inserisca caption come primo figlio all’interno della tabella, subito dopo il tag di apertura. Qualsiasi altra posizione non è valida e potrebbe essere ignorata.
caption è meglio di un’intestazione
Un h2 nelle vicinanze non è sufficiente. caption è associato programmaticamente alla tabella, quindi gli utenti scoprono il titolo anche quando passano da una tabella all’altra.
Una tabella semplice completa
caption, una riga di intestazioni con th e scope, quindi le righe di dati. Questa base rende pienamente accessibili la maggior parte delle tabelle semplici, senza alcun ARIA.
<table>
<caption>Scores</caption>
<tr><th scope="col">Name</th><th scope="col">Score</th></tr>
<tr><th scope="row">Ada</th><td>92</td></tr>
</table>Controllo rapido
Sta definendo l’intestazione di colonna in cima a una tabella.
Riepilogo: i tre elementi fondamentali
Ha imparato i tre elementi delle tabelle accessibili: th per le intestazioni, scope per indirizzarle e caption per dare un nome alla tabella. Gran parte del lavoro è già fatta.
Domande Frequenti
La lezione «th, scope e l'elemento caption» è gratuita?
Sì — il testo completo di «th, scope e l'elemento caption» è 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 «th, scope e l'elemento caption»?
Dare alla tabella un titolo e celle di intestazione corrette 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 «th, scope e l'elemento caption»?
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
- th, scope e l'elemento caption
- Intestazioni di righe e colonne nel modo giusto
- Tabelle complesse: abbinare headers e id
- Le tabelle di layout sono un problema