HTML Academy · leksjon

Tabelltilgjengelighet: scope, summary og caption

Legg til bildetekster og scope-attributter for støtte til skjermlesere.

Leksjon 4 av 414 trinn

Tabelltilgjengelighet: scope, summary og caption er en gratis leksjon i HTML Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i HTML Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Hvorfor tilgjengelighet for tabeller er viktig

Brukere av skjermlesere navigerer i datatabeller celle for celle — de trenger overskriftskontekst for hver datacelle de leser.

Uten riktig oppmerking leser skjermlesere bare råverdier uten kontekst for kolonne eller rad
Tilgjengelige tabeller gjør data forståelige for alle

Elementet caption

<caption> gir tabellen en synlig tittel:

<table>
  <caption>Q4 2024 Product Sales by Region</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>
<!-- caption is the first child of table -->
<!-- Screen readers announce it when entering the table -->
<!-- Helps all users understand the table's purpose at a glance -->

Stilsetting av caption

Gi caption stil og plasser det med CSS:

caption {
  caption-side: bottom;  /* or top (default) */
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
  padding: 0.5rem 0;
}

Attributtet scope på th

Attributtet scope forteller skjermlesere hvilke celler en overskrift gjelder for:

<thead>
  <tr>
    <th scope="col">Name</th>      <!-- header for a column -->
    <th scope="col">Score</th>
    <th scope="col">Grade</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>    <!-- header for a row -->
    <td>95</td>
    <td>A</td>
  </tr>
</tbody>

Verdier for scope

Verdier for attributtet scope:

col — overskriften gjelder celler i samme kolonne
row — overskriften gjelder celler i samme rad
colgroup — overskriften gjelder celler i en kolonnegruppe
rowgroup — overskriften gjelder celler i en radgruppe (tbody/thead)

scope for komplekse overskrifter

Overskrifter som strekker seg over flere områder, bruker scope med colgroup eller rowgroup:

<thead>
  <tr>
    <th rowspan="2" scope="col">Name</th>
    <th colspan="2" scope="colgroup">2024</th>   <!-- colgroup -->
  </tr>
  <tr>
    <th scope="col">Q1</th>
    <th scope="col">Q2</th>
  </tr>
</thead>

Attributtet headers på td

For svært komplekse tabeller kan du bruke headers til å koble celler eksplisitt til overskriftene deres:

<thead>
  <tr>
    <th id="hname">Name</th>
    <th id="hq1">Q1</th>
    <th id="hq2">Q2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="ralice" headers="hname">Alice</th>
    <td headers="hq1 ralice">95</td>
    <td headers="hq2 ralice">88</td>
  </tr>
</tbody>

Når bør du bruke scope kontra headers?

Retningslinjer:

Enkle tabeller med overskrifter i én rad → bruk scope="col" og scope="row"
Komplekse overskrifter som strekker seg over flere områder → bruk attributtet headers med ID-referanser
WCAG 1.3.1 krever at tabelloverskrifter kobles programmatisk til datacellene de gjelder for

aria-label på table

Når en synlig caption ikke er ønskelig, bruker du aria-label:

<!-- caption with visually-hidden class -->
<table aria-label="Q4 2024 Product Sales by Region">
  ...
</table>
<!-- Or use aria-labelledby to reference a heading -->
<h2 id="table-title">Sales Data</h2>
<table aria-labelledby="table-title">...</table>

Testing av tabellers tilgjengelighet

Slik kontrollerer du at tabellen er tilgjengelig:

Bruk panelet Tables i en skjermleser (VoiceOver, NVDA)
Installer nettleserutvidelsen axe DevTools
Kjør pa11y CLI mot URL-en til siden
W3C Markup Validator oppdager manglende caption

Attributtet summary (utdatert)

Attributtet summary ble brukt av skjermlesere for komplekse tabeller — det er nå utdatert i HTML5:

<!-- Old HTML 4.01 — do not use: -->
<table summary="This table shows quarterly sales...">

<!-- Modern HTML5 replacement: -->
<table>
  <caption>This table shows quarterly sales...</caption>
</table>
<!-- Or: aria-describedby to a paragraph -->

Sjekkliste for tilgjengelige tabeller

Sjekkliste for tilgjengelige datatabeller:

Bruk <caption> til å navngi tabellen
Bruk <th> for alle overskriftsceller
Legg til scope i alle <th>-elementer
Bruk <thead>, <tbody> og <tfoot> for struktur
For komplekse tabeller bruker du id + headers

Hurtigsjekk

Hvilken scope-verdi bør du bruke for en th som er overskrift for en hel kolonne?

Besvar den i den interaktive leksjonen

Oppsummering: tilgjengelighet for tabeller

Det viktigste om tilgjengelige tabeller:

<caption> — synlig tabelltittel som leses opp av skjermlesere
scope="col" — kolonneoverskrift
scope="row" — radoverskrift
scope="colgroup/rowgroup" — overskrifter som strekker seg over flere områder
id + headers — for komplekse overskrifter på flere nivåer
Test med axe, pa11y eller VoiceOver

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Tabelltilgjengelighet: scope, summary og caption» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien HTML Academy, inkludert «Tabelltilgjengelighet: scope, summary og caption», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i HTML Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Tabelltilgjengelighet: scope, summary og caption»?

Legg til bildetekster og scope-attributter for støtte til skjermlesere. Du øver på HTML Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med HTML Academy?

Ingen tidligere erfaring er nødvendig. HTML Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Tabelltilgjengelighet: scope, summary og caption»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne HTML Academy-leksjonen?

Ja. Alle HTML Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

table, tr, td og th
Strukturen til thead, tbody og tfoot
colspan og rowspan for spenn over flere celler
Tabelltilgjengelighet: scope, summary og caption

← Tilbake til HTML Academy