no.hideout-lastation.com
Paradis For Designere Og Utviklere


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 Doe32456456789Regissør
Miriam Luther78902456789Vise 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
PraktiskTeoriPraktiskTeoriPraktiskTeori
John DoeENA +BENENEN-
Miriam LutherENENCC +ENEN-

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 DoeENA +BENENEN-
Miriam LutherENENCC +ENEN-

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
EmneJohn DoeMiriam Luther
BiologiPraktiskENEN
TeoriA +EN
KjemiPraktiskBC
TeoriENC +
fysikkPraktiskENEN
TeoriEN-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
BiologiPraktiskENEN
TeoriA +EN
KjemiPraktiskBC
TeoriENC +
fysikkPraktiskENEN
TeoriEN-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

Twitter søkeresultatene skal nå vises etter relevans

Twitter søkeresultatene skal nå vises etter relevans

I mars introduserte Twitter sin algoritmiske tidslinje. Denne funksjonen fremhever og viser de mest interessante og populære tweets på en brukers tidslinje, ikke lenger i omvendt kronologisk rekkefølge. Nå vil Twitter bruke et lignende konsept til søkeresultatene, der Twitter vil gi "algoritmisk relevante tweets" fra dette punktet og fremover.I en

(Tekniske og design tips)

15 klassiske visittkort av tekniske legender

15 klassiske visittkort av tekniske legender

Mens du har mange alternativer for å legge inn et inntrykk online, frakoblet, serverer visittkortet fortsatt en primær bruk for hvordan du kan kontakte meg her. Det er mange veldig interessante visittkortdesign, men hvis du noen gang har lurt på hva visittkortene til techlegenden som Bill Gates og Steve Wozniak så ut, har vi fått en kompilasjon for deg.Nede

(Tekniske og design tips)