Ako zlepšiť dostupnosť tabuľky HTML pomocou značky

Web accessibility sa týka navrhovania webových aplikácií takým spôsobom, aby ich ľudia so zrakovým postihnutím mohli ľahko používať. Niektorí z týchto používateľov sa spoliehajú čítačky obrazovky čítať obsah na webových stránkach. Čítačky obrazovky interpretovať kód prítomný na stránke a čítať jeho obsah používateľovi.

je široko používaný prvok HTML na zobrazovanie údajov štruktúrovaným spôsobom v webových stránkach. Jeho dizajn sa pohybuje od jednoduchých až po komplexné, s hlavičkami riadkov, zlúčenými hlavičkami atď.

Ak tabuľka nie je navrhnutá s ohľadom na prístupnosť, pre čitateľov obrazovky bude ťažké premeniť údaje v zložitých tabuľkách významne pre používateľov. Z tohto dôvodu, aby sme zrozumiteľnejšie vytvorili zložité HTML tabuľky, musíme, pokiaľ ide o prístupnosť zabezpečiť, aby boli hlavičky, skupiny stĺpcov, skupiny riadkov atď. jasne definované. Nižšie uvidíme, ako to je v značkovaní.

Atribút rozsahu

Aj pre jednoduchý stôl s

značkovanie s Rozsah = "col" pomáha pomocnej technológii identifikovať, že bunky, ktoré nasledujú v rovnakom stĺpci, sú mená študentov.

Podobne bunky podobné

obsahujúce Rozsah = "colgroup" pomáha používateľom identifikovať, že údaje v bunkách, ktoré nasledujú v skupine stĺpcov, na ktoré sa vzťahuje, sú spojené s daným predmetom.

Potom je tu

značkovanie s Rozsah = "riadok" , ktorý definuje, že bunky, ktoré nasledujú, v tom istom riadku obsahujúcom “akosť” informácie o konkrétnom názve študenta.

Riadkové skupiny

Teraz prejdime na ďalší príklad, tento príklad bude mať takmer rovnakú tabuľku ako ten vyššie, okrem toho, že budeme vymieňať hlavičky riadkov a stĺpcov, takže budeme môcť pracovať so skupinami riadkov.

tag, ktorý jasne definuje hlavičky, môžete zlepšiť jeho dostupnosť pomocou rozsah atribút a nedá sa vylúčiť zmätok, ktorý môže vzniknúť z podobných typov údajov v bunkách. Meno zamestnanca Kód zamestnanca Kód projektu Označenie zamestnanca John Doe 32456 456789 riaditeľ Miriam Luther 78902 456789 Námestník riaditeľa Čo robí atribút rozsahu? Podľa W3C: Inými slovami, pomáha nám priradiť bunky údajov s ich zodpovedajúcimi bunkami hlavičky. Upozorňujeme, že vo vyššie uvedenom príklade môžete prepnúť	pre	. Pokiaľ je jeho rozsah má hodnotu col, bude to interpretované ako hlavička zodpovedajúceho stĺpca. rozsah atribút môže mať ktorúkoľvek z týchto štyroch hodnôt; col, riadok, rowgroup, colgroup odkazovať na hlavičku stĺpca, záhlavie riadku, hlavičku skupiny stĺpcov a rad záhlavia. Komplexné tabuľky Teraz prejdime k zložitejšiemu stolu. Hore je tabuľka, ktorá uvádza študentov v triede a ich triedy v praktickej a teórii pre tri predmety. Tu je HTML kód pre ňu. Používa sa tabuľka rowspan a colspan vytvoriť zlúčené hlavičky pre dátové bunky. Meno študenta biológie chémia fyzika praktický teória praktický teória praktický teória John Doe + B - Miriam Luther C C+ - Vo vyššie uvedenej tabuľke je každá dátová bunka, ktorá je každá z tabuľkových buniek zobrazenie stupňa, je spojená s tromi informáciami: Ktorý študent patrí do tejto triedy? Ktorému predmetu patrí táto trieda? Je tento stupeň pre praktickú alebo teóriu? Tieto tri informácie sú definované štrukturálne a vizuálne v troch rôznych typoch článkov hlavičky: Meno študenta Názov predmetu Praktická alebo teória Rovnako definujeme prístupnosť. Meno študenta biológie chémia fyzika praktický teória praktický teória praktický teória John Doe + B - Miriam Luther C C+ - Vo vyššie uvedenom označení sme pridali rozsah do buniek, ktoré obsahujú informácie o hlavičke o dátových bunkách. Skupina stĺpcov Biologické, chemické a fyzikálne bunky sa spájajú so skupinou po dvoch stĺpcoch (Teória & Praktické). Stačí pridanie colspan = "2" nevytvára skupiny stĺpcov, iba naznačuje, že daná bunka má zaistiť priestor v dvoch bunkách. Vytvorte skupinu stĺpcov, ktorú musíte použiť colgroup a potom pridajte rozpätie atribút, ktorý udáva, koľko stĺpcov zahŕňa táto skupina stĺpcov.	Meno študenta	biológie		John Doe

predmet		John Doe	Miriam Luther
biológie	praktický
	teória	+
chémia	praktický	B	C
	teória		C+
fyzika	praktický
	teória	-	-

Teraz, keď máme našu vzorku pracovať, začneme tým, že vytvoríme skupiny riadkov, ako to urobili pre skupiny stĺpcov v predchádzajúcom príklade.

Skupiny riadkov však nie je možné vytvoriť pomocou značky ako colgroup pretože nie je rowgroup element.

Riadky HTML sa spravidla zoskupujú pomocou , a prvky. Jeden HTML

prvok môže mať jeden , jeden a viacnásobné . Použijeme viacero tbody v našej tabuľke vytvoriť skupiny riadkov a pridať príslušný rozsah do buniek hlavičky.

predmet		John Doe	Miriam Luther
biológie	praktický
	teória	+
chémia	praktický	B	C
	teória		C+
fyzika	praktický
	teória	-	-

Pridali sme riadky “praktický” a “teória” v každom tbody vytvára skupiny riadkov s dvoma riadkami v každom z nich. Pridali sme tiež Rozsah = "rowgroup" do buniek obsahujúcich informácie o týchto dvoch riadkoch (čo je v tomto prípade názov predmetu, do ktorého patria triedy).

Teraz čítanie: Rovná výška stĺpca s CSS