Web-esteettömyys tarkoittaa web-sovellusten suunnittelua siten, että näkövammaiset ihmiset voivat käyttää niitä helposti. Jotkut näistä käyttäjistä luottavat näytön lukijat lukea verkkosivujen sisältö. Näytön lukijat tulkita sivulla olevaa koodia ja lue sen sisältö käyttäjälle.
on laajalti käytetty HTML-elementti tietojen näyttämiseksi strukturoidulla tavalla verkkosivuilla. Sen muotoilu vaihtelee yksinkertaisista monimutkaisiin, täydennettynä rivin otsikoilla, yhdistetyillä otsikoilla jne.
Jos taulukkoa ei ole suunniteltu esteettömäksi, näytönlukijoiden on vaikea kääntää tietoja monimutkaisissa taulukoissa merkityksellisesti käyttäjille. Näin ollen, jotta monimutkaiset HTML-taulukot olisivat helpommin ymmärrettäviä, meidän on oltava saatavilla Varmista, että otsikot, sarakeryhmät, riviryhmät jne. on määritelty selkeästi. Näemme alla, miten tämä on saavutettu.
Scope-määrite
Jopa yksinkertaisen pöydän kanssa
tunniste, joka määrittää selkeästi otsikot, voit parantaa sen saatavuutta laajuus määrite, eikä anna mitään hämmennystä, joka saattaa johtua samankaltaisista tietolajeista soluissa.
työntekijän nimi
Työntekijäkoodi
Hankekoodi
Työntekijän nimeäminen
John Doe
32456
456789
Johtaja
Miriam Luther
78902
456789
Varajohtaja
Mitä laajuusmäärite tekee? W3C: n mukaan:
Toisin sanoen se auttaa meitä yhdistämään tietosolut niiden vastaavien otsikkosolujen kanssa.
Huomaa, että yllä olevassa esimerkissä voit vaihtaa
varten
. Niin kauan kuin se on laajuus on arvo col, sitä tulkitaan vastaavaksi sarakkeen otsikkoksi.
laajuus määritteellä voi olla jokin näistä neljästä arvosta; col, rivi, rowgroup, COLGROUP viitataksesi sarakkeen otsikkoon, rivin otsikkoon, sarakkeiden sarakkeen otsikkoon ja rivien ryhmään.
Monimutkaiset taulukot
Siirrymme nyt monimutkaisempaan taulukkoon.
Yllä on taulukko, jossa luetellaan luokan oppilaat ja niiden arvosanat käytännössä ja teoriassa kolmelle aiheelle.
Tässä on sen HTML-koodi. Taulukko on käytetty rowspan ja colspan luoda yhdistettyjä otsikoita tietosoluihin.
Opiskelijan nimi
Biologia
Kemia
Fysiikka
Käytännöllinen
Teoria
Käytännöllinen
Teoria
Käytännöllinen
Teoria
John Doe
+
B
-
Miriam Luther
C
C+
-
Yllä olevassa taulukossa kukin tietokenno, joka on jokainen taulukon solu asteen näyttäminen, liittyy kolmeen tietoon:
Mikä oppilas kuuluu tähän luokkaan?
Mihin aiheeseen tämä luokka kuuluu?
Onko tämä luokitus käytännön tai teoriaosassa?
Nämä kolme tietoa määritellään rakenteellisesti ja visuaalisesti kolmessa eri otsikkosoluissa:
Opiskelijan nimi
Aiheen nimi
Käytännöllinen tai teoreettinen
Määritellään sama esteettömyyteen.
Opiskelijan nimi
Biologia
Kemia
Fysiikka
Käytännöllinen
Teoria
Käytännöllinen
Teoria
Käytännöllinen
Teoria
John Doe
+
B
-
Miriam Luther
C
C+
-
Yllä olevassa merkinnässä olemme lisänneet laajuus soluihin, jotka sisältävät otsikkotietoja datakennoista.
Sarakeryhmä
Biologian, kemian ja fysiikan solut on liitettävä kahteen sarakkeeseen (Theory & Practical). Lisää vain colspan = "2" ei luo sarakeryhmiä, se osoittaa vain, että tietyn solun on oltava kahden solun arvoinen tilaa.
Voit luoda sarakeryhmän, jota täytyy käyttää COLGROUP ja lisää sitten jänneväli määritä sille, kuinka monta saraketta sarake sisältää.
Opiskelijan nimi
merkintä laajuus = "col" auttaa aputeknologiaa tunnistamaan, että samassa sarakkeessa olevat solut ovat opiskelijoiden nimiä.
Samoin solut kuten
Biologia
sisältävät laajuus = "COLGROUP" auttaa käyttäjiä tunnistamaan, että niiden solujen tiedot, jotka seuraavat sen sarakkeen ryhmässä, jotka liittyvät sen yli, liittyvät tähän tiettyyn aiheeseen.
Sitten on
John Doe
merkintä laajuus = "rivi" joka määrittää, että solut, jotka seuraavat sitä samassa rivissä, sisältävät “arvosana” tietoja kyseisestä opiskelijanimestä.
Riviryhmät
Siirrymme nyt toiseen esimerkkiin, tässä esimerkissä on lähes sama taulukko kuin edellä, paitsi että vaihdamme rivi- ja sarakekohtaiset otsikot, joten voimme työskennellä riviryhmien kanssa.
aihe
John Doe
Miriam Luther
Biologia
Käytännöllinen
Teoria
+
Kemia
Käytännöllinen
B
C
Teoria
C+
Fysiikka
Käytännöllinen
Teoria
-
-
Nyt kun meillä on näyte toimimaan, aloita luomalla riviryhmät kuten edellisen esimerkin sarakeryhmille.
Riviryhmiä ei kuitenkaan voida luoda käyttämällä tunnisteita COLGROUP koska ei ole rowgroup elementti.
HTML-rivit on yleensä ryhmitelty käyttäen , ja elementtejä. Yksi HTML
elementillä voi olla yksi , yksi ja useita . Käytämme useita tbody taulukossa luodaan riviryhmät ja lisää vastaava laajuus otsikkosoluihin.
aihe
John Doe
Miriam Luther
Biologia
Käytännöllinen
Teoria
+
Kemia
Käytännöllinen
B
C
Teoria
C+
Fysiikka
Käytännöllinen
Teoria
-
-
Olemme lisänneet rivit “Käytännöllinen” ja “Teoria” jokaisessa tbody luodaan riviryhmät, joissa kussakin on kaksi riviä. Olemme myös lisänneet laajuus = "rowgroup" soluihin, jotka sisältävät otsikkotiedot näistä kahdesta rivistä (joka on aiheen nimi tässä tapauksessa).
