A11ying with Sanna - Toki, jos voisin opas saavutettavuuteen

1.3.1 Taulukot

Heikossa esimerkissä taulukolla ei ole kuvausta (caption), vaan taulukon yläpuolella oleva otsikko on lisätty boldattuna. Vertaa näitä esimerkkejä ruudunlukijalla.

Haasteellinen esimerkki

Taulukkoa kuvaava otsikko

Taulukon otsikkoTaulukon otsikkoTaulukon otsikko
Taulukon sisältöTaulukon sisältöTaulukon sisältö
Taulukon sisältöTaulukon sisältöTaulukon sisältö

Parempi esimerkki

Table headerTable headerTable header
Taulukon sisältöTaulukon sisältöTaulukon sisältö
Taulukon sisältöTaulukon sisältöTaulukon sisältö
Taulukon otsikko

Edellä olevassa esimerkissä taulukko on figure-elementin sisällä, jossa taulukon otsikko on annettu figcaption-elementissä. Taulukoiden HTML-rakenne vaihtelee sen mukaan mitä työkalua käyttää. Tässä on käytetty CKEditor 5 -editoria Strapin kanssa.

Taulukon otsikko on usein oletuksena taulukon alaosassa, mutta sen voi siirtää myös taulukon yläpuolelle:

Taulukon otsikko
Taulukon otsikkorivi Taulukon otsikkorivi Taulukon otsikkorivi
Taulukon sisältö Taulukon sisältö Taulukon sisältö
Taulukon sisältö Taulukon sisältö Taulukon sisältö

Loppukommentit

Oikea merkintä taulukoiden kanssa on tärkeää avustavia teknologia käyttäville. Tosin taulukot eivät ole erityisen miellyttäviä käyttää ruudunlukijoilla ylipäätään.