Tabelle

Una tabella base può essere scritta con un markup semplice come questo

<table>
    <tr>
        <td>Name</td>
        <td>Age</td>
        <td>Gender</td>
    </tr>
    <tr>
        <td>Gabriel</td>
        <td>13</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Elva</td>
        <td>8</td>
        <td>Female</td>
    </tr>
    <tr>
        <td>Freida</td>
        <td>5</td>
        <td>Female</td>
    </tr>
</table>

Il problema è che lo screen reader NON è in grado di associare e/o raggruppare righe e colonne.

Per farlo ha bisogno che vengano specificati i titoli delle colonne e se ne neccsariod elle righe.

Come?

Ecco un buon esempio:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>UK punk bands</title>
    <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <table>
      <caption>A summary of the UK's most famous punk bands</caption>
      <thead>
        <tr>
          <th scope="col">Band</th>
          <th scope="col">Year formed</th>
          <th scope="col">No. of Albums</th>
          <th scope="col">Most famous song</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Buzzcocks</th>
          <td>1976</td>
          <td>9</td>
          <td>Ever fallen in love (with someone you shouldn't've)</td>
        </tr>
        <tr>
          <th scope="row">The Clash</th>
          <td>1976</td>
          <td>6</td>
          <td>London Calling</td>
        </tr>
        <tr>
          <th scope="row">The Damned</th>
          <td>1976</td>
          <td>10</td>
          <td>Smash it up</td>
        </tr>
        <tr>
          <th scope="row">Sex Pistols</th>
          <td>1975</td>
          <td>1</td>
          <td>Anarchy in the UK</td>
        </tr>
        <tr>
          <th scope="row">Sham 69</th>
          <td>1976</td>
          <td>13</td>
          <td>If The Kids Are United</td>
        </tr>
        <tr>
          <th scope="row">Siouxsie and the Banshees</th>
          <td>1976</td>
          <td>11</td>
          <td>Hong Kong Garden</td>
        </tr>
        <tr>
          <th scope="row">Stiff Little Fingers</th>
          <td>1977</td>
          <td>10</td>
          <td>Suspect Device</td>
        </tr>
        <tr>
          <th scope="row">The Stranglers</th>
          <td>1974</td>
          <td>17</td>
          <td>No More Heroes</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th scope="row" colspan="2">Total albums</th>
          <td colspan="2">77</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Punti chiave dell’accessibilità su questa tabella:

Gli headers sono definiti con l’elemento th
caption e l’attibuto <table> summary fanno più o meno la tessa cosa, aiutano a dare contesto, tuttavia è preferito l’uso di caption

Per maggiori dettagli su Tabelle complesse, ecco un articolo con esempi: https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced