Le tabelle HTML presentano dati tabulari (righe e colonne di dati correlati) — non layout. Una tabella accessibile usa la struttura corretta in modo che i lettori di schermo possano annunciare le intestazioni con ogni cella.
Q2 Sales by Region
Region
Revenue
North
$12,000
South
$9,500
Total$21,500
<th> con scope — contrassegna le celle di intestazione. scope="col" per le intestazioni di colonna, scope="row" per le intestazioni di riga. I lettori di schermo annunciano quindi "North, Revenue: $12,000" invece di leggere le celle senza contesto.<caption> — un titolo per l'intera tabella, il primo figlio di <table>; viene letto per orientare gli utenti.<thead>/<tbody>/<tfoot> — raggruppano le righe di intestazione, corpo e riepilogo; facilitano la navigazione e consentono all'intestazione di ripetersi durante la stampa.<!-- ❌ this was 1990s practice — use CSS grid/flexbox instead -->
<table><tr><td>sidebar</td><td>content</td></tr></table>
Le tabelle di layout confondono i lettori di schermo (annunciano la semantica delle tabelle di dati) e sono infllessibili. Usa CSS Grid/Flexbox per il layout della pagina.
La semantica corretta delle tabelle (<th scope>, <caption>, suddivisione) è ciò che rende le tabelle di dati utilizzabili per gli utenti di lettori di schermo — legano ogni valore alle intestazioni di riga e colonna.
Riserva <table> rigorosamente ai dati tabulari genuini.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona