5.5.2 Skapa rubriker med h-element

Prioritet: 1

WCAG 1: 3.5

Rubriker ska formateras på rätt sätt. I HTML används h-elementet för detta ändamål. h1 signalerar huvudrubrik, h2 att det finns en underrubrik till en föregående huvudrubrik, och h3 en underrubrik till underrubriken. Den hierarkiska ordningen är viktig.

Korrekt användning av rubriker bidrar till:

  • Att få en enhetlig formatering av alla sidor på webbplatsen.
  • Att det blir lättare att läsa dokumentet utan stilmallar.
  • Att sökmotorer hittar relevant information på sidorna. Sökmotorer utnyttjar var i ett dokument ett ord hittats för att avgöra hur relevant dokumentet är. Om ett ord tillhör ett h1- eller h2-element så anses det mer relevant än om det klassas som brödtext.
  • Användaren får en överblick över dokumentet. Hjälpmedel behöver en korrekt strukturkod för att kunna avgöra vad som är en rubrik. Dokument ska till exempel inte börja med en rubrik märkt h2.

Formatera rubrikernas utseende med hjälp av stilmallar

Rubrikernas utseende formateras med hjälp av stilmallar.

Det går att ha flera rubriker som visuellt ser olika ut, men som har samma rubriknivå, till exempel h1 (huvudrubriker), se exempel nedan. På samma sätt kan underrubriker hanteras om det finns  behov av att de till exempel ser olika ut på startsidor och underliggande sidor.

I exemplet nedan blir informativa h1-rubriker blå och varningar röda:

h1.informativ {color:#00f}
h1.varning {color:f00}

Mätbarhet

Kontrollera att publiceringsverktyget skapar korrekt rubrikkod och att det är möjligt att skapa rubriker med olika nivåer. Då behöver den som publicerar enbart koncentrera sig på att formulera bra rubriker och att markera den önskade rubriknivån.

Kontrollera att rubrikerna följer en hierarkisk ordning, att det finns en h1 före h2:or och en h2 före h3:or. För att testa om rubrikerna har en hierarkisk ordning, lista webbsidans rubrikstruktur med hjälp av gratis tilläggsprogram till webbläsaren.

Senast uppdaterad 2008-12-21