Come migliorare l'accessibilità della tabella HTML con il markup

L'accessibilità al Web si riferisce alla progettazione di applicazioni Web in modo che possano essere utilizzate con facilità da persone con disabilità visive. Alcuni di questi utenti si affidano agli screen reader per leggere il contenuto delle pagine web. Gli screen reader interpretano il codice presente sulla pagina e ne leggono il contenuto all'utente .

è un elemento HTML ampiamente utilizzato per visualizzare i dati in modo strutturato nelle pagine web. Il suo design va da semplici a complessi, completi di intestazioni di riga, intestazioni fuse, ecc.

Se una tabella non è progettata pensando all'accessibilità, sarà difficile per gli screen reader tradurre in modo significativo i dati in tabelle complesse per gli utenti. Quindi, per rendere le tabelle HTML complesse più facilmente comprensibili, per l'accessibilità, dobbiamo garantire che le intestazioni, i gruppi di colonne, i gruppi di righe, ecc. Siano chiaramente definiti . Vedremo di seguito come questo viene raggiunto nel markup .

L'attributo di ambito

Anche per un semplice tavolo con

markup con scope="col" aiuta la tecnologia assistiva a identificare che le celle che seguono nella stessa colonna sono nomi di studenti.

Allo stesso modo, cellule come

contenente scope="colgroup" aiuta gli utenti a identificare che i dati nelle celle che seguono nel gruppo di colonne su cui si estende sono associati a quel particolare argomento.

Poi c'è il

markup con scope="row" che definisce che le celle lo seguono nella stessa riga, contenente le informazioni di "grade" relative a quel particolare nome di studente.

Gruppi di righe

Ora passiamo ad un altro esempio, questo esempio avrà quasi la stessa tabella di quello sopra, tranne che scambiamo intestazioni di righe e colonne, quindi potremo lavorare con gruppi di righe.

tag che definisce chiaramente le intestazioni, puoi migliorarne l'accessibilità con l'attributo scope e non lasciare spazio a qualsiasi confusione che possa derivare da tipi di dati simili nelle celle. Nome dipendente Codice dei dipendenti Codice del progetto Designazione dei dipendenti John Doe 32456 456789 Direttore Miriam Luther 78902 456789 Vicedirettore Cosa fa l'attributo scope? Secondo W3C: In altre parole, ci aiuta ad associare le celle di dati con le corrispondenti celle di intestazione. Si prega di notare che nell'esempio sopra è possibile cambiare	per	. Finché il suo scope ha il valore col, sarà interpretato come l'intestazione della colonna corrispondente. L'attributo scope può avere uno qualsiasi di questi quattro valori; col, row, rowgroup, colgroup per riferirsi all'intestazione di una colonna, l'intestazione di una riga, un gruppo di intestazione di colonne e un intestazione di gruppo di righe rispettivamente. Tabelle complesse Ora passiamo a una tabella più complessa. Sopra è una tabella che elenca gli studenti in una classe e i loro voti in pratica e teoria per tre materie. Ecco il codice HTML per questo. La tabella ha usato rowspan e colspan per creare intestazioni unite per le celle di dati. Nome dello studente Biologia Chimica Fisica pratico Teoria pratico Teoria pratico Teoria John Doe UN A + B UN UN UN- Miriam Luther UN UN C C + UN UN- Nella tabella sopra, ogni cella di dati, ovvero ciascuna cella della tabella che mostra il voto, è associata a tre informazioni: A quale studente appartiene questa classe? A quale soggetto appartiene questo grado? Questo voto è per la sezione Pratica o Teoria? Queste tre informazioni sono definite in tre diversi tipi di celle di intestazione strutturalmente e visivamente: Nome dello studente Nome soggetto Pratica o teoria Definiamo lo stesso per l'accessibilità. Nome dello studente Biologia Chimica Fisica pratico Teoria pratico Teoria pratico Teoria John Doe UN A + B UN UN UN- Miriam Luther UN UN C C + UN UN- Nel markup precedente abbiamo aggiunto l' scope alle celle che contengono informazioni sull'intestazione delle celle di dati. Gruppo di colonne Le celle di biologia, chimica e fisica devono essere associate a un gruppo di due colonne ciascuna (teoria e pratica). L'aggiunta di colspan="2" non crea i gruppi di colonne, indica solo che la cella specifica deve occupare lo spazio di due celle. Per creare un gruppo di colonne è necessario utilizzare colgroup e quindi aggiungere l'attributo span ad esso indicando il numero di colonne incluse nel gruppo di colonne. Il	Student Name	Biology		John Doe

Soggetto		John Doe	Miriam Luther
Biologia	pratico	UN	UN
	Teoria	A +	UN
Chimica	pratico	B	C
	Teoria	UN	C +
Fisica	pratico	UN	UN
	Teoria	UN-	UN-

Ora che abbiamo il nostro esempio su cui lavorare iniziamo creando gruppi di righe come abbiamo fatto per i gruppi di colonne nell'esempio precedente.

Tuttavia, non è possibile creare gruppi di righe usando un tag come colgroup perché non esiste alcun elemento rowgroup .

Le righe HTML sono generalmente raggruppate usando , e elementi. Un singolo HTML

l'elemento può averne uno , uno e multiplo . Useremo più tbody nella nostra tabella per creare i gruppi di righe e aggiungeremo il rispettivo scope alle celle di intestazione.

Soggetto		John Doe	Miriam Luther
Biologia	pratico	UN	UN
	Teoria	A +	UN
Chimica	pratico	B	C
	Teoria	UN	C +
Fisica	pratico	UN	UN
	Teoria	UN-	UN-

Abbiamo aggiunto le righe "Pratica" e "Teoria" in ogni tbody creando gruppi di righe con due righe in ciascuna. Abbiamo anche aggiunto scope="rowgroup" alle celle contenenti le informazioni di intestazione su queste due righe (che è il nome soggetto in cui i gradi appartengono in questo caso).

Ora Leggi: Altezza colonna uguale con CSS