Tabeloverskrifter

Silktide tjekker, at tabeller, der præsenterer data, definerer overskriftsceller. Overskrifter fortæller personer, der bruger , hvad hver række og kolonne betyder, hvilket seende læsere udleder af tabellens layout.

Overvej en tabel med efternavne og byer. Uden en overskriftsrække kan en værdi som "Washington" være begge dele – betydningen bliver først tydelig, når kolonnerne har etiketter.

<!-- Problem: overskrifter er almindelige celler, så de har ingen betydning -->
<table>
  <tr>
    <td>Efternavn</td>
    <td>By</td>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

Hvorfor det er vigtigt

En bevæger sig gennem en tabel én celle ad gangen. Når overskrifter er defineret, kan den annoncere den relevante overskrift sammen med hver værdi, så "London" læses som "By: London". Uden overskrifter hører lytteren en nøgen strøm af værdier og skal huske tabellens layout for at forstå dem – og for større tabeller er det praktisk talt umuligt.

Det er ikke nok at gøre den øverste række fed eller give den en anden farve. Visuel styling har ingen betydning for hjælpeteknologi; det er kun den underliggende , der har det.

Sådan løser du det

Skift hver overskriftscelle fra <td> til <th>, og tilføj en scope- attribut, der angiver, om den er overskrift for en kolonne eller en række:

<!-- Løst: overskrifter er rigtige overskriftsceller -->
<table>
  <tr>
    <th scope="col">Efternavn</th>
    <th scope="col">By</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
</table>

Hvis tabellen slet ikke præsenterer data og kun bruges til at arrangere siden visuelt, skal du tilføje role="presentation" til <table>-elementet, så hjælpeteknologi ignorerer dens struktur. Endnu bedre er det at erstatte layout- tabeller med CSS – de frarådes kraftigt i moderne webdesign.

Sådan tester Silktide dette

Find hver tabel på hver side.
Spring tabeller over, der er markeret som præsentation med role="presentation".
Spring tabeller med kun én række eller kun én kolonne over, da de næppe er datatabeller.
Rapportér hver resterende tabel, der slet ikke indeholder en <th>-overskriftscelle.

Fejlfinding

Min tabel har overskrifter, men de er stylede `<td>`-celler

Celler, der kun ligner overskrifter, tæller ikke. Hjælpeteknologi kan ikke se skrifttyper eller farver; konvertér cellerne til <th>.

Min layouttabel er markeret

Silktide springer kun layouttabeller over, der angiver role="presentation". Hvis en tabel reelt kun er til præsentation, skal du tilføje den attribut – eller erstatte tabellen med CSS-layout.