nl.hideout-lastation.com
Paradijs Voor Ontwerpers En Ontwikkelaars


Hoe HTML tabel toegankelijkheid te verbeteren met Markup

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 interpreteren de code die op de pagina aanwezig is en lezen 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 etc.

Als een tabel niet is ontworpen met toegankelijkheid in gedachten, zal het voor de schermlezers moeilijk zijn om de gegevens in complexe tabellen op een zinvolle manier voor de gebruikers te vertalen. Om complexe HTML-tabellen begrijpelijker te maken voor toegankelijkheid, moeten we ervoor zorgen dat de kopteksten, kolomgroepen, rijgroepen enz. Duidelijk worden gedefinieerd . We zullen hieronder zien hoe dit wordt bereikt 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

met 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="row" die definieert dat de cellen die het in dezelfde rij volgen, de "grade" -informatie bevatten met betrekking tot die specifieke studentnaam.

Rijgroepen

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

tag die de kopteksten duidelijk definieert, kunt u de toegankelijkheid ervan verbeteren met het bereikkenmerk en niet laten plaats maken voor verwarring die kan ontstaan ​​door vergelijkbare typen gegevens in de cellen.

Naam werknemer Werknemers code Projectcode Aanwijzing van werknemers
John Doe32456456789Regisseur
Miriam Luther78.902456789Adjunct-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 scope de waarde col, wordt dit geïnterpreteerd als de koptekst van de overeenkomstige kolom.

Het bereikkenmerk kan een van deze vier waarden hebben; col, row, rowgroup, colgroup om colgroup te verwijzen naar de koptekst van een kolom, een rij van een rij, een header van een groep van kolommen en een groep van rijen.

Complexe tabellen

Laten we nu verder gaan met een meer complexe tabel.

Hierboven staat een tabel met studenten in een klas en hun cijfers in praktische en theorie voor drie onderwerpen.

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

Studenten naam Biologie Chemie Fysica
praktischTheoriepraktischTheoriepraktischTheorie
John DoeEENA +BEENEENEEN-
Miriam LutherEENEENCC +EENEEN-

In de bovenstaande tabel is elke gegevenscel, die elk van de tabelcellen is die de graad weergeven, gekoppeld aan drie stukjes informatie:

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

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

  • 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 DoeEENA +BEENEENEEN-
Miriam LutherEENEENCC +EENEEN-

In de bovenstaande markup hebben we scope toegevoegd aan cellen die koersinformatie over de datacellen bevatten.

Kolomgroep

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

Als u een colgroup wilt maken, moet u colgroup en vervolgens het kenmerk span toevoegen om aan te geven hoeveel kolommen die kolomgroep bevat.

De

Student Name Biology John Doe
OnderwerpenJohn DoeMiriam Luther
BiologiepraktischEENEEN
TheorieA +EEN
ChemiepraktischBC
TheorieEENC +
FysicapraktischEENEEN
TheorieEEN-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 rowgroup element is.

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

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

Onderwerpen John Doe Miriam Luther
BiologiepraktischEENEEN
TheorieA +EEN
ChemiepraktischBC
TheorieEENC +
FysicapraktischEENEEN
TheorieEEN-EEN-

We hebben de rijen "Praktisch" en "Theorie" in elke tbody en rijgroepen gemaakt met elk twee rijen. We hebben ook de scope="rowgroup" aan de cellen met de scope="rowgroup" over die twee rijen (dit is de onderwerpnaam waartoe de rangen in dit geval behoren).

Nu lezen: gelijke kolomhoogte met CSS

Facebook Location Services: wat u moet weten

Facebook Location Services: wat u moet weten

Gebruikers van Facebook's mobiele app zijn zich er waarschijnlijk van bewust dat de app voor sociale media bepaalde locatiegebaseerde services biedt . Hiermee kunt u uw locatie delen met uw vrienden en meer recentelijk wifi-locaties in uw regio vinden.Dus hoe slaagt Facebook erin om dit te doen? Welnu, het antwoord ligt in een functie met de naam Locatievoorzieningen

(Technische en ontwerptips)

De beginnershandleiding voor CSS Object Model (CSSOM)

De beginnershandleiding voor CSS Object Model (CSSOM)

Er gebeurt veel tussen het eerste HTTP-verzoek en de uiteindelijke aflevering van een webpagina. Voor gegevensoverdracht en de renderingpijplijn van de browser zijn veel verschillende technologieën vereist, een daarvan is het CSS- objectmodel of de CSSOM .Het CSS-objectmodel neemt de CSS-code en maakt elke selector in een boomstructuur om gemakkelijker te parseren.

(Technische en ontwerptips)