Kako poboljšati dostupnost tablice HTML s oznakom

Web pristupačnost odnosi se na dizajniranje web aplikacija na način da se s lakoćom mogu koristiti osobe s oštećenjima vida. Neki od tih korisnika se oslanjaju na čitači zaslona čitati sadržaj na web stranicama. Čitači zaslona interpretirati kod koji se nalazi na stranici i pročitati njegov sadržaj korisniku.

je uobičajeni HTML element za prikazivanje podataka na strukturiran način u web-stranicama. Njegov dizajn se kreće od jednostavnih do složenih, zajedno s zaglavljima redova, spajanjem zaglavlja itd.

Ako tablica nije osmišljena s obzirom na pristupačnost, čitateljima zaslona bit će teško prevesti podatke u složene tablice smisleno za korisnike. Dakle, da bismo složene HTML tablice učinili razumljivijim, za dostupnost, moramo osigurajte da su zaglavlja, skupine stupaca, skupine redova, itd. jasno definirane. U nastavku ćemo vidjeti kako je to u markupu.

Značajka opsega

Čak i za jednostavan stol s

označavanje pomoću Opseg = "col" pomaže pomoćnoj tehnologiji da utvrdi da su stanice koje slijede u istom stupcu imena učenika.

Slično tome, stanice vole

koji sadrži Opseg = "colgroup" pomaže korisnicima da utvrde da su podaci u ćelijama koje slijede u grupi stupaca iznad njih povezane s određenom temom.

Onda je tu i

označavanje pomoću Opseg = „red” koja definira da su stanice koje ga slijede u istom retku, koje sadrže “razred” informacije o tom imenu učenika.

Skupine redaka

Sada prijeđimo na drugi primjer, ovaj primjer će imati gotovo istu tablicu kao i gore navedena, osim što ćemo zamijeniti zaglavlja redaka i stupaca, tako da ćemo moći raditi s grupama reda.

oznaka koja jasno definira zaglavlja, možete poboljšati njezinu dostupnost pomoću djelokrug atribut, a ne ustupaju mjesto bilo kakvoj konfuziji koja može proizaći iz sličnih tipova podataka u ćelijama.

  ime zaposlenika  Kod zaposlenika  Projektni kod  Označavanje zaposlenika  
  John Doe  32.456  456789  Direktor  
  Miriam Luther  78.902  456789  Zamjenik direktora

Što radi atribut opsega? Prema W3C:

Drugim riječima, to nam pomaže povezati stanice podataka s njihovim odgovarajućim ćelijama zaglavlja.

Napominjemo da se u gornjem primjeru možete prebaciti

. Sve dok je njezin djelokrug ima vrijednost klanac, on će se tumačiti kao zaglavlje odgovarajućeg stupca.

djelokrug atribut može imati bilo koju od ove četiri vrijednosti; klanac, red, rowgroup, colgroup da se odnosi na zaglavlje stupca, zaglavlje retka, zaglavlje grupe stupaca i skupinu zaglavlja redaka.

Složene tablice

Sada prijeđimo na složeniji stol.

Iznad je tablica koja navodi učenike u razredu i njihove ocjene iz praktičnog i teorijskog za tri predmeta.

Ovdje je HTML kôd za njega. Tablica je korištena rowspan i colspan za stvaranje spojenih zaglavlja za ćelije podataka.

  Ime studenta  Biologija  Kemija  Fizika  
  praktičan  Teorija  praktičan  Teorija  praktičan  Teorija  
  John Doe   +  B    -  
  Miriam Luther    C  C+   -

U gornjoj tablici, svaka ćelija podataka, koja je svaka od stanica tablice prikazuje ocjenu, povezano je s tri informacije:

Koji učenik pripada ovoj ocjeni?
Kojoj temi pripada ovaj razred?
Je li ovaj razred za praktični ili teorijski dio?

Te tri informacije definiraju se u tri različite vrste ćelija zaglavlja strukturno i vizualno:

Ime studenta
Naziv predmeta
Praktična ili teorijska

Definiramo isto za pristupačnost.

      Ime studenta  Biologija  Kemija  Fizika  
  praktičan  Teorija  praktičan  Teorija  praktičan  Teorija  
  John Doe   +  B    -  
  Miriam Luther    C  C+   -

U gore navedenoj oznaci dodali smo djelokrug na ćelije koje sadrže informacije o zaglavlju podataka ćelija.

Skupina stupaca

Stanice biologije, kemije i fizike moraju biti povezane s grupom od dva stupca svaka (Theory & Practical). Samo dodajem colspan = "2" ne stvara grupe stupaca, samo ukazuje da određena ćelija zauzima prostor od dvije stanice.

Za izradu grupe stupaca morate koristiti colgroup i zatim dodajte pedalj atribut koji pokazuje koliko stupaca uključuje grupa stupaca.

Ime studenta

Biologija

John Doe

predmet		John Doe	Miriam Luther
Biologija	praktičan
Biologija	Teorija	+
Kemija	praktičan	B	C
Kemija	Teorija		C+
Fizika	praktičan
Fizika	Teorija	-	-

Sada kada naš uzorak radi s nama, počnimo sa stvaranjem grupa redova kao što smo to učinili za grupe stupaca u prethodnom primjeru.

Međutim, grupe redaka ne mogu se izraditi pomoću oznake poput colgroup jer nema rowgroup element.

HTML redovi se obično grupiraju pomoću , i elementi. Jedan HTML

element može imati jedan , jedan i više . Koristit ćemo više tbody u našoj tablici za stvaranje grupa redova i dodavanje odgovarajućeg područja u ćelije zaglavlja.

predmet		John Doe	Miriam Luther
Biologija	praktičan
Biologija	Teorija	+
Kemija	praktičan	B	C
Kemija	Teorija		C+
Fizika	praktičan
Fizika	Teorija	-	-

Dodali smo retke “praktičan” i “Teorija” u svakom tbody stvaranje grupa redaka s dva reda u svakoj. Također smo dodali Opseg = "rowgroup" u ćelije koje sadrže informacije o zaglavlju tih dvaju redaka (u ovom slučaju naziv predmeta koji pripadaju).

Sada pročitajte: Jednaka visina stupca s CSS-om