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

    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.

    De

    Student navn Biologi John Doe
    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).

    Nå Les: Lik kolonnehøyde med CSS