Hoe HTML Table Accessibility met Markup te verbeteren

Webtoegankelijkheid verwijst naar het ontwerpen van webapplicaties op een manier dat het met gemak kan worden gebruikt door mensen met een visuele handicap. Sommige van deze gebruikers vertrouwen op schermlezers om de inhoud op de webpagina's voor te lezen. De schermlezers interpreteer de code die op de pagina aanwezig is en lees de inhoud ervan voor aan de gebruiker.

is een veel gebruikt HTML-element om gegevens op een gestructureerde manier weer te geven op webpagina's. Het ontwerp varieert van eenvoudige tot complexe, compleet met rij-headers, samengevoegde headers, enz.

Als een tabel niet is ontworpen met toegankelijkheid in het achterhoofd, zal het voor de schermlezers moeilijk zijn om de gegevens in complexe tabellen betekenisvol voor de gebruikers te vertalen. Om complexe HTML-tabellen eenvoudiger te begrijpen en toegankelijk te maken, moeten we dat daarom doen zorg ervoor dat de kopteksten, kolomgroepen, rijgroepen, enz. duidelijk zijn gedefinieerd. We zullen hieronder zien hoe dit is behaald in markup.

Het bereikkenmerk

Zelfs voor een eenvoudige tafel met

markup met scope = "col" helpt de ondersteunende technologie te identificeren dat de cellen die in dezelfde kolom volgen namen van studenten zijn.

Op dezelfde manier houden cellen van

bevattende scope = "colgroup" helpt gebruikers bij het identificeren dat de gegevens in de cellen die volgen in de kolomgroep die het overspant, aan dat specifieke onderwerp zijn gekoppeld.

Dan is er de

markup met scope = "rij" die definieert dat de cellen die het in dezelfde rij volgen, het bevat “rang” informatie over die specifieke studentnaam.

Rijgroepen

Laten we nu naar een ander voorbeeld gaan, dit voorbeeld heeft bijna dezelfde tabel als hierboven, behalve dat we rij- en kolomkoppen zullen verwisselen, zodat we kunnen werken met rijgroepen.

tag die duidelijk de headers definieert, kunt u de toegankelijkheid ervan verbeteren met de strekking attribuut en maak geen ruimte voor verwarring die kan ontstaan door vergelijkbare soorten gegevens in de cellen.

  Naam werknemer  Werknemers code  Projectcode  Aanwijzing van werknemers  
  John Doe  32456  456789  Regisseur  
  Miriam Luther  78.902  456789  Adjunct-directeur

Wat doet het scope-attribuut? Volgens W3C:

Met andere woorden, het helpt ons de datacellen te associëren met hun overeenkomstige headercellen.

Houd er rekening mee dat u in het bovenstaande voorbeeld kunt schakelen

voor

. Zolang het is strekking heeft de waarde col, het zal worden geïnterpreteerd als de header van de overeenkomstige kolom.

De strekking attribuut kan een van deze vier waarden hebben; col, rij, rowgroup, colgroup om te verwijzen naar respectievelijk de koptekst van een kolom, een kop van een rij, een koptekst van een groep kolommen en een kop van een groep rijen.

Complexe tabellen

Laten we nu verder gaan met een meer complexe tabel.

Hierboven ziet u een tabel met studenten in een klas en hun cijfers in praktische en theorie over drie onderwerpen.

Hier is de HTML-code voor. De tafel heeft gebruikt rowspan en colspan om samengevoegde headers voor de datacellen te maken.

  Studenten naam  Biologie  Chemie  Fysica  
  praktisch  Theorie  praktisch  Theorie  praktisch  Theorie  
  John Doe  EEN  EEN+  B  EEN  EEN  EEN-  
  Miriam Luther  EEN  EEN  C  C+  EEN  EEN-

In de bovenstaande tabel, elke gegevenscel, die elk van de tabelcellen is het cijfer weergeven, wordt geassocieerd met drie stukjes informatie:

Tot welke student behoort dit cijfer?
Tot welk onderwerp behoort dit cijfer?
Is dit cijfer voor de sectie Praktisch of Theorie?

Die drie informatie worden structureel en visueel in drie verschillende soorten headercellen gedefinieerd:

Studenten naam
Onderwerp
Praktisch of theorie

Laten we hetzelfde definiëren voor toegankelijkheid.

      Studenten naam  Biologie  Chemie  Fysica  
  praktisch  Theorie  praktisch  Theorie  praktisch  Theorie  
  John Doe  EEN  EEN+  B  EEN  EEN  EEN-  
  Miriam Luther  EEN  EEN  C  C+  EEN  EEN-

In de bovenstaande markup hebben we toegevoegd strekking naar cellen die koersinformatie over de gegevenscellen bevatten.

Kolomgroep

Biologie, chemie en fysica cellen moeten worden geassocieerd met een groep van twee kolommen elk (theorie en praktisch). Gewoon toevoegen colspan = "2" maakt geen kolomgroepen aan, het geeft alleen aan dat de specifieke cel twee cellen ruimte inneemt.

Om een kolomgroep te maken, moet u gebruiken colgroup en voeg dan de span attribuut erop, die aangeeft hoeveel kolommen die kolomgroep bevat.

Studenten naam

Biologie

John Doe

Onderwerpen		John Doe	Miriam Luther
Biologie	praktisch	EEN	EEN
Biologie	Theorie	EEN+	EEN
Chemie	praktisch	B	C
Chemie	Theorie	EEN	C+
Fysica	praktisch	EEN	EEN
Fysica	Theorie	EEN-	EEN-

Nu we ons voorbeeld hebben om mee te werken, beginnen we met het maken van rijgroepen zoals we deden voor de kolomgroepen in het vorige voorbeeld.

Row-groepen kunnen echter niet worden gemaakt met een tag zoals colgroup omdat er geen is rowgroup element.

HTML-rijen worden over het algemeen gegroepeerd met behulp van , en elementen. Een enkele HTML

element kan er een hebben , een en meerdere . We zullen meerdere gebruiken tbody in onze tabel om de rijgroepen te maken en de respectieve reikwijdte toe te voegen aan de koptekstcellen.

Onderwerpen		John Doe	Miriam Luther
Biologie	praktisch	EEN	EEN
Biologie	Theorie	EEN+	EEN
Chemie	praktisch	B	C
Chemie	Theorie	EEN	C+
Fysica	praktisch	EEN	EEN
Fysica	Theorie	EEN-	EEN-

We hebben de rijen toegevoegd “praktisch” en “Theorie” in elke tbody rijgroepen maken met elk twee rijen. We hebben ook de scope = "rowgroup" naar de cellen met de kopinformatie over die twee rijen (wat de onderwerpnaam is waartoe de rangen behoren in dit geval).

Nu lezen: gelijke kolomhoogte met CSS