Share
HTML-specifikationen beskriver sex rubrikelement: h1, h2, h3, h4, h5, och h6. Numret i var och en av dessa rubrikelement speglar dess prioritet, med h1 vara den mest generella och h6 vara den mest specifika.
Detta är en viktig sak att veta! WebAIMs 2017 Screen Reader-undersökning berättar att navigering via rubriker är det viktigaste sättet att personer som är beroende av assistentteknik lokaliserar information. På grund av detta är det viktigt att utforma dina hemsidor korrekt.
Denna handledning är en del av Web Accessibility: den fullständiga lärarhandboken, där vi har samlat in en rad tutorials, artiklar, kurser och e-böcker, för att hjälpa dig att förstå webbåtkomst från början.
Innan vi kommer in i det nitty-gritty av hur hjälpteknik fungerar, det finns en anledning att våra tryckta medier använder saker som kapitel, avsnitt och underavsnitt och scenbrott. Att dela upp innehåll i bitar gör det lättare att förstå, smälta, behålla och referera.
Bitar av innehåll, från The Guardian tidningenMedan webben inte skrivs lånar det alla bra saker från det. HTML-rubrikelementen är analoga med dessa skrivkonventioner. Det är en av de saker som alla tar för givet, men hjälper till med massor av människor. Kognitiva problem är utbredd och uppväger alla andra former av funktionshinder. Gruppering av innehåll i logiska bitar hjälper alla, från personer som har ett biologiskt tillstånd som demens till personer som upplever situationstörning som sömnbrist eller att lära sig en helt ny skicklighet.
Vissa typer av hjälpteknik (inklusive men inte begränsade till skärmsläsare) tillåter att människor hoppa från rubrik till rubrik på en sida. Det motsvarar vad människor som inte använder hjälpteknik gör varje dag, flitar runt en sida för att få det övergripande läget av det, stoppar när de hittar den information de söker.
Viss hjälpteknik kan ta dessa rubriker och göra dem till en ordnad lista. Denna lista kan användas för att snabbt bestämma den övergripande betydelsen av sidan.
Genererad lista över rubriker på Wikipedia-sidanOm du inte upprätthåller en logisk sekvens, säger att du går från rubrik ett till rubrik nivå tre utan att förklara en rubriknivå mellan två, kan det skapa en potentiellt förvirrande, definitivt irriterande upplevelse för den person som åberopar rubriker för att navigera. Denna lucka i den logiska sekvensen kommer att belasta användaren och tvinga dem att använda andra, mer tid och ansträngningsintensiva metoder för att navigera för att bestämma logiken för hela sidstrukturen (om någon) och om innehållet de behöver är faktiskt presenteras på sidan.
En annan viktig sak vi kan göra är att se till att det bara finns ett rubrik på första nivån per sida. Detta rubrik ska beskriva huvudpunkten för sidans innehåll. Till exempel kan en sida om franska bakverkets historia ha en första nivårubrik skrivet så här:
Historien om fransk bakverk
...
Tyvärr finns det en missuppfattning att du kan använda första nivåns rubriker för början av varje innehållsdelningselement på en sida, vilket förtroende för webbläsaren för att ta reda på resten via dokumentutskriftsalgoritmen. Denna algoritm är spekulativ fiktion - vid tidpunkten för denna artikels publicering har den ännu inte implementerats av några webbläsare. På grund av detta måste vi hylla valkretsens prioriteringar och använda andra rubrikelement.
Rubrikerna nivån två till sex bör följa rubriken på första nivån och vara författad i en sekventiell ordning som beskriver de viktigaste samtalspunkterna för sidans innehåll.
Det här är till exempel rubrikstrukturen för den här artikeln:
Genom att läsa igenom den här listan kan du snabbt avgöra vad den här artikeln handlar om. Ganska snyggt, va?
Det andra som är värt att påpeka är att rubrikerna - ungefär som hierarkiska format som JSON-kan nestas inuti andra rubriker, förutsatt att de fortskrider logiskt. Inom en rubrik på andra nivån kan du använda flera rubriker på tredje nivån. Vart och ett av dessa undernummer kan i sin tur innehålla rubriker på fjärde nivån.
När du är färdig med ett ämne kan du stänga dina kapslade rubriker. Det här är det enda stället där "hoppa" -nivåerna är acceptabla - du är klar att diskutera ett visst begrepp och återgå till ett mer allmänt ämne.
Accentsconagua
h1 Historien om fransk bakverkh2 Viktiga stunderh3 1600-taleth4 Smördegh4 Oubliesh3 17th centuryh4 Folierad konditorivarorh4 Vispgräddeh5 Prinsen av Condés kockh3 18th centuryh4 Macaronsh3 1800-taleth3 20-taleth2 Viktiga människorh3... Detta exempel visar hur det är giltigt att ha en femte nivå rubrik (Prinsen av Condé kock) följt av en tredje nivå rubrik (18th century), så länge som överordnade rubriker är i sekventiell ordning. Hade en rubrik på tredje nivån föregånde rubriken på femte nivån, det skulle ha varit ogiltigt.
Att använda för många rubriker kan skapa en överväldigande upplevelse för en person som litar på en skärmsläsare att navigera. Det kan tyckas vara lite kontraintuitivt först, med tanke på att jag bara berättade hur viktiga rubrikerna är som navigationshjälpmedel.
Tänk på det så här: mycket eftersom hur många visuella navigationsalternativ på en sida kan påverka en persons fokus och uppmärksamhet negativt, skapar för många rubriker "buller" som distraherar och förvirrar huvudpunkten du försöker förmedla.
Det finns ingen bestämd regel för hur många rubriker som är för många. Det beror helt på vad innehållet är och hur mycket av det är närvarande. Till exempel kan ett recept bara behöva namnet på maträtten, dess ingredienser och instruktioner, medan ett akademiskt papper kan kräva en mycket mer nyanserad uppdelning.
En bra rubrikstruktur gynnar mer än bara personer som använder hjälpteknik. Eftersom rubrikerna har semantisk mening kan andra tjänster ansluta sig till denna programmatiska beskrivning av innehåll och omkontextualisera den på olika användarvänliga sätt. Till exempel, här är vad Bing-sökmotorn gör med väl konstruerade sidor:
Bing sökmotor resultatI likhet med skärmsläsare genererar tjänster som Google Dokument och Dropbox Paper automatiskt en ordnad lista med rubriker så att du snabbt kan förstå och navigera i ett dokument. Många ordbehandlare kan också snabbt skapa en dynamiskt uppdaterad innehållsförteckning från rubriker, en annars tråkig och tidskrävande uppgift. Och tack vare HTML-kompatibiliteten kan vi till och med återskapa detta navigeringsbeteende som en webbläsareutvidgning!
En sak som vi alltför ofta verkar glömma är att CSS-klasserna kan tillämpas på rubrikelement, precis som alla andra HTML-element som deklareras inuti kropp.
Anledningen till att jag nämner detta är att rubrikelement används vanligtvis på grund av hur de se("Ooh! Jag gillar färgen och typsnittet av h3, Jag använder det. "), Och inte vilken prioritet av innehåll de beskriva (Brioche är en slags Viennoiserie). Det är ett utbrett problem.
I en idealiserad värld av akademisk renhet, skulle vi hedra den materiella ärligheten i rubrikelementen genom att dimensionera och utforma dem enligt den hierarki som de beskriver.
Men det här är den verkliga världen. Moderna webbplatser och webbapplikationer är komplicerade saker som bearbetas av många olika typer av människor, som alla har olika nivåer av erfarenhet, intresse, förtrogenhet och förmåga när de utformar och kodar.
Den verkliga världen kan kräva en rubrik på femte nivån som måste se ut som om det är en andra nivå, eller något helt nytt. I dessa situationer är det bättre att behålla den underliggande logiska sidstrukturen och ändra rubrikens visuella istället:
Expertvård till ett rimligt pris
Det är en trade-off, och ett erkännande att den verkliga världen är komplicerad. Detta tillvägagångssätt gynnar att bevara den viktiga delen: Intuitiv och effektiv navigering för hjälpteknik.
Metoder som användarstilar möjliggör ett ännu mer flexibelt tillvägagångssätt för att tweakera en header's visuals:
Villkor
För detta exempel förklarar jag en serie små tweaks för att justera presentationen av rubriken tills jag får det önskade visuella utseendet. I allmänhet möter du Utility-stilar på större statliga webbplatser och webbapps, där klassens låga specificitet hjälper till att garantera konsekvens.
För att hjälpa till att förstärka användningen av ordentligt beställda och kapslade rubriker kan det till och med vara värt att använda en återställning av rubrikstil för att behålla alla rubriker utan att en klass som deklareras på dem ser likadant ut.
h1, h2, h3, h4, h5, h6 färg: ärv; typsnittstorlek: 1em; linjehöjd: ärv; marginal: 0; vaddering: 0; vertikaljustering: baslinje;
Detta är en liten defensiv design som bidrar till att uppmuntra att tänka på hur ett dokuments struktur är formad över hur det utseende. Det är tänkt att deklareras efter en importerad CSS-återställning, så den kan överväga återställnings åsikter.
Det näst hårdaste problemet inom datavetenskap är namngivning av saker. Den första erkänner att du inte vet något. Jag antar inte att veta det bästa sättet att namnge rubrikklasser för din webbplats eller webbapp. Men om du använder ett icke-verktygsstilbaserat tillvägagångssätt, skulle jag rekommendera inte namnge dem .h1, .h2, .h3, etc.
Problemet med detta tillvägagångssätt är personer som inte känner till kodbasen kan tolka dessa klassnamn som instruktioner som dikterar att de behöver matcha klassnamn med rubriknivå. Detta kommer att förstärka "hur det ser ut" över "vad det beskriver" problemet.
Jag har också stött på situationer där det förstärker att det är acceptabelt att använda HTML annat än rubrikelement till rubriker för rubriker ("Ah, jag kan göra det här div ser ut som en h5!”). Inte bra!
WebAIMs 2017 Screen Reader-undersökning säger också att missade eller felaktiga rubriker är ett av de tio mest problematiska problemen som upplevs av personer som är beroende av hjälpteknik för att navigera på webben.
Detta är ett utbrett tillgänglighetsproblem med en enkel åtgärd. Ta lite tid att granska webbplatsens eller webbappsens sidor för att se om din rubrikstruktur beskriver sidan noggrant, och att den här beskrivningen följer en logisk ordning - det kan vara lika enkelt som att flytta några siffror runt!
