Corso di HTML / Tabelle accessibili: caption, scope e celle unite

Una tabella di dati leggibile identifica il suo argomento e indica quali intestazioni di riga e colonna si applicano a ciascun valore. Utilizzate caption e th, aggiungete scope se è utile, e unite le celle solo quando le relazioni risultanti rimangono comprensibili.

Dare un titolo alla tabella con caption

caption descrive l'intera tabella e deve essere il primo elemento figlio di table. Si differenzia da un'intestazione di paragrafo adiacente perché fa parte della tabella. Se è necessario un periodo di tempo o un metodo di misurazione per interpretare i dati, indicatelo nel titolo della tabella o nel testo adiacente. Il titolo introduce l'intera tabella; i singoli nomi di righe e colonne rimangono nelle celle di intestazione.

Collegare i dati alle intestazioni tramite scope

Usate scope="col" per le intestazioni delle colonne e scope="row" per le intestazioni delle righe. In questo esempio, il valore corrispondente a lunedì mattina è di tre visitatori.

<table>
  <caption>Visitatori per giorno e fascia oraria</caption>
  <thead>
    <tr>
      <th scope="col">Giorno</th>
      <th scope="col">Mattina</th>
      <th scope="col">Pomeriggio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Lunedì</th>
      <td>3 visitatori</td>
      <td>5 visitatori</td>
    </tr>
    <tr>
      <th scope="row">Martedì</th>
      <td>4 visitatori</td>
      <td>6 visitatori</td>
    </tr>
  </tbody>
</table>

scope indica se una cella di intestazione si riferisce a una colonna, a una riga o a un gruppo; non è una regola di stile visivo. In una tabella semplice la relazione può essere ovvia senza di esso, ma un'indicazione esplicita facilita la verifica dell'intento. Il tutorial W3C WAI sulle tabelle spiega ulteriori modelli.

Unire le celle solo se i dati lo richiedono

colspan="2" copre due colonne; rowspan="2" copre due righe. L'esempio seguente raggruppa mattina e pomeriggio sotto un'intestazione comune. colgroup definisce queste due colonne in modo che scope="colgroup" abbia un chiaro obiettivo. Per le righe e le celle sottostanti, consultate Fondamenti delle tabelle: table, tr, th e td.

<table>
  <colgroup><col></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <th scope="col" rowspan="2">Giorno</th>
    <th scope="colgroup" colspan="2">Visitatori</th>
  </tr>
  <tr>
    <th scope="col">Mattina</th>
    <th scope="col">Pomeriggio</th>
  </tr>
  <tr>
    <th scope="row">Lunedì</th>
    <td>3 visitatori</td>
    <td>5 visitatori</td>
  </tr>
</table>

Il risultato include un gruppo di colonne per il giorno e un gruppo di due colonne per mattina/pomeriggio. La prima colonna è anch'essa in un colgroup esplicito, così la sua struttura è leggibile senza dover fare affidamento sulle regole di omissione dei tag.

Non aggiungete semplicemente celle unite per decorare una tabella semplice. Se i lettori devono indovinare a quale intestazione appartiene un numero, semplificate la tabella o suddividetela in tabelle più piccole. La guida W3C-WAI su le intestazioni di tabelle non regolari fornisce esempi più complessi.

Verificare le relazioni

Scegliete un valore della tabella e chiedetevi: «Quale giorno e quale fascia oraria viene indicata?» Verificate la risposta senza fare affidamento esclusivamente su colore o posizione. Controllate gli schermi stretti per eventuali contenuti tagliati e provate anche un lettore di schermo per tabelle complesse con celle unite. Le tabelle dovrebbero rappresentare dati e non essere utilizzate per layout o moduli di input. Combinate la verifica delle tabelle con i principi del test manuale in Fondamenti di accessibilità: intestazioni, collegamenti, immagini e tastiera.