Mājas lapa » Kodēšana » Kā uzlabot HTML tabulas pieejamību ar iezīmēšanu
Kā uzlabot HTML tabulas pieejamību ar iezīmēšanu
Tīmekļa pieejamība attiecas uz tīmekļa lietojumprogrammu izstrādi tā, lai to varētu viegli izmantot cilvēki ar redzes traucējumiem. Daži no šiem lietotājiem paļaujas uz to ekrāna lasītāji lai lasītu Web lapu saturu. Ekrāna lasītāji interpretēt lapā esošo kodu un nolasīt tās saturu lietotājam.
ir plaši izmantots HTML elements, lai tīmekļa lapās attēlotu datus strukturētā veidā. Tā dizains svārstās no vienkāršām līdz sarežģītām, komplektā ar rindu virsrakstiem, apvienotām galvenēm utt.
Ja tabula nav paredzēta, ņemot vērā pieejamību, ekrāna lasītājiem būs grūti pārvērst datus sarežģītās tabulās lietotājiem. Tādēļ, lai padarītu sarežģītākas HTML tabulas vieglāk saprotamas, pieejamībai mums ir jābūt nodrošina, ka galvenes, kolonnu grupas, rindu grupas utt. ir skaidri definētas. Mēs redzēsim tālāk, kā tas ir sasniegts atzīmes.
Darbības joma
Pat vienkāršai tabulai ar
tagu, kas skaidri definē galvenes, varat uzlabot tās pieejamību darbības jomu atribūts un nedod ceļu pārpratumiem, kas var rasties no līdzīgiem datu veidiem šūnās.
darbinieka vārds
Darbinieku kods
Projekta kods
Darbinieku apzīmējums
John Doe
32456
456789
Direktors
Miriam Luther
78902
456789
Direktora vietnieks
Ko dara jomu atribūts? Saskaņā ar W3C:
Citiem vārdiem sakot, tas palīdz mums saistīt datu šūnas ar atbilstošajām galvenes šūnām.
Lūdzu, ņemiet vērā, ka iepriekš minētajā piemērā var pārslēgties
par
. Kamēr tā ir darbības jomu ir vērtība kol, to interpretēs kā atbilstošo kolonnas virsrakstu.
The darbības jomu atribūtam var būt kāda no šīm četrām vērtībām; kol, rindā, rindu grupa, colgroup atsaukties uz kolonnas galveni, rindas galveni, kolonnu virsrakstu un rindu grupu.
Sarežģītas tabulas
Tagad dosimies uz sarežģītāku tabulu.
Augstāk ir tabula, kurā uzskaitīti skolēni klasē un to pakāpes praktiski un teorētiski trīs priekšmetos.
Šeit ir HTML kods. Tabula ir izmantota rindas un colspan lai izveidotu apvienotas galvenes datu šūnām.
Studenta vārds
Bioloģija
Ķīmija
Fizika
Praktiski
Teorija
Praktiski
Teorija
Praktiski
Teorija
John Doe
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
Iepriekš minētajā tabulā katra datu šūna, ti, katra tabulas šūna pakāpes parādīšana, ir saistīts ar trīs informācijas daļām:
Kurš students pieder šai pakāpei?
Kura tēma pieder šai pakāpei?
Vai šī pakāpe ir praktiskajai vai teorijas sadaļai?
Šīs trīs ziņas strukturāli un vizuāli definē trīs dažādos galvenes šūnu veidos:
Studenta vārds
Tēmas nosaukums
Praktiska vai teorētiska
Nosakiet to pašu pieejamībai.
Studenta vārds
Bioloģija
Ķīmija
Fizika
Praktiski
Teorija
Praktiski
Teorija
Praktiski
Teorija
John Doe
A
A+
B
A
A
A-
Miriam Luther
A
A
C
C+
A
A-
Iepriekš minētajā atzīmē mēs esam pievienojuši darbības jomu šūnām, kas satur informāciju par datu šūnām.
Kolonnas grupa
Bioloģijas, ķīmijas un fizikas šūnas ir jāsaista ar divu kolonnu grupu (Theory & Practical). Vienkārši pievienojot colspan = "2" neizveido kolonnu grupas, tas tikai norāda, ka konkrētā šūna aizņem divas šūnu vērtības.
Lai izveidotu kolonnu grupu, jums jāizmanto colgroup un pēc tam pievienojiet span atribūts tam, norādot, cik kolonnu kolonnu grupa ietver.
The
Studenta vārds
iezīmēšana ar darbības joma = "col" palīdz palīgtehnoloģijām noteikt, ka tajā pašā kolonnā sekojošās šūnas ir studentu vārdi.
Līdzīgi, piemēram, šūnas
Bioloģija
satur darbības joma = "colgroup" palīdz lietotājiem identificēt, ka dati, kas atrodas šūnās, kas seko kolonnu grupai, uz kuru tas attiecas, ir saistīti ar šo konkrēto tēmu.
Tad ir
John Doe
iezīmēšana ar darbības joma = "rinda" kas nosaka, ka šūnas, kas seko tai pašā rindā, satur “pakāpe” informācija par konkrēto studenta vārdu.
Rindu grupas
Tagad ļaujiet mums pārvietoties uz citu piemēru, šajā piemērā būs gandrīz tāds pats tabula kā iepriekš, izņemot, ja mēs mainīsim rindu un kolonnu virsrakstus, tāpēc mēs varēsim strādāt ar rindu grupām.
Temats
John Doe
Miriam Luther
Bioloģija
Praktiski
A
A
Teorija
A+
A
Ķīmija
Praktiski
B
C
Teorija
A
C+
Fizika
Praktiski
A
A
Teorija
A-
A-
Tagad, kad mums ir paraugs, lai strādātu ar mums, sāksim, izveidojot rindas grupas, piemēram, iepriekšējās piemēras sleju grupām.
Tomēr rindu grupas nevar izveidot, izmantojot tādu atzīmi kā colgroup jo nav rindu grupa elementu.
HTML rindas parasti tiek sagrupētas, izmantojot , un elementiem. Viens HTML
elements var būt viens , vienu un vairāki . Mēs izmantosim vairākus tbody mūsu tabulā, lai izveidotu rindu grupas, un pievienojiet attiecīgo jomu galvenes šūnām.
Temats
John Doe
Miriam Luther
Bioloģija
Praktiski
A
A
Teorija
A+
A
Ķīmija
Praktiski
B
C
Teorija
A
C+
Fizika
Praktiski
A
A
Teorija
A-
A-
Mēs esam pievienojuši rindas “Praktiski” un “Teorija” katrā tbody rindu grupu izveide ar divām rindām katrā. Mēs arī esam pievienojuši darbības joma = "rindu grupa" uz šūnām, kas satur informāciju par šīm divām rindām (kas ir tēmas nosaukums, kas pieder šajā gadījumā).
