Tabelloverskrifter

Silktide kontrollerer at tabeller som presenterer data, definerer overskriftsceller. Overskrifter forteller personer som bruker hva hver rad og kolonne betyr – noe seende lesere kan utlede fra tabellens oppsett.

Tenk på en tabell med etternavn og byer. Uten en overskriftsrad kan en verdi som "Washington" være enten et etternavn eller en by – betydningen blir først klar når kolonnene er merket.

<!-- Problem: overskriftene er vanlige celler og har derfor ingen betydning -->
<table>
  <tr>
    <td>Etternavn</td>
    <td>By</td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

Hvorfor dette er viktig

En beveger seg gjennom en tabell én celle om gangen. Når overskrifter er definert, kan den lese opp den relevante overskriften sammen med hver verdi, slik at "London" leses som "By: London". Uten overskrifter hører lytteren en løs strøm av verdier og må huske tabellens oppsett for å forstå dem – og for større tabeller er det i praksis umulig.

Det er ikke nok å gjøre den øverste raden fet eller gi den en annen farge. Visuell utforming har ingen betydning for hjelpeteknologi; bare den underliggende -koden har det.

Slik løser du det

Endre hver overskriftscelle fra <td> til <th>, og legg til et scope-attributt som angir om den er overskrift for en kolonne eller en rad:

<!-- Løst: overskriftene er ekte overskriftsceller -->
<table>
  <tr>
    <th scope="col">Etternavn</th>
    <th scope="col">By</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

Hvis tabellen ikke presenterer data, men bare brukes til å ordne siden visuelt, legger du til role="presentation" i <table>-elementet slik at hjelpeteknologi ignorerer strukturen. Enda bedre er det å erstatte layouttabeller med CSS – de frarådes sterkt i moderne webdesign.

Slik tester Silktide dette

Finn alle tabeller på hver side.
Hopper over tabeller som er merket som presentasjonstabeller med role="presentation".
Hopper over tabeller med bare én rad eller én kolonne, som sannsynligvis ikke er datatabeller.
Rapporterer hver gjenværende tabell som ikke inneholder en eneste <th>-overskriftscelle.

Feilsøking

Tabellen min har overskrifter, men de er formaterte `<td>`-celler

Celler som bare ser ut som overskrifter, teller ikke. Hjelpeteknologi kan ikke se skrifttyper eller farger; konverter cellene til <th>.

Layouttabellen min blir flagget

Silktide hopper bare over layouttabeller som erklærer role="presentation". Hvis en tabell faktisk bare brukes til presentasjon, legger du til dette attributtet – eller erstatter tabellen med CSS-layout.