Stikkord: 1.3.1, Jaws, NVDA, role="columnheader", role="rowheader", skjermleser, tabell, VoiceOver

Vanligvis skal HTML brukes for å merke tabeller. Les Enkle datatabeller hvis du ikke vet hvordan det skal gjøres. Men, hvis du av en eller annen grunn ikke kan bruke th kan du fortsatt gjøre tabellen lesbar for noen skjermlesere.

For å oppfylle SK 1.3.1 i WCAG skal det være mulig å bestemme «programmeringsmessig» hvilke relasjoner som hører til en datacelle. Litt forenklet kan vi si at en maskin skal kunne bestemme hvilke tabelloverskrifter som trengs for å skjønne verdien i datacellene. For eksempel skal en skjermleser kunne lese opp nok informasjon til at verdier blir forståelige.

Hvorfor i all verden kan du ikke gjøre ting riktig

Det som fungerer best er altså å bruke standard HTML. Grunnen til ikke å gjøre det er vanligvis «utseende». th gjør altså at tabellcellene ser annerledes ut. Dette kan ofte fikses ved å lage en egen CSS-klasse, men noen ganger mangler rettigheter, kunnskap, vilje, penger, …

role="columnheader" og role="rowheader"

WAI-ARIA kan brukes for å definere celler som rad- eller kolonneoverskrifter.

<td role="columnheader">...</td>
Tilsvarer: <th Scope="col">...</th>

<td role="rowheader">...</td>
Tilsvarer: <th Scope="row">...</th>

Skjermlesere har ulik støtte for WAI-ARIA, og her spiller i tillegg nettleseren en rolle. Jaws skjønner for eksempel rowheader og columnheader, men det gjør hverken skjermleserne NVDA eller VoiceOver.

Eksempel

I tabellen nedenfor er kolonneoverskriftene merket med th. Da skal skjermlesere lese kolonneoverskriften når du går horisontalt fra celle til celle. Radoverskriftene er imidlertid merket med role="rowheader". Da skal skjermleseren lese radoverskriften når du hopper vertikalt fra rad til rad: Gjør du det i kolonnen «Capital» skal altså hovedstad og land leses når du går rett opp/ned. Det klarer ikke alle skjermlesere, dessverre.

• Vis tabellkode
  <table width="200" border="1" lang="en">
<tbody>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
</tr>
<tr>
<td role="rowheader">Denmark</td>
<td>Copenhagen</td>
<td>5,707,251</td>
</tr>
<tr>
<td role="rowheader">Norway</td>
<td>Oslo</td>
<td>5,214,900</td>
</tr>
<tr>
<td role="rowheader">Sweden</td>
<td>Stockholm</td>
<td>9,875,378</td>
</tr>
</tbody>
</table>
  
• Vis tabellen med skjermleseren Jaws