Startpagina » Coding » Hoe HTML Table Accessibility met Markup te verbeteren
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
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.
De
Studenten naam
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
Biologie
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
John Doe
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.
Onderwerpen
John Doe
Miriam Luther
Biologie
praktisch
EEN
EEN
Theorie
EEN+
EEN
Chemie
praktisch
B
C
Theorie
EEN
C+
Fysica
praktisch
EEN
EEN
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
Theorie
EEN+
EEN
Chemie
praktisch
B
C
Theorie
EEN
C+
Fysica
praktisch
EEN
EEN
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).