Så här förbättrar du HTML-tabellens tillgänglighet med Markup

Webbtillgänglighet avser utformning av webbapplikationer på ett sätt som det enkelt kan användas av personer med visuella funktionshinder. Några av dessa användare är beroende av skärmsläsare att läsa ut innehållet på webbsidorna. Skärmsläsarna tolka koden som finns på sidan och läs ut innehållet till användaren.

är ett allmänt använt HTML-element för att visa data på ett strukturerat sätt i webbsidor. Dess design sträcker sig från enkla till komplexa, komplett med radhuvud, sammanslagna rubriker etc..

Om ett bord inte är utformat med tillgänglighet i åtanke, blir det svårt för skärmsläsare att översätta data i komplexa tabeller meningsfullt för användarna. Därför, för att göra komplexa HTML-tabeller lättare förståeliga, för tillgänglighet måste vi se till att rubrikerna, kolumngrupperna, radgrupperna etc. är tydligt definierade. Vi får se nedan hur det här är uppnådd i markup.

Omfattningsattributet

Även för ett enkelt bord med

markera med omfattning = "col" hjälper hjälpmedlen att identifiera att cellerna som följer i samma kolumn är namn på studenter.

På liknande sätt gillar celler

som innehåller omfattning = "colgroup" hjälper användarna att identifiera att data i cellerna som följer i kolumngruppen som spänner över är associerade med det aktuella ämnet.

Då finns det

markera med omfattning = "rad" som definierar att cellerna följer den i samma rad, innehållande “kvalitet” information om det aktuella studentnamnet.

Radgrupper

Låt oss nu flytta till ett annat exempel, det här exemplet kommer att ha nästan samma tabell som ovanstående, förutom att vi byter rad och kolumnrubriker, så vi kan arbeta med radgrupper.

tagg som tydligt definierar rubrikerna, du kan förbättra tillgängligheten med omfattning attribut och inte ge plats för någon förvirring som kan uppstå av liknande typer av data i cellerna.

  Anställd Namn  Anställningskod  Projektkod  Anställningsbeteckning  
  John Doe  32456  456789  Direktör  
  Miriam Luther  78.902  456789  Biträdande direktör

Vad gör omfattningsattributet? Enligt W3C:

Med andra ord hjälper det oss att associera datacellerna med sina motsvarande huvudceller.

Observera att i ovanstående exempel kan du växla

för

. Så länge dess omfattning har värdet col, Det kommer att tolkas som motsvarande kolumnrubrik.

De omfattning attributet kan ha något av dessa fyra värden; col, rad, rowgroup, colgroup för att hänvisa till en kolumnhuvud, en rads rubrik, en kolumnrubrik respektive en rubrik av raderhuvud.

Komplexa tabeller

Låt oss nu gå vidare till ett mer komplext bord.

Ovanstående är ett bord som listar elever i en klass och deras betyg i praktik och teori för tre ämnen.

Här är HTML-koden för den. Bordet har använt rowspan och colspan att skapa sammanslagna rubriker för datacellerna.

  Elevs namn  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 tabellen ovan är varje datacell, det vill säga varje tabellcell visar betyget, är förknippad med tre delar av informationen:

Vilken elev tillhör den här betygen?
Vilket ämne hör till denna klass?
Är denna klass för avsnittet Praktiskt eller Teoretiskt?

Dessa tre uppgifter definieras i tre olika typer av huvudceller strukturellt och visuellt:

Elevs namn
Ämnesnamn
Praktisk eller teori

Låt oss definiera samma för tillgänglighet.

      Elevs namn  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 ovanstående markering har vi lagt till omfattning till celler som innehåller rubrikinformation om datacellerna.

Kolumngrupp

Biologi, kemi och fysik celler ska associeras med en grupp av två kolumner vardera (teori och praktik). Bara lägga till colspan = "2" skapar inte kolumngrupperna, det indikerar bara att den specifika cellen är att rymma två cells värde.

För att skapa kolumngrupp måste du använda colgroup och lägg sedan till spänna ange det som anger hur många kolumner som kolumngruppen innehåller.

Elevs namn

Biologi

John Doe

Ämne		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 när vi har vårt prov att arbeta med, låt oss börja med att skapa radgrupper som vi gjorde för kolumngrupperna i föregående exempel.

Rörgrupper kan emellertid inte skapas med en tagg som colgroup eftersom det finns nej rowgroup element.

HTML rader brukar grupperas med , och element. En enda HTML

element kan ha en , ett och flera . Vi använder flera tbody i vårt bord för att skapa radgrupper, och lägg till respektive räckvidd till huvudceller.

Ämne		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 lagt till raderna “Praktisk” och “Teori” i varje tbody skapa radgrupper med två rader i vardera. Vi har också lagt till omfattning = "rowgroup" till cellerna som innehåller rubriken information om de två raderna (vilket är ämnesnamnet kvaliteterna tillhör i det här fallet).

Läs nu: Lika kolumnhöjd med CSS