Domača » Kodiranje » Kako izboljšati dostopnost do tabele HTML z označevanjem
Kako izboljšati dostopnost do tabele HTML z označevanjem
Spletna dostopnost se nanaša na oblikovanje spletnih aplikacij na način, da jih lahko zlahka uporabljajo osebe z motnjami vida. Nekateri od teh uporabnikov se zanašajo na bralniki zaslona prebrati vsebino na spletnih straneh. Bralniki zaslona razlagati kodo na strani in vsebino prebere uporabniku.
je pogosto uporabljen element HTML za strukturirano prikazovanje podatkov na spletnih straneh. Njegova oblika sega od preprostih do zapletenih, skupaj z glavami vrstic, združenimi glavami itd.
Če tabela ni zasnovana z upoštevanjem dostopnosti, bo bralnikom zaslona težko prevesti podatke v kompleksne tabele smiselno za uporabnike. Zato moramo, da bi kompleksne tabele HTML lažje razumeli, za dostopnost, moramo zagotovite, da so glave, skupine stolpcev, skupine vrstic itd. Spodaj bomo videli, kako je to doseženi v pribitku.
Atribut Obseg
Tudi za preprosto mizo
, ki jasno določa glave, lahko izboljšate njeno dostopnost z področja uporabe atribut in ne smejo prepustiti nobene zmede, ki bi lahko nastala zaradi podobnih vrst podatkov v celicah.
ime zaposlenega
Kodeks zaposlenih
Koda projekta
Označevanje zaposlenih
John Doe
32456
456789
Direktor
Miriam Luther
78902
456789
Namestnik direktorja
Kaj počne atribut področja? V skladu z W3C:
Z drugimi besedami, pomaga nam povezati podatkovne celice z ustreznimi celicami glave.
Prosimo, upoštevajte, da lahko v zgornjem primeru preklopite
za
. Dokler je področja uporabe ima vrednost col, razlaga se kot ustrezna glava stolpca.
The področja uporabe atribut ima lahko katero koli od teh štirih vrednosti; col, vrstico, vrstni skupini, colgroup za sklic na glavo stolpca, glavo vrstice, skupino glave stolpcev in skupino glave vrstic.
Kompleksne mize
Zdaj pa preidimo na bolj zapleteno tabelo.
Zgoraj je tabela, ki navaja učence v razredu in njihove ocene v praktičnem in teoretičnem okviru za tri predmete.
Tukaj je koda HTML za to. Tabela je uporabljena rowspan in colspan ustvariti združene glave za podatkovne celice.
Študentsko ime
Biologija
Kemija
Fizika
Praktično
Teorija
Praktično
Teorija
Praktično
Teorija
John Doe
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
V zgornji tabeli je vsaka podatkovna celica, ki je vsaka celica tabele prikaže oceno, je povezan s tremi informacijami:
Kateri študent spada v ta razred?
Kateri predmet spada v ta razred?
Je ta ocena za oddelek Praktična ali Teorija?
Te tri informacije so strukturno in vizualno opredeljene v treh različnih vrstah celic glave:
Študentsko ime
Ime predmeta
Praktično ali teoretično
Določimo enako za dostopnost.
Študentsko ime
Biologija
Kemija
Fizika
Praktično
Teorija
Praktično
Teorija
Praktično
Teorija
John Doe
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
V zgornji oznaki smo dodali področja uporabe na celice, ki vsebujejo informacije o naslovih podatkovnih celic.
Skupina stolpcev
Celice za biologijo, kemijo in fiziko morajo biti povezane s skupino dveh stolpcev (teorija in praktika). Samo dodajam colspan = "2" ne ustvari skupin stolpcev, kaže le, da določena celica zaseda prostor v dveh celicah.
Za ustvarjanje skupine stolpcev morate uporabiti colgroup in nato dodajte razpon označuje, koliko stolpcev vsebuje skupina stolpcev.
The
Študentsko ime
označevanje s scope = "col" pomaga pri podporni tehnologiji ugotoviti, da so celice, ki sledijo v istem stolpcu, imena študentov.
Podobno so celice podobne
Biologija
vsebujejo scope = "colgroup" uporabnikom pomaga ugotoviti, da so podatki v celicah, ki sledijo v skupini stolpcev, ki jih razvršča, povezani s to temo.
Potem je tu še
John Doe
označevanje s scope = "vrstica" ki določa, da so celice, ki ji sledijo, v isti vrstici, ki vsebuje “razred” informacije o navedenem imenu študenta.
Skupine vrstic
Zdaj pa preidimo na drug primer, ta primer bo imel skoraj isto tabelo kot zgoraj, razen da bomo zamenjali glave vrstic in stolpcev, tako da bomo lahko delali s skupinami vrstic..
Predmet
John Doe
Miriam Luther
Biologija
Praktično
A
A
Teorija
A+
A
Kemija
Praktično
B
C
Teorija
A
C+
Fizika
Praktično
A
A
Teorija
A-
A-
Zdaj, ko imamo vzorec za delo z njim, začnimo z ustvarjanjem skupin vrstic, kot smo naredili za skupine stolpcev v prejšnjem primeru.
Vendar pa skupin vrstic ni mogoče ustvariti z oznako, kot je colgroup ker ni vrstni skupini element.
Vrstice HTML so na splošno združene , in elementov. En sam HTML
lahko ima en element , eno in več . Uporabili bomo več tole v naši tabeli ustvarite skupine vrstic in dodajte ustrezno področje v celice glave.
Predmet
John Doe
Miriam Luther
Biologija
Praktično
A
A
Teorija
A+
A
Kemija
Praktično
B
C
Teorija
A
C+
Fizika
Praktično
A
A
Teorija
A-
A-
Dodali smo vrstice “Praktično” in “Teorija” v vsakem tole ustvarjanje skupin vrstic z dvema vrsticama v vsaki. Dodali smo tudi scope = "groupgroup" v celice, ki vsebujejo naslovne informacije o teh dveh vrsticah (ki je v tem primeru ime predmeta, kateremu pripadajo ocene).
