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 .
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.
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; Complexe tabellenLaten 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
In de bovenstaande tabel is elke gegevenscel, die elk van de tabelcellen is die de graad weergeven, gekoppeld aan drie stukjes informatie:
Die drie informatie worden structureel en visueel gedefinieerd in drie verschillende soorten headercellen:
Laten we hetzelfde definiëren voor toegankelijkheid.
In de bovenstaande markup hebben we KolomgroepBiologie, chemie en fysica cellen moeten worden geassocieerd met een groep van twee kolommen elk (theorie en praktisch). Alleen het toevoegen vancolspan="2" maakt de kolomgroepen niet, het geeft alleen aan dat de specifieke cel twee cellen ruimte inneemt.Als u een De | Student Name | markup met Biology | met John Doe | markup met
---|
Onderwerpen | John Doe | Miriam Luther | |
---|---|---|---|
Biologie | praktisch | EEN | EEN |
Theorie | A + | 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 rowgroup
element is.
HTML-rijen worden over het algemeen gegroepeerd met behulp van ,
enOnderwerpen | John Doe | Miriam Luther | |
---|---|---|---|
Biologie | praktisch | EEN | EEN |
Theorie | A + | EEN | |
Chemie | praktisch | B | C |
Theorie | EEN | C + | |
Fysica | praktisch | EEN | EEN |
Theorie | EEN- | 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
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
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.