Taulukko-otsikoiden tunnisteet

Silktide tarkistaa taulukot, joissa solut yhdistetään otsikoihin headers-attribuutin avulla. Näissä taulukoissa jokainen otsikkosolu tarvitsee oman tunnisteensa, tai yhteydet eivät voi toimia.

Monimutkaisissa taulukoissa – esimerkiksi sellaisissa, joissa on kaksi otsikkotasoa tai usean rivin yli ulottuvia soluja – solun ja sen otsikoiden välistä suhdetta ei voida päätellä pelkän sijainnin perusteella. HTML ratkaisee tämän headers-attribuutilla: jokainen tietosolu luettelee siihen soveltuvien otsikkosolujen id-arvot. Tämä toimii vain, jos jokaisella otsikkosolulla todella on id.

<!-- Ongelma: toisella otsikolla ei ole tunnistetta, joten solut eivät voi viitata siihen -->
<table>
  <tr>
    <th id="name">Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td headers="name">Ada</td>
    <td>98</td>
  </tr>
</table>

Miksi tämä on tärkeää

Kun taulukko käyttää headers-yhdistelmiä, ruudunlukija lukee yhdistetyt otsikot ääneen ennen jokaista arvoa. Näin kuuntelija pysyy selvillä sijainnistaan monimutkaisessa taulukossa. Otsikkosoluun, jolla ei ole id-tunnistetta, ei voi viitata, joten sen alla olevat solut ilmoitetaan ilman asiayhteyttä ja taulukon tulkinnasta tulee arvaamista kaikille, jotka eivät näe sitä.

Näin korjaat sen

1. Anna jokaiselle taulukon <th>-otsikkosolulle yksilöllinen id.
2. Päivitä jokaisen tietosolun headers-attribuutti luettelemaan kaikki siihen soveltuvien otsikoiden tunnisteet välilyönnein eroteltuina:

<!-- Korjattu: jokaisella otsikolla on tunniste ja solut viittaavat niihin -->
<table>
  <tr>
    <th id="name">Name</th>
    <th id="score">Score</th>
  </tr>
  <tr>
    <td headers="name">Ada</td>
    <td headers="score">98</td>
  </tr>
</table>

3. Vaihtoehtoisesti harkitse taulukon yksinkertaistamista. Yksinkertaiset taulukot, joissa on yksi otsikkorivi tai -sarake, eivät tarvitse lainkaan headers-yhdistelmiä – scope-attribuuteilla varustetut <th>-solut riittävät ja ovat paljon helpompia ylläpitää.

Miten Silktide testaa tämän

1. Etsi jokaiselta sivulta kaikki taulukot.
2. Ohita taulukot, joissa mikään solu ei käytä headers-attribuuttia – tämä tarkistus koskee vain taulukoita, joissa käytetään eksplisiittisiä otsikkoyhdistelmiä.
3. Ilmoita jäljelle jäävistä taulukoista jokainen <th>-otsikkosolu, jolla ei ole id-attribuuttia.

Lue lisää

• Menestyskriteerin 1.3.1 ymmärtäminen: Informaatio ja suhteet (WCAG 2.2)
• Tekniikka H43: id- ja headers-attribuuttien käyttäminen (WCAG)
• Taulukot, joissa on monitasoiset otsikot (W3C:n opas)
• Soluotsikot