Share
De HTML-specificatie beschrijft zes headingelementen: h1, h2, h3, h4, h5, en h6. Het nummer in elk van deze headingelementen geeft de prioriteit ervan weer, met h1 de meest algemene en h6 het meest specifiek zijn.
Dit is belangrijk om te weten! WebAIM's Screen Reader-enquête uit 2017 vertelt ons dat navigeren via koppen de belangrijkste manier is waarop mensen die op hulptechnologie vertrouwen informatie kunnen vinden. Daarom is het belangrijk om de koppen van uw website op de juiste manier te maken.
Deze zelfstudie maakt deel uit van Web Accessibility: de complete leergids, waar we een reeks zelfstudies, artikelen, cursussen en e-boeken hebben verzameld, zodat u de webtoegankelijkheid vanaf het begin beter begrijpt.
Voordat we ingaan op de precieze manier waarop ondersteunende technologie werkt, is er een reden waarom onze gedrukte media dingen gebruiken als hoofdstukken, secties en subsecties en scène-einden. Door de inhoud op te splitsen in stukjes, is het gemakkelijker te begrijpen, te verteren, te behouden en te verwijzen.
Stukjes inhoud, uit de krant The GuardianHoewel het web niet wordt afgedrukt, leent het alle goede dingen eruit - HTML-headingelementen zijn analoog aan deze afdrukconventies. Het is een van die dingen die iedereen als vanzelfsprekend beschouwt, maar een heleboel mensen helpt. Cognitieve problemen zijn wijdverbreid en opwegen tegen elke andere vorm van invaliditeit. Het groeperen van inhoud in logische brokken helpt iedereen, van mensen met een biologische aandoening zoals dementie, bij mensen die een situationele beperking ervaren, zoals slaapgebrek of het leren van een volledig nieuwe vaardigheid.
Bepaalde soorten ondersteunende technologie (inclusief, maar niet beperkt tot, schermlezers) laten mensen van rubriek naar kop op een pagina springen. Het is het equivalent van wat mensen die geen assistentie-technologie gebruiken elke dag doen, rond een pagina flitsen om de algemene strekking te krijgen, stoppen wanneer ze de informatie vinden waarnaar ze op zoek zijn.
Sommige ondersteunende technologie kan deze rubrieken opnemen en ze in een geordende lijst veranderen. Deze lijst kan worden gebruikt om snel de algemene betekenis van de pagina te bepalen.
Gegenereerde lijst met koppen op Wikipedia-paginaAls u geen logische volgorde aanhoudt, bijvoorbeeld van kopniveau een naar kopniveau drie gaan zonder een kopniveau van twee ertussen te declareren, kan dit een mogelijk verwarrende, absoluut vervelende ervaring creëren voor de persoon die vertrouwt op koppen om te navigeren. Deze kloof in de logische volgorde plaatst de belasting voor de gebruiker, dwingt hen om andere, meer tijd en inspanning-intensieve methoden te gebruiken om te navigeren om de logica te bepalen voor de algehele paginastructuur (indien aanwezig) en als de inhoud die ze nodig hebben feitelijk is aanwezig op de pagina.
Een ander belangrijk ding dat we kunnen doen is ervoor zorgen dat er alleen is een eerste niveau rubriek per pagina. Deze kop moet het belangrijkste punt van de inhoud van de pagina beschrijven. Een pagina over de geschiedenis van Frans gebak kan bijvoorbeeld een kop op het eerste niveau hebben die als volgt is geschreven:
De geschiedenis van het Franse gebak
...
Helaas bestaat er een misvatting dat u koppen van het eerste niveau kunt gebruiken voor het begin van elk element voor het delen van inhoud op een pagina, vertrekkende dat de browser de rest doorzoekt via het documentoverzichtsenalgoritme. Dit algoritme is speculatieve fictie - ten tijde van de publicatie van dit artikel moest het nog worden geïmplementeerd door ieder browser. Daarom moeten we de prioriteit van de kiesdistricten respecteren en de andere rubrieken gebruiken.
Kopteksten twee tot en met zes moeten de kop van het eerste niveau volgen en worden geschreven in een opeenvolgende volgorde waarin de belangrijkste sprekende punten van de inhoud van de pagina worden beschreven.
Dit is bijvoorbeeld de kopstructuur voor dit artikel:
Door deze lijst te lezen, kun je snel bepalen waar dit artikel over gaat. Behoorlijk goed, he?
Het andere dat het vermelden waard is, is dat koppen - net als hiërarchische formaten zoals JSON - kunnen worden genest in andere rubrieken, op voorwaarde dat ze logisch verlopen. Binnen een kop van het tweede niveau kunt u meerdere koppen op het derde niveau gebruiken. Elk van deze subkoppen kan op zijn beurt geneste subkoppen van het vierde niveau hebben.
Als u klaar bent met een onderwerp, kunt u uw geneste koppen sluiten. Dit is de enige plaats waar het overslaan van koersniveaus acceptabel is - je bent klaar met het bespreken van een specifiek concept en teruggaan naar een meer algemeen onderwerp.
Accentsconagua
h1 De geschiedenis van het Franse gebakh2 Belangrijke momentenh3 De 16e eeuwh4 Bladerdeegh4 Oubliesh3 De 17e eeuwh4 Foliated gebakjeh4 Slagroomh5 De chef-kok van de prins van Condéh3 De 18e eeuwh4 macaronsh3 De 19e eeuwh3 De 20e eeuwh2 Belangrijke mensenh3... Dit voorbeeld laat zien hoe het geldig is om een kop op het vijfde niveau te hebben (de chef van de Prins van Condé) gevolgd door een kop op het derde niveau (de 18e eeuw), zolang de bovenliggende rubrieken in een sequentiële volgorde staan. Als een kop van het derde niveau voorafging aan de kop van het vijfde niveau, zou deze ongeldig zijn geweest.
Het gebruik van te veel koppen kan een overweldigende ervaring creëren voor een persoon die afhankelijk is van schermlezers om te navigeren. In eerste instantie lijkt dit een beetje contra-intuïtief, aangezien ik je net heb verteld hoe belangrijk koppen zijn als navigatiehulpmiddel.
Zie het op deze manier: hoe veel te veel visuele navigatieopties op een pagina de focus en aandacht van een persoon negatief kunnen beïnvloeden, te veel koppen creëren "ruis" die het belangrijkste punt dat u probeert over te brengen afleidt en verdoezelt.
Er is geen vaste regel voor hoeveel kopjes er te veel zijn. Het hangt helemaal af van wat de inhoud is en hoeveel ervan aanwezig is. Een recept heeft bijvoorbeeld alleen de naam van het gerecht, de ingrediënten en instructies nodig, terwijl een academisch artikel een veel genuanceerdere indeling kan vereisen..
Een goede koersstructuur biedt meer voordelen dan alleen mensen die ondersteunende technologie gebruiken. Omdat koppen een semantische betekenis hebben, kunnen andere services inhaken op deze programmatische beschrijving van inhoud en deze op verschillende gebruiksvriendelijke manieren opnieuw contextualiseren. Dit is bijvoorbeeld wat de Bing-zoekmachine doet met goed geconstrueerde pagina's:
Bing-zoekmachine resultaatNet als schermlezers, zullen services zoals Google Docs en Dropbox Paper automatisch een geordende lijst met koppen genereren, zodat je snel een document kunt begrijpen en navigeren. Veel tekstverwerkers kunnen ook snel een dynamisch bijgewerkte inhoudsopgave genereren van koppen, een anders saaie en tijdrovende taak. En dankzij de interoperabiliteit van HTML kunnen we dit gedrag voor navigeren per kop opnieuw maken als een browserextensie!
Een ding dat we maar al te vaak lijken te vergeten is dat CSS-klassen kunnen worden toegepast op heading-elementen, net als elk ander HTML-element dat in de lichaam.
De reden dat ik dit noem is dat heading-elementen vaak worden gebruikt vanwege hoe ze kijken("Ooh, ik hou van de kleur en het lettertype van de h3, Ik gebruik dat. "), En niet de prioriteit van de inhoud beschrijven (Brioche is een soort Viennoiserie). Het is een wijdverbreid probleem.
In een geïdealiseerde wereld van academische zuiverheid, eren we de materiële eerlijkheid van rubriekselementen door ze te dimensioneren en vorm te geven volgens de hiërarchie die ze beschrijven.
Dit is echter de echte wereld. Moderne websites en web-apps zijn ingewikkelde dingen waaraan veel verschillende mensen hebben gewerkt, die allemaal verschillende niveaus van ervaring, interesse, bekendheid en mogelijkheden hebben bij het ontwerpen en coderen.
De echte wereld kan bellen naar een kop van het vijfde niveau die eruit moet zien als een rubriek op het tweede niveau of iets geheel nieuws. In deze situaties is het beter om de onderliggende logische paginastructuur te behouden en in plaats daarvan de visuals van de kop te wijzigen:
Deskundige zorg voor een redelijke prijs
Het is een wisselwerking en een erkenning dat de echte wereld gecompliceerd is. Deze benadering bevordert het behoud van het belangrijke deel: intuïtieve en efficiënte navigatie voor hulptechnologie.
Methodologieën zoals utiliteitsstijlen maken een nog flexibeler benadering mogelijk voor het aanpassen van de afbeeldingen van een header:
Voorwaarden
Voor dit voorbeeld verklaar ik een reeks kleine tweaks om de presentatie van de kop aan te passen totdat ik de gewenste visuele uitstraling heb. Over het algemeen zult u Utility-stijlen tegenkomen op grotere, door de staat gestuurde websites en web-apps, waar de lage specificiteit van de klassen consistentie garandeert.
Om te helpen het gebruik van goed geordende en geneste koppen te versterken, kan het zelfs de moeite lonen om een kopstijlreset te gebruiken om alle koppen te behouden zonder dat een klasse erop staat die er hetzelfde uit ziet.
h1, h2, h3, h4, h5, h6 kleur: erven; lettergrootte: 1em; regelhoogte: overnemen; marge: 0; opvulling: 0; vertical-align: basislijn;
Dit is een klein defensief ontwerp dat helpt aanmoedigen om na te denken over de structuur van een document gevormd over hoe het looks. Het is de bedoeling dat het wordt gedeclareerd na een geïmporteerde CSS-reset, zodat het de mening van de reset kan negeren.
Het tweede moeilijkste probleem in de informatica is dingen noemen. De eerste is toegeven dat je iets niet weet. Ik ga er niet van uit dat ik weet wat de beste manier is om stijlklassen voor uw website of web-app te benoemen. Als u echter een niet op utiliteiten gebaseerde stijlbenadering gebruikt, zou ik aanraden niet ze benoemen .h1, .h2, .h3, enz.
Het probleem met deze aanpak is dat mensen die niet bekend zijn met de codebase deze klassenamen kunnen interpreteren als instructies die vereisen dat de klassenaam moet overeenkomen met het koersniveau. Dit zal het "hoe het eruit ziet" over het "wat het beschrijft" probleem versterken.
Ik ben ook situaties tegengekomen waarin wordt bevestigd dat het acceptabel is om HTML te gebruiken, anders dan rubriekelementen, om kopteksten te maken ("Ah, ik kan dit maken div eruit zien als een h5!“). Niet goed!
De Screen Reader-enquête van WebAIM uit 2017 vertelt ons ook dat ontbrekende of onjuiste koppen een van de tien meest problematische problemen zijn die mensen ondervinden die op hulptechnologie vertrouwen om op internet te navigeren.
Dit is een wijdverspreid toegankelijkheidsprobleem met een eenvoudige oplossing. Neem even de tijd om de pagina's van uw website of webapp door te nemen om te zien of uw koersstructuur de pagina nauwkeurig beschrijft, en dat deze beschrijving een logische volgorde volgt - het kan net zo eenvoudig zijn als een aantal cijfers verplaatsen!
