Tabeller

Hva er problemet?

Tabeller kan være vanskelige å navigere for skjermleserbrukere hvis de mangler struktur. Uten overskrifter (<th>) er det umulig å vite hva dataene i en celle representerer når man navigerer langt ned i tabellen.

Hvordan fikse det?

Bruk <th> for overskrifter

Merk cellene som fungerer som overskrifter (både for rader og kolonner) med <th>, ikke <td> med fet tekst.

Bruk scope

Attributtet scope hjelper skjermlesere å forstå retningen.

• scope="col": Overskrift for en kolonne.
• scope="row": Overskrift for en rad.

Eksempel

<table>
  <caption>Ansattes arbeidstid</caption>
  <thead>
    <tr>
      <th scope="col">Navn</th>
      <th scope="col">Mandag</th>
      <th scope="col">Tirsdag</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Ola</th>
      <td>08-16</td>
      <td>08-16</td>
    </tr>
  </tbody>
</table>

Unngå layout-tabeller

Ikke bruk tabeller til å plassere innhold på siden (f.eks. meny til venstre, innhold til høyre). Bruk CSS (Grid/Flexbox) til dette.