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 a lettori di schermo leggere il contenuto nelle pagine web. Gli screen reader interpretare il codice presente sulla pagina e leggere il suo contenuto per l'utente.

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

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

L'attributo di ambito

Anche per un semplice tavolo con

markup con portata = "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 portata = "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 portata = "riga" che definisce che le celle lo seguono nella stessa riga, contenente il “grado” informazioni riguardanti quel particolare nome dello studente.

Gruppi di righe

Ora passiamo a un altro esempio, questo esempio avrà quasi la stessa tabella di quella precedente, tranne che scambiamo intestazioni di righe e colonne, quindi potremo lavorare con i gruppi di righe.

tag che definisce chiaramente le intestazioni, puoi migliorarne l'accessibilità con scopo attributo e non lasciare il posto 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é è suo scopo ha il valore col, sarà interpretato come l'intestazione della colonna corrispondente.

Il scopo l'attributo può avere uno qualsiasi di questi quattro valori; col, riga, rowgroup, colgroup per fare riferimento all'intestazione di una colonna, all'intestazione di una riga, a un gruppo di intestazioni di colonne e a 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. Il tavolo 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  UN+  B  UN  UN  UN-  
  Miriam Luther  UN  UN  C  C+  UN  UN-

Nella tabella sopra, ogni cella di dati, che è ciascuna delle celle della tabella visualizzazione del voto, è associato a tre informazioni:

A quale studente appartiene questa classe?
A quale oggetto appartiene questo grado?
È questo grado 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  UN+  B  UN  UN  UN-  
  Miriam Luther  UN  UN  C  C+  UN  UN-

Nel markup sopra abbiamo aggiunto scopo alle celle che contengono informazioni sulla direzione 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). Solo aggiungendo 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 il campata attribuiscilo indicando quante colonne include quel gruppo di colonne.

Nome dello studente

Biologia

John Doe

Soggetto		John Doe	Miriam Luther
Biologia	Pratico	UN	UN
Biologia	Teoria	UN+	UN
Chimica	Pratico	B	C
Chimica	Teoria	UN	C+
Fisica	Pratico	UN	UN
Fisica	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 c'è rowgroup elemento.

Le righe HTML sono generalmente raggruppate utilizzando , 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 aggiungere il rispettivo ambito alle celle di intestazione.

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

Abbiamo aggiunto le righe “Pratico” e “Teoria” in ciascuna tbody creando gruppi di righe con due righe in ciascuna. Abbiamo anche aggiunto il portata = "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