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.


Kommentarer till denna riktlinje

Kommentarer (7)

  • Besökare skriver:

    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?

    • webbriktlinjer skriver:

      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 […]

  • Jenny skriver:

    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?

    • Tommy Olsson skriver:

      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.

  • Moa skriver:

    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 ?


Om denna riktlinje

Status på vår webbplats


(Då uppdateras status i checklistorna.)