Intestazioni delle tabelle

Silktide controlla che le tabelle che presentano dati definiscano le celle di intestazione. Le intestazioni indicano alle persone che usano il significato di ogni riga e colonna, che le persone vedenti deducono dalla disposizione della tabella.

Considera una tabella di cognomi e città. Senza una riga di intestazione, un valore come "Washington" potrebbe indicare l'uno o l'altro: il significato diventa chiaro solo quando le colonne sono etichettate.

<!-- Problema: le intestazioni sono celle ordinarie, quindi non hanno alcun significato -->
<table>
  <tr>
    <td>Cognome</td>
    <td>Città</td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>Londra</td>
  </tr>
</table>

Perché è importante

Un si sposta in una tabella una cella alla volta. Quando le intestazioni sono definite, può annunciare l'intestazione pertinente insieme a ogni valore, così "Londra" viene letto come "Città: Londra". Senza intestazioni, chi ascolta sente una semplice sequenza di valori e deve memorizzare la disposizione della tabella per attribuire loro un significato; per le tabelle più grandi è praticamente impossibile.

Rendere in grassetto la riga superiore o assegnarle un colore diverso non è sufficiente. La formattazione visiva non trasmette alcun significato alle tecnologie assistive; conta solo il codice sottostante.

Come risolvere il problema

Cambia ogni cella di intestazione da <td> a <th> e aggiungi un attributo scope che specifichi se l'intestazione si riferisce a una colonna o a una riga:

<!-- Corretto: le intestazioni sono vere celle di intestazione -->
<table>
  <tr>
    <th scope="col">Cognome</th>
    <th scope="col">Città</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>Londra</td>
  </tr>
</table>

Se la tabella non presenta dati ed è usata solo per disporre visivamente la pagina, aggiungi role="presentation" all'elemento <table> affinché le tecnologie assistive ne ignorino la struttura. Meglio ancora, sostituisci le tabelle usate per la disposizione con CSS: sono fortemente sconsigliate nel web design moderno.

Come Silktide esegue il controllo

Individua ogni tabella in ciascuna pagina.
Ignora le tabelle contrassegnate come puramente presentazionali con role="presentation".
Ignora le tabelle con una sola riga o una sola colonna, che difficilmente sono tabelle di dati.
Segnala ogni tabella rimanente che non contiene alcuna cella di intestazione <th>.

Risoluzione dei problemi

La mia tabella ha intestazioni, ma sono celle `<td>` formattate

Le celle che hanno solo l'aspetto di intestazioni non vengono conteggiate. Le tecnologie assistive non possono vedere i caratteri o i colori; converti le celle in <th>.

Viene segnalata la mia tabella usata per la disposizione

Silktide ignora solo le tabelle usate per la disposizione che dichiarano role="presentation". Se una tabella è realmente presentazionale, aggiungi quell'attributo oppure sostituiscila con una disposizione basata su CSS.