Hjemmeside » Coding » Slik forbedrer du HTML Table Accessibility med Markup
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
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.
De
Student navn
markere med Omfanget = "col" hjelper hjelpeteknologien til å identifisere at cellene som følger i samme kolonne er navn på studenter.
Tilsvarende, celler som
Biologi
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
John Doe
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.
Emne
John Doe
Miriam Luther
Biologi
Praktisk
EN
EN
Teori
EN+
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 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
Teori
EN+
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 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).