Tabelle complesse: abbinare headers e id

Alcune tabelle comprendono celle unite o più livelli di intestazioni. Il semplice scope non può descrivere una cella governata contemporaneamente da due o tre intestazioni.

Un’intestazione che usa colspan per coprire più colonne confonde il modello semplice. Il browser non può più dedurre quali celle appartengano a quell’intestazione.

Nelle tabelle complesse, assegni a ogni th un id e colleghi ogni td alle sue intestazioni tramite id. In questo modo le celle vengono collegate esplicitamente alle intestazioni, senza deduzioni.

Una cella di dati può indicare diverse intestazioni nel proprio attributo headers, separate da spazi. Lo screen reader le annuncia tutte nell’ordine in cui le elenca.

Assegni un id all’intestazione di riga e uno a quella di colonna, quindi faccia riferimento a entrambi dalla cella. Ora il valore è completamente descritto lungo entrambi gli assi.

Per le intestazioni raggruppate, scope può essere colgroup o rowgroup. Li utilizzi quando un’intestazione copre una fascia di colonne o righe sopra le intestazioni di dettaglio.

Un’intestazione dell’anno sopra quelle dei mesi richiede la descrizione di entrambi i livelli. Con id e headers, ogni cella può fare riferimento contemporaneamente all’anno e al mese.

Ogni id nella pagina deve essere univoco. Gli id duplicati delle intestazioni interrompono silenziosamente l’associazione, quindi una rapida verifica con un validator evita problemi reali in seguito.

Elenchi gli id nell’ordine in cui desidera che vengano letti, di solito partendo dall’intestazione più generale. Lo screen reader segue esattamente il Suo ordine durante l’annuncio.

Prima di ricorrere a id e headers, si chieda se può dividere un’unica tabella enorme in tabelle semplici più piccole. Una struttura più semplice è quasi sempre più accessibile.

La tecnica con id e headers è potente, ma è facile commettere errori di battitura. Verifichi sempre che alcune celle vengano lette correttamente con un vero lettore di schermo, non solo a colpo d'occhio.

Una cella di dati è associata sia a un'intestazione di riga sia a un'intestazione di colonna estesa.

Quando le celle unite o i livelli sovrapposti rendono insufficiente scope, assegni un id alle intestazioni e vi faccia riferimento da ogni cella con headers. Mantenga gli id univoci e verifichi ascoltando.