td headers

Per agevolare le tecnologie assistive, è necessario impostare un'intestazione di tabella per ogni colonna.

Accessibility

Uso corretto dell'attributo headers in una tabella

Alcuni utenti utilizzano tecnologie assistive e screen reader per poter navigare correttamente in una pagina web. 

Quando queste tecnologie scansionano la pagina e trovano una tabella, informano l'utente sulle intestazioni di ogni cella, quindi è importante che le intestazioni e i dati corrispondano.

Pertanto, è necessario impostare un'intestazione di tabella per ogni colonna.

Come funziona l'audit di SeoChecker

Quando l'audit di SeoChecker rileva più di un'intestazione di tabella per colonna, lo segnala.

Come posso risolvere le celle di dati che fanno riferimento a intestazioni inesistenti?

Guardate la tabella seguente:

<table>
  <caption><strong>My marathon training log</strong></caption>
  <thead>
    <tr>
      <th>Week</th>
      <th>Total miles</th>
      <th>Longest run</th>
      <th>Long run pace</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th headers="Week">1</th>
      <td>14</td>
      <td>5</td>
      <td>12.30</td>
    </tr>

    <tr>
      <th>1</th>
      <td>16</td>
      <td>6</td>
      <td>12.15</td>
    </tr>

  </tbody>

</table>

Come si può vedere, c'è una colonna con intestazioni multiple della tabella.

È necessario rimediare, quindi eliminare headers="Week" e utilizzare invece l'attributo scope per la colonna di intestazione e le righe della tabella: questo attributo è in grado di comunicare sia con il browser sia con le tecnologie assistive, specificando che i componenti della colonna sono legati all'intestazione in alto; inoltre, gli elementi a destra dell'intestazione della riga sono legati ad essa.

Inoltre, è necessario aggiungere il <td> alla prima riga del corpo per allineare i dati con le intestazioni.

<table>
  <caption>My marathon training log</caption>
  <thead>
    <tr>
      <th scope="col">Week</th>
      <th scope="col">Total miles</th>
      <th scope="col">Longest run</th>
      <th scope="col">Long run pace</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>14</td>
      <td>5</td>
      <td>12.30</td>
    </tr>

    <tr>
      <th scope="row">1</th>
      <td>16</td>
      <td>6</td>
      <td>12.15</td>
    </tr>

  </tbody>

</table>