Jak zlepšit přístupnost tabulky HTML pomocí značek

Přístupnost na webu se týká navrhování webových aplikací způsobem, který mohou být snadno používány lidmi se zrakovým postižením. Někteří z těchto uživatelů se spoléhají čtečky obrazovky číst obsah webových stránek. Čtečky obrazovky interpretovat kód přítomný na stránce a čtěte jeho obsah uživateli.

je široce používaný HTML element pro zobrazování dat strukturovaným způsobem na webových stránkách. Jeho design sahá od jednoduchých až po složité, doplněné o záhlaví řádků, sloučené záhlaví atd.

Pokud není tabulka navržena s ohledem na dostupnost, bude pro čtenáře obrazovky obtížné smysluplně přeložit data ve složitých tabulkách pro uživatele. Abychom tedy učinili složitější HTML tabulky srozumitelnějšími, pro přístupnost, musíme zajistit, aby byly jasně definovány záhlaví, skupiny sloupců, skupiny řádků atd. Níže uvidíme, jak to je v značení.

Atribut rozsahu

Dokonce i pro jednoduchý stůl

značení scope = "col" pomáhá asistenční technologii identifikovat, že buňky, které následují ve stejném sloupci, jsou jména studentů.

Podobně jako buňky

obsahující scope = "colgroup" pomáhá uživatelům identifikovat, že data v buňkách, které následují ve skupině sloupců, které přesahuje, jsou s daným předmětem spojena.

Pak je tu

značení scope = "row" který definuje, že buňky, které následují ve stejném řádku, obsahující “školní známka” informace týkající se daného jména studenta.

Řádkové skupiny

Pojďme se nyní přesunout na jiný příklad, tento příklad bude mít téměř stejnou tabulku jako ta výše uvedená, kromě toho, že budeme zaměňovat záhlaví řádků a sloupců, takže budeme moci pracovat se skupinami řádků.

tag, který jasně definuje záhlaví, můžete zlepšit jeho přístupnost pomocí rozsah a nezpůsobí žádné zmatky, které mohou vzniknout z podobných typů dat v buňkách.

  jméno zaměstnance  Kód zaměstnance  Kód projektu  Označení zaměstnance  
  John Doe  32456  456789  Ředitel  
  Miriam Lutherová  78902  456789  Zástupce ředitele

Co dělá atribut oboru? Podle W3C:

Jinými slovy nám pomáhá spojit datové buňky s jejich odpovídajícími záhlavími.

Vezměte prosím na vědomí, že ve výše uvedeném příkladu můžete přepínat

pro

. Dokud bude rozsah má hodnotu Col, bude interpretován jako odpovídající záhlaví sloupce.

rozsah atribut může mít jednu z těchto čtyř hodnot; Col, řádek, řádek, colgroup odkazovat na záhlaví sloupce, záhlaví řádku, záhlaví skupiny sloupců a záhlaví skupiny řádků.

Komplexní tabulky

Nyní přejdeme ke složitějšímu stolu.

Nahoře je tabulka, která uvádí studenty ve třídě a jejich známky v praxi a teorii pro tři předměty.

Zde je HTML kód. Tabulka byla použita řádek a colspan vytvořit sloučené záhlaví pro datové buňky.

  Jméno studenta  Biologie  Chemie  Fyzika  
  Praktický  Teorie  Praktický  Teorie  Praktický  Teorie  
  John Doe  A  A+  B  A  A  A-  
  Miriam Lutherová  A  A  C  C+  A  A-

Ve výše uvedené tabulce každá datová buňka, tj. Každá z buněk tabulky zobrazení stupně, je spojena se třemi informacemi:

Který student patří do této třídy?
Který předmět patří do této třídy?
Je tento stupeň pro část Praktická nebo Teorie?

Tyto tři informace jsou definovány ve třech různých typech buněk hlavičky strukturálně a vizuálně:

Jméno studenta
Název subjektu
Praktická nebo teorie

Pojďme definovat totéž pro přístupnost.

      Jméno studenta  Biologie  Chemie  Fyzika  
  Praktický  Teorie  Praktický  Teorie  Praktický  Teorie  
  John Doe  A  A+  B  A  A  A-  
  Miriam Lutherová  A  A  C  C+  A  A-

Ve výše uvedené značce jsme přidali rozsah na buňky obsahující informace o záhlaví datových buněk.

Skupina sloupců

Buňky biologie, chemie a fyziky mají být spojeny se skupinou dvou sloupců (teorie a praxe). Jen přidávám colspan = "2" nevytváří skupiny sloupců, pouze označuje, že konkrétní buňka má zabrat dvě mezery v buňkách.

Chcete-li vytvořit skupinu sloupců, musíte použít colgroup a potom přidejte rozpětí to, kolik sloupců obsahuje skupinu sloupců.

Jméno studenta

Biologie

John Doe

Předmět		John Doe	Miriam Lutherová
Biologie	Praktický	A	A
Biologie	Teorie	A+	A
Chemie	Praktický	B	C
Chemie	Teorie	A	C+
Fyzika	Praktický	A	A
Fyzika	Teorie	A-	A-

Nyní, když máme vzorek, se kterým pracujeme, začněme vytvořením skupin řádků, jako jsme to udělali pro skupiny sloupců v předchozím příkladu.

Skupiny řádků však nelze vytvořit pomocí značky jako colgroup protože není řádek živel.

Řádky HTML jsou obecně seskupeny pomocí , a Prvky. Jediné HTML

prvek může mít jeden , jeden a více . Použijeme více tbody V naší tabulce vytvoříme skupiny řádků a přidáme příslušný rozsah do buněk záhlaví.

Předmět		John Doe	Miriam Lutherová
Biologie	Praktický	A	A
Biologie	Teorie	A+	A
Chemie	Praktický	B	C
Chemie	Teorie	A	C+
Fyzika	Praktický	A	A
Fyzika	Teorie	A-	A-

Přidali jsme řádky “Praktický” a “Teorie” v každém tbody vytváření skupin řádků se dvěma řádky v každém. Také jsme přidali scope = "rowgroup" k buňkám obsahujícím informace o záhlaví o těchto dvou řádcích (což je název subjektu, do kterého v tomto případě patří třídy).

Nyní číst: Stejná výška sloupce s CSS