Sådan forbedres HTML Table Accessibility med Markup

Webtilgængelighed refererer til at designe webapplikationer på en måde, at den nemt kan bruges af personer med synshandicap. Nogle af disse brugere er afhængige af skærm læsere at læse indholdet på websiderne. Skærmlæserne fortolke koden til stede på siden og Læs indholdet til brugeren.

er et udbredt HTML element til at vise data på en struktureret måde i websider. Dens design spænder fra simple til komplekse, komplet med rækkehoveder, fusionerede overskrifter mv.

Hvis en tabel ikke er designet med tilgængelighed i tankerne, vil det være svært for skærmlæserne at oversætte dataene i komplekse tabeller meaningfully til brugerne. For at gøre komplekse HTML-tabeller lettere forståelige, skal vi derfor have adgang til tilgængelighed sørg for at overskrifterne, kolonnegrupperne, rækkegrupperne osv. er klart definerede. Vi vil se nedenfor, hvordan dette er opnået i markup.

Scope Attribut

Selv for et simpelt bord med

markere med anvendelsesområdet = "col" hjælper hjælpeteknologien med at identificere, at de celler, der følger i samme kolonne, er navne på studerende.

Tilsvarende kan celler lide

indeholdende anvendelsesområdet = "colgroup" hjælper brugerne med at identificere, at dataene i de celler, der følger i kolonnegruppen, der spænder over, er knyttet til det pågældende emne.

Så er der den

markere med anvendelsesområdet = "række" som definerer, at cellerne følger det i samme række, der indeholder “karakter” Oplysninger om det pågældende elevnavn.

Række grupper

Lad os nu flytte til et andet eksempel, dette eksempel vil have næsten det samme bord som det ovenstående, medmindre vi bytter række og kolonneoverskrifter, så vi kan arbejde sammen med rækkegrupper.

tag, der klart definerer overskrifterne, kan du forbedre dets tilgængelighed med anvendelsesområde attributt og ikke give plads til enhver forvirring, der måtte opstå fra lignende typer data i cellerne.

  Ansattes navn  Medarbejderkode  Projektkode  Medarbejderbetegnelse  
  John Doe  32456  456789  Direktør  
  Miriam Luther  78.902  456789  Vicedirektør

Hvad gør anvendelsesområdet til attributten? Ifølge W3C:

Med andre ord hjælper det os med at forbinde datacellerne med deres tilsvarende headerceller.

Bemærk venligst at i ovenstående eksempel kan du skifte

til

. Så længe det er anvendelsesområde har værdien col, det vil blive fortolket som den tilsvarende kolonneoverskrift.

Det anvendelsesområde attributten kan have en af disse fire værdier; col, række, rowgroup, colgroup at henvise til en kolonneoverskrift, en rædes overskrift, en kolonneoverskrift og en gruppe af rækkeroverskrift.

Komplekse Borde

Lad os nu gå videre til et mere komplekst bord.

Ovenstående er et bord, der angiver elever i en klasse og deres karakterer i praktisk og teori for tre fag.

Her er HTML-koden til den. Bordet har brugt rowspan og colspan at oprette fusionerede overskrifter til datacellerne.

  Elevnavn  Biologi  Kemi  Fysik  
  Praktisk  Teori  Praktisk  Teori  Praktisk  Teori  
  John Doe  EN  EN+  B  EN  EN  EN-  
  Miriam Luther  EN  EN  C  C+  EN  EN-

I ovenstående tabel er hver datacelle, som er hver af tabelcellerne viser karakteren, er forbundet med tre oplysninger:

Hvilken elev tilhører denne klasse?
Hvilket emne tilhører denne klasse?
Er denne klasse til den praktiske eller teori sektion?

Disse tre oplysninger defineres i tre forskellige typer af headerceller strukturelt og visuelt:

Elevnavn
Emne navn
Praktisk eller teori

Lad os definere det samme for tilgængelighed.

      Elevnavn  Biologi  Kemi  Fysik  
  Praktisk  Teori  Praktisk  Teori  Praktisk  Teori  
  John Doe  EN  EN+  B  EN  EN  EN-  
  Miriam Luther  EN  EN  C  C+  EN  EN-

I ovenstående markering har vi tilføjet anvendelsesområde til celler, der indeholder overskriften information om datacellerne.

Kolonne gruppe

Biologi, Kemi og Fysik celler skal associeres med en gruppe af to kolonner hver (Theory & Practical). Bare tilføje kolonnespredning = "2" opretter ikke kolonnegrupperne, det indikerer kun, at den pågældende celle skal rumme to celler.

For at oprette kolonnegruppe skal du bruge colgroup og tilføj derefter span Tilskriv det, der angiver, hvor mange kolonner den kolonnegruppe indeholder.

Det

Elevnavn

Biologi

John Doe

Emne		John Doe	Miriam Luther
Biologi	Praktisk	EN	EN
Biologi	Teori	EN+	EN
Kemi	Praktisk	B	C
Kemi	Teori	EN	C+
Fysik	Praktisk	EN	EN
Fysik	Teori	EN-	EN-

Nu hvor vi har vores prøve at arbejde med, lad os begynde med at oprette rækkegrupper som vi gjorde for kolonnegrupperne i det foregående eksempel.

Række grupper kan dog ikke oprettes ved hjælp af et tag som colgroup fordi der er nej rowgroup element.

HTML rækker er generelt grupperet ved hjælp af , og elementer. En enkelt HTML

element kan have en , en og flere . Vi bruger flere tbody i vores tabel for at oprette rækkegrupper, og tilføj det respektive anvendelsesområde til headerceller.

Emne		John Doe	Miriam Luther
Biologi	Praktisk	EN	EN
Biologi	Teori	EN+	EN
Kemi	Praktisk	B	C
Kemi	Teori	EN	C+
Fysik	Praktisk	EN	EN
Fysik	Teori	EN-	EN-

Vi har tilføjet rækkerne “Praktisk” og “Teori” i hver tbody Oprettelse af rækkegrupper med to rækker i hver. Vi har også tilføjet anvendelsesområdet = "rowgroup" til de celler, der indeholder overskriften oplysninger om de to rækker (hvilket er det fagnavn, som klasserne tilhører i dette tilfælde).

Læs nu: Lige kolonnehøjde med CSS