Skapa rubriker med h-element
Märk upp rubriker med h1, h2 och så vidare. Undvik att särskilja en rubrik från brödtext enbart genom formgivning. Det gör det nämligen svårare för personer med vissa hjälpmedel att navigera på sidan, och svårare för sökmotorer att avgöra vad sidan handlar om.
Rekommendationer för att skapa tillgängliga rubrikerLänk hit
- Märk upp rubriker korrekt, med rätt hierarkisk ordning.
- Välj inte rubriknivå efter textstorleken i webbläsarna. Utgå från semantiken och använd CSS för att styra presentationen.
Varför är detta viktigt?Länk hit
Korrekt användning av rubriker bidrar till att
- presentationen blir enhetlig på webbplatsens alla sidor
- det blir lättare att läsa dokumentet utan stilmallar
- sökmotorer hittar relevant information på sidorna
- användaren får en överblick över dokumentet
- vissa webbläsare och hjälpmedel kan skapa en automatisk innehållsförteckning.
Hjälpmedel behöver en korrekt strukturkod, för att kunna beskriva för användarna vad som är en rubrik. En h1-rubrik ska normalt vara rubriken för hela dokumentet, och bara förekomma en gång i koden, som första rubrik. Dokument som innehåller flera separata ämnen kan dock ha flera h1-rubriker.
Sökmotorer utnyttjar var ett ord finns i dokumentet för att avgöra hur relevant dokumentet är för en sökning med det ordet. Ord i h1- eller h2-element anses ha högre relevans än ord i brödtext.
Rubrikelement ska givetvis inte missbrukas för sökmotoroptimering. Sökmotorernas algoritmer kan genomskåda sådana försök.
HTML5 erbjuder ett alternativt sätt att strukturera dokument och rubriker, via section-element. Varje sektion får då sin egen rubrikhierarki med början på h1. Det här är dock inte implementerat i alla webbläsare och hjälpmedel ännu, så använd h1–h6 tillsvidare.
MätbarhetLänk hit
Opera har en funktion för att skapa en innehållsförteckning baserad på dokumentets h-rubriker. Då kan du se om det saknas rubriker, för att de inte är korrekt märkta.
W3C:s HTML-validerare kan också generera en outline av dokumentet utifrån rubrikerna.
ReferenserLänk hit
Se även R82 Använd stilmallar för att separera presentationen från innehållet och R61 Skriv tydliga och informativa rubriker
TerminologiLänk hit
Termen semantik beskrivs i terminologiavsnittet under R82 Använd stilmallar för att separera presentationen från innehållet.
Kommentarer till denna riktlinje
Kommentarer (7)
Hej
i html5 kan man bygga upp egna rubrikstrukturer (h1-h6) inuti en section-tag till exempel.
Vilka fördelar och nackdelar finns det? när man använda den nya html5 sättet i jämförelse mot den gamla där man har en unik h1.
Riskerar man att få en sämre tillgänglighet för exempelvis skärmläsare om man använder html5 varianten?
Bra fråga Mikael!
Det finns faktiskt en hel webbplats som fördjupar sig i denna fråga: http://accessiblehtmlheadings.com/
Försöker sammanfatta på svenska:
Rubriker är ett av de bästa sätten att snabbt orientera sig på en sida med hjälp av skärmläsare. Det finns flera sätt att koda rubriker som är godkända i html5-specen, men inte alla medför smidig navigation med dagens skärmläsare. Exakt vad som blir bäst varierar något, så det bästa är att provnavigera sin sida med skärmläsare, men som tumregel: Försök att även i fortsättningen använda h1 – h6 för att ange rubriknivå, trots att den information som finns i gör att det är formellt OK att t.ex. använda bara h1 för alla rubriknivåer.
Kan någon som dagligen använder skärmläsare kommentera och kanske förtydliga eller korrigera mig så vore det toppen!
[…] Riktlinje nr 105 Skapa rubriker med h-element […]
På en webbsida, är det OK att ha ex H1, H2 och sen H4 eller kommer det inte fungera för ex skärmläsare att ta sig runt på sidan när inte H3 finns med?
Tänk på rubriker som om de har en hierarkisk numrering, som i många fackböcker. Du kanske har ”1. Däggdjur” som H1 och ”1.1 Idisslare” som H2. Att ha en H4 för Dovhjort som nästa rubrik blir konstigt: ”1.1.?.1 Dovhjort”. Det borde finnas en ”1.1.1 Hjortdjur” som H3 däremellan.
Det ser konstigt ut för seende användare och det låter konstigt för användare med skärmläsare. Skillnaden är att en seende kanske inte upptäcker den saknade nivån om man inte har en synlig numrering, medan skärmläsaren alltid talar om nivån (”Dovhjort, rubrik nivå 4”) och användaren kommer då att bli osäker och undra om hon eller han missat en nivå-3-rubrik någonstans.
Det är alltså inte så att skärmläsaren slutar fungera, rent praktiskt, men den kommer att förmedla förvirrande information till användaren. Det är inte OK att hoppa över rubriknivåer. Vill man förändra textstorleken bör man använda CSS, inte HTML.
Jag har ett minne av att jag lärt mig att man alltid ska skriva text – ingress/brödtext – under rubriker. Stämmer detta? Finns detta med i någon riktlinje?
Eller är det ok att ha H1 – ingen text – H2 – text ?
Hej Moa.
Du kan ha en h1 direkt före en h2 utan att ha någon text emellan. Detta kräver dock att det finns flera h2 på sidan med text efter varje rubrik.
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.