Cum de a îmbunătăți accesibilitatea tabelului HTML cu marcarea

Accesibilitatea web se referă la proiectarea aplicațiilor web într-un mod care să poată fi utilizat cu ușurință de către persoanele cu dizabilități vizuale. Unii dintre acești utilizatori se bazează pe cititoare de ecran pentru a citi conținutul din paginile web. Cititoarele de ecran interpretați codul prezent pe pagină și citiți conținutul acestuia către utilizator.

este un element HTML utilizat pe scară largă pentru a afișa date într-o manieră structurată în paginile web. Proiectul său variază de la cele simple până la cele complexe, completând anteturile rândului, anteturile combinate etc..

Dacă un tabel nu este conceput pentru a avea în vedere accesibilitatea, cititorii de ecran vor fi dificil să traducă în mod semnificativ datele în tabele complexe pentru utilizatori. Prin urmare, pentru a face tabele HTML complexe mai ușor de înțeles, pentru accesibilitate, trebuie asigurați-vă că sunt clar definite anteturile, grupurile de coloane, grupurile de rânduri etc.. Vom vedea mai jos cum este asta realizat în marcare.

Atributul Domeniul de aplicare

Chiar și pentru o masă simplă cu

marcare cu domeniu de aplicare = "col" ajută tehnologia de asistență să identifice faptul că celulele care urmează în aceeași coloană sunt numele studenților.

În mod similar, celulele cum ar fi

conținând domeniu de aplicare = "colgroup" ajută utilizatorii să identifice faptul că datele din celulele care urmează în grupul de coloane pe care se află sunt asociate cu acel subiect.

Apoi există

marcare cu domeniu = „rând“ care definește că celulele care îl urmează în același rând, conținând “calitate” informații referitoare la numele respectiv al elevului.

Grupuri de rânduri

Acum, să trecem la un alt exemplu, acest exemplu va avea aproape același tabel ca cel de mai sus, cu excepția faptului că vom schimba antetele rândului și coloanei, astfel încât vom putea lucra cu grupuri de rânduri.

tag-ul care definește în mod clar anteturile, puteți îmbunătăți accesibilitatea acestuia cu domeniu atribuie și nu dă drumul la orice confuzie care poate apărea din tipuri similare de date din celule. numele angajatului Codul angajatilor Codul proiectului Desemnarea angajatului John Doe 32456 456789 Director Miriam Luther 78902 456789 Director adjunct Ce face atributul de domeniu? Potrivit W3C: Cu alte cuvinte, ne ajută să asociem celulele de date cu celulele antetului lor corespunzătoare. Rețineți că în exemplul de mai sus puteți comuta	pentru	. Atâta timp cât ei domeniu are valoarea col, acesta va fi interpretat ca antetul coloanei corespunzătoare. domeniu atributul poate avea oricare dintre aceste patru valori; col, rând, rowgroup, colgroup pentru a face referire la antetul unei coloane, la antetul unui rând, la antetul grupului de coloane și la antetul unui grup de rânduri. Tabele complexe Acum, să mergem la o masă mai complexă. Mai sus este un tabel care listează elevii într-o clasă și notele lor în practică și teorie pentru trei subiecte. Iată codul HTML pentru acesta. Tabelul a folosit rowspan și colspan pentru a crea antete fuzionate pentru celulele de date. Numele studentului Biologie Chimie Fizică Practic Teorie Practic Teorie Practic Teorie John Doe A A+ B A A A- Miriam Luther A A C C+ A A- În tabelul de mai sus, fiecare celulă de date, adică fiecare dintre celulele din tabel afișând nota, este asociat cu trei informații: La care elev îi aparține acest grad? La ce subiect aparține acest grad? Este acest grad pentru secțiunea Practică sau Teorie? Aceste trei informații sunt definite în trei tipuri diferite de celule antet structurale și vizual: Numele studentului Nume subiect Practică sau teorie Să definim același lucru pentru accesibilitate. Numele studentului Biologie Chimie Fizică Practic Teorie Practic Teorie Practic Teorie John Doe A A+ B A A A- Miriam Luther A A C C+ A A- În marcajul de mai sus am adăugat domeniu la celule care conțin informații privind poziția despre celulele de date. Grupul de coloane Celulele de biologie, chimie și fizică urmează să fie asociate cu un grup de câte două coloane (Teoria și practica). Adăugați colspan = "2" nu creează grupele de coloane, ci doar indică faptul că respectiva celulă trebuie să ocupe spațiul de două celule. Pentru a crea un grup de coloane, trebuie să utilizați colgroup și apoi adăugați deschidere atribuiți acestuia indicând câte coloane include grupul de coloane.	Numele studentului	Biologie		John Doe

Subiect		John Doe	Miriam Luther
Biologie	Practic	A	A
	Teorie	A+	A
Chimie	Practic	B	C
	Teorie	A	C+
Fizică	Practic	A	A
	Teorie	A-	A-

Acum, când avem proba noastră să lucrăm, să începem prin crearea de grupuri de rânduri ca și noi pentru grupele de coloane din exemplul anterior.

Cu toate acestea, grupurile de rânduri nu pot fi create utilizând o etichetă ca colgroup pentru că nu există rowgroup element.

Rândurile HTML sunt în general grupate folosind , și elemente. Un singur HTML

elementul poate avea unul , unu și multiple . Vom folosi mai multe tbody în tabelul nostru pentru a crea grupurile de rânduri și adăugați domeniul de aplicare respectiv la celulele antetului.

Subiect		John Doe	Miriam Luther
Biologie	Practic	A	A
	Teorie	A+	A
Chimie	Practic	B	C
	Teorie	A	C+
Fizică	Practic	A	A
	Teorie	A-	A-

Am adăugat rândurile “Practic” și “Teorie” în fiecare tbody crearea de grupuri de rânduri cu două rânduri în fiecare. De asemenea, am adăugat domeniu de aplicare = "rowgroup" la celule care conțin informații despre aceste două rânduri (care este numele subiectului în care apar notele).

Citiți acum: Înălțimea egală a coloanei cu CSS