Rubriker
Rubriker som besökaren förstår direkt är en av nycklarna till en bra webbsida.
Alla har nytta av bra rubriker. Det blir ett enhetligt utseende, sökmotorer hittar enklare aktuell information och besökaren får snabbt en bra översikt över sidans innehåll. Vana webbanvändare använder ofta rubrikerna för att scanna av en sida och se om den har ett innehåll de är intresserade av.
Om inte rubriken fångar uppmärksamheten, så spelar det ingen roll hur bra och välskriven innehållet under är. Korrekta rubriker underlättar för besökare som använder hjälpmedel som till exempel skärmläsare. De kan då hoppa mellan rubrikerna för att snabbare hitta relevant innehåll.
Tänk på:
- En rubrik ska sammanfatta och spegla sidans eller avsnittets innehåll
- Försök inte skämta till det i rubriken, var hellre tydlig med innehållet
- Leverera, det du påstår i rubriken måste ha täckning i texten
- Se till att rubrikerna är korta och informativa, (korta rubriker är extra viktigt på mobil och surfplatta)
- Huvudrubriken blir även sidnamn (om du inte ändrar det). Sidnamn ska också vara korta och informativa, för långa sidnamn kan leda till att sidan får en för lång URL och inte visas i vissa webbläsare.
- Lägg dina nyckelord så tidigt i rubriken som möjligt så att de som snabbläser hittar dem direkt. Nyckelord hjälper också sökmotorn.
- Om du skriver längre texter, använd mellanrubriker som leder läsaren vidare i texten
- Använd verb – tala om för läsaren vad som sägs, vad som görs eller vad som händer
- Låt mellanrubriker sammanfatta styckenas innehåll och locka till vidare läsning
- Använda ett fåtal ord i menyer, även om själva sidan heter något längre.
- Rubriken är till för att visa vad man kan förvänta sig att det följande stycket handlar om, rubriker ska därför inte innehålla länkar. Rubriker med länkar i skapar också en dålig tillgänglighet för skärmläsare.
Formatera rubriker rätt
När du bygger sidor på webben är fälten sidrubrik och ingress redan formaterade, det vill säga den text du lägger in där får automatiskt rätt utseende och storlek. För text som läggs i brödtextfältet (texteditorn) ska alltid rätt formatmallar användas (välj i listan under Stilar). Detta är viktigt både för att Västra Götalandsregionens visuella profil ska följas och för webbplatsens tillgänglighet.
Ingen egen formatering (till exempel i form av fetstil istället för underrubrik) får förekomma. Att särskilja en rubrik från brödtext enbart genom formgivning (till exempel fetstil) gör det 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.
Med långa ord i rubriken kan du däremot lägga till en kod för mjuk bindestreck, ­ lägger du in i rubriken där du vill att ordet ska avstavas vid behov. Om du lagt in ­ i rubriken behöver du manuellt ändra sidans sidtitel under SEO-fliken, annars syns tecknen också där.
Exempel på avstavning finns i rubriken på sidan Informationsstruktur
Sätt rubrikerna i rätt ordning
Huvudrubriken (H1) används för sidans rubrik och formateras automatiskt när du lägger in text i fältet sidrubrik.
I dropdownlistan i fältet Stilar finns Rubriknivå 2-4
Rubriknivå 2 (H2) används för en underrubrik till en föregående huvudrubrik.
Rubriknivå 3 (H3) används som underrubrik till underrubriken H2.
Rubriknivå 4 (H4) används som underrubrik till underrubriken H3.
Det kan hjälpa att se rubrikerna som mappar på en dator, eller som en trädstruktur. Så här:
- H1 Djur jag gillar
- H2 Däggdjur
- H3 Hästar
- H4 Nordsvensk
- H4 Fjording
- H4 Islandshäst
- H3 Fladdermöss
- H3 Hundar
- H4 Västgötaspets
- H4 Grönlandshund
- H3 Hästar
- H2 Kräldjur
- H3 Sköldpaddor
- H2 Däggdjur
Verktyg för att testa rubrikstrukturen
- Webbläsar-”widget”: Tota11y
- Plugin för Chrome och Firefox: Wave
- W3Cs online HTML-validerare: W3C Markup Validation Service
Mer information
- Läs mer om rubriker på webbriktlinjer.se
- Läs mer i "Headings and Labels" i tillgänglighetsstandarden WCAG 2.1
- Och även i WCAG avsnittet "navigable"
Exempel på rubriker
Sidans översta rubrik och namn (H1)
En ingress som berättar vad du kan hitta på sidan. Läsaren ska förstå om hen kommit rätt. Eftersom rubrik H1 inte får finnas i ett block, är inte rubriken ovan rätt formaterad, den är bara som ett exempel.
Första underrubriken på sidan (H2)
Här kommer den första texten under den här rubriken.
Andra underrubriken på sidan (H2)
Det här stycket har en del text som egentligen inte säger så mycket, men den här meningen har i alla fall en bisats. Dessutom kommer här en underrubriknivå till, eftersom det behövs för att informationen ska bli lätt att ta till sig.
Det här är första underrubriken som är (H3)
Det är den eftersom textens innehåll är underordnat rubriken ovanför. Det går att ha flera underrubriker av samma slag efter varandra. Använd det om det behövs för att göra texten mer lättläst.
