Slik forbedrer du HTML Table Accessibility med Markup

Webtilgjengelighet refererer til utforming av webapplikasjoner på en måte som det lett kan brukes av personer med synshemming. Noen av disse brukerne stoler på skjermlesere for å lese innholdet på nettsidene. Skjermleserne tolker koden til stede på siden og leser innholdet til brukeren .

er et mye brukt HTML-element for å vise data på en strukturert måte i websider. Dens design varierer fra enkle til komplekse, komplett med radhoder, sammenslåtte hoder etc.

Hvis et bord ikke er utformet med tilgjengelighet i tankene, vil det være vanskelig for skjermleserne å oversette dataene i komplekse tabeller meningsfylt for brukerne. Derfor, for å gjøre komplekse HTML-tabeller lettere forståelige, må vi sørge for at topptekstene, kolonnegruppene, radgruppene, osv. Er klart definert . Vi får se nedenfor hvordan dette oppnås ved oppmåling .

Omfanget Egenskap

Selv for et enkelt bord med

markup med scope="col" hjelper hjelpeteknologien å identifisere at cellene som følger i samme kolonne er navn på studenter.

Tilsvarende, celler som

inneholder scope="colgroup" hjelper brukerne til å identifisere at dataene i cellene som følger i kolonnegruppen den strekker seg over, er knyttet til det aktuelle emnet.

Så er det

markup med scope="row" som definerer at cellene følger den i samme rad, og inneholder "karakter" informasjon om det aktuelle studentnavnet.

Radgrupper

La oss nå flytte til et annet eksempel, dette eksemplet vil ha nesten det samme tabellen som den over, bortsett fra at vi bytter rad og kolonneoverskrifter, så vi kan jobbe med radgrupper.

tag som klart definerer topptekstene, kan du forbedre tilgjengeligheten med omfangsattributtet og ikke gi plass til noen forvirring som kan oppstå fra lignende typer data i cellene. ansattes navn Ansattskode Prosjektkode Ansattes betegnelse John Doe 32456 456789 Regissør Miriam Luther 78902 456789 Vise direktør Hva gjør omfanget attributt gjøre? Ifølge W3C: Med andre ord hjelper det oss å knytte datacellene sammen med de tilhørende headercellene. Vær oppmerksom på at i eksempelet ovenfor kan du bytte	til	. Så lenge scope har verdien col, tolkes det som den tilsvarende kolonneoverskriften. Omfangsattributtet kan ha noen av disse fire verdiene; col, row, rowgroup, colgroup å referere til en kolonneoverskrift, en rads overskrift, en colgroup og en gruppe av raderes overskrift. Komplekse tabeller La oss nå gå videre til et mer komplisert bord. Ovenfor er et bord som viser elevene i en klasse og deres karakterer i praktisk og teori for tre fag. Her er HTML-koden for den. Tabellen har brukt rowspan og colspan å lage sammenføyde overskrifter for dataceller. Student navn Biologi Kjemi fysikk Praktisk Teori Praktisk Teori Praktisk Teori John Doe EN A + B EN EN EN- Miriam Luther EN EN C C + EN EN- I tabellen ovenfor er hver datacelle, som er hver av tabellcellene som viser karakteren, knyttet til tre deler av informasjonen: Hvilken student tilhører denne karakteren? Hvilket fag tilhører denne karakteren? Er denne karakteren for det praktiske eller teoretiske avsnittet? Disse tre opplysningene er strukturert og visuelt definert i tre forskjellige typer header-celler: Student navn Emne navn Praktisk eller teori La oss definere det samme for tilgjengelighet. Student navn Biologi Kjemi fysikk Praktisk Teori Praktisk Teori Praktisk Teori John Doe EN A + B EN EN EN- Miriam Luther EN EN C C + EN EN- I ovennevnte markering har vi lagt til scope til celler som inneholder overskriftsinformasjon om dataceller. Kolonne Gruppe Biologi, kjemi og fysikk-celler skal tilknyttes en gruppe med to kolonner hver (teori og praktisk). Bare å legge til colspan="2" lager ikke kolonnegruppene, det indikerer bare at den aktuelle cellen skal oppta to cellers verdi for plass. For å opprette colgroup må du bruke colgroup og deretter legge til colgroup til den som angir hvor mange kolonner den kolonnenegruppen inneholder. De	Student Name	Biology		John Doe

Emne		John Doe	Miriam Luther
Biologi	Praktisk	EN	EN
	Teori	A +	EN
Kjemi	Praktisk	B	C
	Teori	EN	C +
fysikk	Praktisk	EN	EN
	Teori	EN-	EN-

Nå som vi har vår prøve å jobbe med, la oss begynne med å lage radgrupper som vi gjorde for kolonnegruppene i forrige eksempel.

Men radgrupper kan ikke opprettes ved hjelp av en tag som colgroup fordi det ikke er et rowgroup .

HTML-rader er vanligvis gruppert ved hjelp av , og elementer. En enkelt HTML

elementet kan ha en , en og flere . Vi bruker flere tbody i vårt bord for å lage radgruppene, og legge til det respektive omfanget til topptekstceller.

Emne		John Doe	Miriam Luther
Biologi	Praktisk	EN	EN
	Teori	A +	EN
Kjemi	Praktisk	B	C
	Teori	EN	C +
fysikk	Praktisk	EN	EN
	Teori	EN-	EN-

Vi har lagt til radene "Praktisk" og "Teori" i hver enkelt oppretting av radgrupper med to rader i hver. Vi har også lagt til scope="rowgroup" til cellene som inneholder overskriften informasjon om de to radene (som er scope="rowgroup" karakterene tilhører i dette tilfellet).

Nå Les: Lik kolonnehøyde med CSS