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 stole på skjermlesere å lese innholdet på nettsidene. Skjermleserne tolk koden til stede på siden og les ut 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 osv.

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, for tilgjengelighet, må vi sørge for at topptekstene, kolonnegruppene, radgruppene, etc. er klart definert. Vi ser nedenfor hvordan dette er oppnådd i markup.

Omfanget Egenskap

Selv for et enkelt bord med

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

Tilsvarende, celler som

inneholder Omfanget = "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

markere med Omfanget = "rad" som definerer at cellene følger den i samme rad, som inneholder “grade” informasjon om det aktuelle studentenavnet.

Radgrupper

La oss nå flytte til et annet eksempel, dette eksempelet 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 omfang attributt og ikke gi vei til noen forvirring som kan oppstå fra lignende typer data i cellene.

  arbeidstakers 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 med de tilhørende headercellene.

Vær oppmerksom på at i eksempelet ovenfor kan du bytte

til

. Så lenge det er omfang har verdien col, det vil bli tolket som den tilsvarende kolonneoverskriften.

De omfang Attributt kan ha noen av disse fire verdiene; col, rad, rowgroup, colgroup å referere til en kolonneoverskrift, en rads overskrift, en kolonneoverskrift og en gruppe av raderes overskrift.

Komplekse tabeller

La oss nå gå videre til et mer komplekst 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. Bordet har brukt rowspan og colspan å opprette fusjonerte overskrifter for dataceller.

  Student navn  Biologi  Kjemi  fysikk  
  Praktisk  Teori  Praktisk  Teori  Praktisk  Teori  
  John Doe  EN  EN+  B  EN  EN  EN-  
  Miriam Luther  EN  EN  C  C+  EN  EN-

I tabellen ovenfor er hver datacelle, som er hver av tabellcellene viser karakteren, er knyttet til tre deler av informasjonen:

Hvilken elev tilhører denne karakteren?
Hvilket emne tilhører denne karakteren?
Er denne karakteren for Praktisk eller Teori-delen?

Disse tre opplysningene er strukturert og visuelt definert i tre forskjellige typer topptekstceller:

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  EN+  B  EN  EN  EN-  
  Miriam Luther  EN  EN  C  C+  EN  EN-

I ovennevnte markering har vi lagt til omfang til celler som inneholder overskriftinformasjon om dataceller.

Kolonne Gruppe

Biologi, kjemi og fysikk-celler skal tilknyttes en gruppe med to kolonner hver (teori og praktisk). Bare legger til colspan = "2" Oppretter ikke kolonnegruppene, det indikerer bare at den aktuelle cellen skal okkupert to celler til plass.

For å opprette kolonnegruppe må du bruke colgroup og legg deretter til span Tilordne det som angir hvor mange kolonner den kolonnegruppen inneholder.

Student navn

Biologi

John Doe

Emne		John Doe	Miriam Luther
Biologi	Praktisk	EN	EN
Biologi	Teori	EN+	EN
Kjemi	Praktisk	B	C
Kjemi	Teori	EN	C+
fysikk	Praktisk	EN	EN
fysikk	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 er nei rowgroup element.

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 legg til respektive omfang til topptekstceller.

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

Vi har lagt til radene “Praktisk” og “Teori” i hver tbody opprette radgrupper med to rader i hver. Vi har også lagt til Omfanget = "rowgroup" til cellene som inneholder overskriften informasjon om de to radene (som er fagnavnet karakterene tilhører i dette tilfellet).

Nå Les: Lik kolonnehøyde med CSS