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

    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.

    De

    Studenten naam Biologie John Doe
    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).

    Nu lezen: gelijke kolomhoogte met CSS