Tietotaulukko varavaihtoehtona
Tarjotkaa taustalla olevat luvut saavutettavassa taulukossa.
Tietotaulukko varavaihtoehtona on ilmainen Web Accessibility Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Web Accessibility Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Kun sanat eivät riitä
Yhden rivin yhteenveto kertoo tarinan, mutta jotkut käyttäjät haluavat nähdä luvut. Datataulukko näyttää kaavion taustalla olevat raaka-arvot.
Taulukko on totuuden lähde
Ajatelkaa kaaviota taulukon visualisointina. Tarjotkaa sama taulukko oikealla merkintäkielellä, niin kaikki avustavat teknologiat pystyvät lukemaan sen ongelmitta.
Käyttäkää oikeaa table-elementtiä
Ruudunlukijat ymmärtävät natiivin table-elementin perusteellisesti: rivit, sarakkeet ja otsikot ilmoitetaan oikein ilman ylimääräistä ARIAa.
<table>
<tr><th>Month</th><th>Sales</th></tr>
<tr><td>Jan</td><td>120</td></tr>
</table>Lisätkää taulukolle caption
caption nimeää taulukon, jotta kuulija tietää, mitä dataa taulukossa esitetään. Se luetaan heti, kun kohdistus siirtyy taulukkoon.
<table><caption>Monthly sales in 2024</caption> ... </table>Otsikkosolut th:lla ja scopella
Merkitkää otsikot th-elementeiksi ja määrittäkää niille scope, jotta jokainen arvo ilmoitetaan yhdessä sarake- ja riviotsikkonsa kanssa. Tämä asiayhteys on taulukossa ratkaisevan tärkeä.
<th scope="col">Sales</th>
<th scope="row">January</th>Sijoittakaa se heti kaavion yhteyteen
Sijoittakaa varataulukko kaavion viereen, ei erilliselle sivulle. Käyttäjien pitäisi päästä dataan ilman sen etsimistä.
Piilottakaa se halutessanne visuaalisesti
Jos taulukko tekee ulkoasusta raskaan, piilottakaa se visuaalisesti mutta säilyttäkää se ruudunlukijoita varten visually-hidden-luokan avulla. Älkää koskaan käyttäkö display none -ratkaisua.
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; }Älkää piilottako dataa display none -määreellä
Huomioikaa tämä: display: none poistaa sisällön kokonaan saavutettavuuspuusta. Tällä tavalla piilotettuna varataulukosta ei ole hyötyä kenellekään.
details-elementin avaus toimii myös
Voitte sijoittaa taulukon details-elementin sisään, jolloin näkevät käyttäjät voivat avata luvut tarvittaessa ja taulukko pysyy täysin saavutettavana.
<details><summary>View data table</summary>
<table>...</table>
</details>Pitäkää taulukko ja kaavio ajan tasalla
Jos kaavio päivittyy, myös taulukon on päivityttävä. Tuoreeseen kaavioon yhdistetyt vanhentuneet luvut johtavat huomaamatta harhaan niitä käyttäjiä, jotka luottavat niihin.
Yksi lähde, kaksi näkymää
Ihannetapauksessa sekä kaavio että taulukko muodostetaan samoista tiedoista. Näin ne pysyvät yhdenmukaisina, eikä kahta erillistä totuutta tarvitse ylläpitää. 🔗
Pikatarkistus
Miten datataulukko pitäisi piilottaa, jotta ruudunlukijat voivat silti lukea sen?
Kertaus: kuvan taustalla olevat luvut
Opitte täydentämään jokaisen kaavion oikealla taulukolla: lisäämään kuvatekstin, määrittämään otsikoiden scopet, pitämään tiedot ajan tasalla ja piilottamaan taulukon tarvittaessa turvallisesti — mutta ette koskaan display none -määreellä. 📋
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Tietotaulukko varavaihtoehtona” ilmainen?
Kyllä – oppitunnin ”Tietotaulukko varavaihtoehtona” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Web Accessibility Academy-kurssin, päivitä CoddyKit PROhon. Web Accessibility Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tietotaulukko varavaihtoehtona”?
Tarjotkaa taustalla olevat luvut saavutettavassa taulukossa. Harjoittelet Web Accessibility Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Web Accessibility Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Web Accessibility Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Tietotaulukko varavaihtoehtona”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Web Accessibility Academy-oppitunnilla?
Kyllä. Jokainen Web Accessibility Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Jokainen kaavio tarvitsee tekstivastineen
- Tietotaulukko varavaihtoehtona
- Väri, kuvio ja suorat selitteet
- Näppäimistöllä käytettävät vuorovaikutteiset kaaviot