Tabeller

Tabeller er et kraftig verktøy for å presentere data som har en logisk sammenheng mellom rader og kolonner – for eksempel prislister, arbeidstider, statistikk eller sammenligninger. Men tabeller kan også være en av de mest utilgjengelige delene av en nettside hvis de ikke er kodet riktig. For brukere som navigerer med skjermleser er en tabell uten overskrifter omtrent like nyttig som et regneark der alle celler ser identiske ut.

Når skal du bruke tabeller?

Tabeller skal kun brukes til tabelldata – altså informasjon som naturlig hører hjemme i rader og kolonner. Typiske eksempler er:

• Prislister med ulike planer og funksjoner
• Timeplaner og arbeidstider
• Sammenligning av produkter eller tjenester
• Statistikk og måleresultater

Tabeller skal ikke brukes til layout. For ti–femten år siden var det vanlig å bruke tabeller for å plassere innhold på siden (meny til venstre, innhold i midten, sidebalk til høyre). Denne praksisen er utdatert og skaper store tilgjengelighetsproblemer. Bruk CSS Grid eller Flexbox til layout i stedet.

Grunnleggende tabellstruktur

En tilgjengelig tabell har flere viktige komponenter:

<caption> – tabellens tittel

Elementet <caption> gir tabellen en synlig tittel som beskriver hva den inneholder. Skjermlesere leser opp denne tittelen når brukeren navigerer til tabellen, slik at de vet hva de kan forvente.

<table>
  <caption>Priser for UU-Kontroll sine planer</caption>
  <!-- resten av tabellen -->
</table>

<thead>, <tbody> og <tfoot>

Disse elementene deler tabellen inn i logiske seksjoner. <thead> inneholder overskriftsraden, <tbody> inneholder dataradene, og <tfoot> inneholder eventuell oppsummering.

<th> – overskriftsceller

Cellene som fungerer som overskrifter skal merkes med <th>, ikke <td> med fet tekst. Dette er den viktigste enkelttingen du kan gjøre for tabellens tilgjengelighet. Uten <th> har skjermleseren ingen mulighet til å fortelle brukeren hvilken kolonne eller rad en datacelle tilhører.

scope-attributtet

Attributtet scope forteller skjermleseren om en overskrift gjelder for en kolonne (scope="col") eller en rad (scope="row"). Dette er spesielt viktig i tabeller med både kolonne- og radoverskrifter.

Komplett eksempel

Her er en tabell som følger alle beste praksiser:

<table>
  <caption>Sammenligning av våre abonnementer</caption>
  <thead>
    <tr>
      <th scope="col">Funksjon</th>
      <th scope="col">Gratis</th>
      <th scope="col">Basis</th>
      <th scope="col">Pro</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Antall sider</th>
      <td>5</td>
      <td>50</td>
      <td>Ubegrenset</td>
    </tr>
    <tr>
      <th scope="row">Skanning per måned</th>
      <td>1</td>
      <td>4</td>
      <td>Daglig</td>
    </tr>
    <tr>
      <th scope="row">E-postvarsler</th>
      <td>Nei</td>
      <td>Ja</td>
      <td>Ja</td>
    </tr>
  </tbody>
</table>

Med denne strukturen kan en skjermleserbruker navigere til en celle og høre for eksempel: «Skanning per måned, Pro: Daglig». Uten <th> og scope ville brukeren bare hørt «Daglig» – uten kontekst.

Vanlige feil

Manglende overskriftsceller

Den desidert vanligste feilen er å bruke <td> i stedet for <th> for overskriftsrader. Ofte fordi utvikleren styler overskriftene med CSS (for eksempel fet tekst) og tror det er nok. Men visuell styling gir ingen semantisk informasjon til hjelpeteknologi.

Tomme overskriftsceller

Mange tabeller har en tom celle øverst i venstre hjørne, der rad- og kolonneoverskriftene møtes. Unngå dette, eller gi cellen en beskrivende tekst:

<tr>
  <th scope="col">Funksjon</th>  <!-- Ikke la denne stå tom -->
  <th scope="col">Pris</th>
</tr>

Komplekse tabeller uten tilstrekkelig markering

For tabeller med flernivå-overskrifter (overskrifter som spenner over flere kolonner med colspan) bør du bruke headers-attributtet for å eksplisitt koble dataceller til sine overskrifter. Dette er avansert, men nødvendig for komplekse datasett.

Bruk av tabeller til layout

Som nevnt er layout-tabeller en utdatert praksis. Bruk i stedet moderne CSS:

/* Bruk CSS Grid for layout i stedet for tabeller */
.side-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

.side-layout nav {
  grid-column: 1;
}

.side-layout main {
  grid-column: 2;
}

Responsive tabeller

Tabeller kan være utfordrende på mobil. Her er noen strategier:

1. Horisontal scrolling: Pakk tabellen i en <div> med overflow-x: auto og legg til role="region" og aria-label for tilgjengelighet.
2. Omstrukturering: Vis innholdet som kort eller lister på små skjermer med CSS.
3. Forenkle: Vurder om du virkelig trenger alle kolonnene på mobil, eller om noen kan skjules.

<div role="region" aria-label="Prisliste" tabindex="0" style="overflow-x: auto;">
  <table>
    <!-- tabellinnhold -->
  </table>
</div>

Praktiske tips

1. Bruk alltid <th> for overskrifter – det er den viktigste enkelttingen du kan gjøre.
2. Legg til scope-attributtet på alle overskriftsceller.
3. Gi tabellen en <caption> slik at brukere forstår hva den viser.
4. Test med skjermleser – prøv å navigere tabellen med bare tastatur for å se om den gir mening.
5. Unngå layout-tabeller – bruk CSS Grid eller Flexbox.
6. Gjør tabeller responsive med horisontal scroll eller alternativ visning på mobil.

Riktig markerte tabeller gjør at alle brukere – uansett om de bruker mus, tastatur eller skjermleser – kan forstå og navigere dataene dine effektivt.