Riktlinje nr 105 Prio 1

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.



Kommetarer (3)

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