Tabelle complesse senza grattacapi: celle di intestazione e righe di riepilogo nelle tabelle di dati

Una semplice tabella di dati, con una singola riga di intestazioni di colonna nella parte superiore, è relativamente semplice da rendere accessibile. Il vero problema inizia con le tabelle complesse, quelle con intestazioni sia in colonne che in righe, celle unite o righe di riepilogo. Questo articolo spiega come contrassegnare le intestazioni delle tabelle in modo che un'utilità per la lettura dello schermo "capisca" per ogni cella quali intestazioni si applicano ad essa, senza perdere il contesto.

Perché TH è diverso da TD

In una tabella HTML o in un PDF con tag, ogni cella ha uno dei due tipi di ruolo: TH (intestazione tabella) o TD (dati tabella: una cella dati normale). La differenza non è necessariamente visiva - una cella di intestazione e una cella di dati possono avere uno stile identico - è semantica: TH dice allo screen reader "questa è un'intestazione che spiega cosa significano i dati sotto o accanto ad essa". Senza una codifica corretta, un'utilità per la lettura dello schermo si sposta nella tabella riga per riga come se tutte le celle fossero uguali ed è facile perdere completamente traccia di quali dati appartengono a quale categoria.

Quando l'ambito è sufficiente e quando ne serve di più

Per la maggior parte delle tabelle, aggiungi aambitoattributo a ogni cella TH per indicare se si tratta di un'intestazione di colonna (scope="col") o un'intestazione di riga (scope="row"). Quando un'utilità per la lettura dello schermo raggiunge una cella di dati, annuncia automaticamente sia l'intestazione della colonna che l'intestazione della riga pertinenti, in modo che l'utente senta, ad esempio, "1.200 - Vendite, Q1" anziché solo un "1.200" isolato.

Per tabelle particolarmente complesse, con più di due livelli di intestazioni (ad esempio, una superintestazione che raggruppa più sottocolonne), l'ambito da solo non è sempre sufficiente. In questi casi, utilizza la coppia di attributi id e headers: assegna a ogni cella di intestazione un ID univoco e in ogni elenco di celle di dati, nell'attributo headers, tutti gli ID di intestazione ad essa rilevanti. Questo metodo è più flessibile ma anche più complesso e soggetto a errori: riservalo ai casi che ne hanno veramente bisogno.

Righe di riepilogo e intestazioni multiple

Una riga di riepilogo nella parte inferiore di una tabella ("Totale", "Media") è essa stessa una sorta di intestazione: in genere è appropriato contrassegnare la cella totale stessa come TH con scope="row", in modo che un lettore di schermo la distingua da una normale riga di dati. Allo stesso modo, una tabella con una superintestazione che raggruppa diverse colonne (ad esempio, "Vendite 2026" che si estende su "Q1", "Q2") richiede l'uso corretto delcolspanattributo insieme all'ambito, quindi il raggruppamento gerarchico viene preservato anche quando viene letto ad alta voce.

Come appare in pratica in Word e PDF

In Word, utilizzando lo strumento standard "Inserisci ▸ tabella" e selezionando "Riga di intestazione" in Progettazione tabella si crea la base corretta, che nella maggior parte dei casi viene esportata automaticamente in PDF come TH. In Acrobat, dopo aver esportato da Word ed eseguito un controllo di accessibilità, vale la pena aprire l'albero dei tag e verificare che le celle di intestazione siano state effettivamente contrassegnate come TH e non come un normale TD: questo è un errore di esportazione comune che è facile non notare.