Har din webbsida rätt rubrikstruktur?

De flesta vet att rätt rubrikstruktur förbättrar både användbarhet, tillgänglighet och SEO. Ändå ser vi ofta fel när vi testar tillgängligheten på en webbplats. Lär dig hur du gör det rätt.

Rubriker hjälper användare och sökmotorer att läsa och förstå en webbsida bättre. En beskrivande huvudrubrik förklarar vad sidan handlar om, medan underrubriker förklarar vad varje textstycke handlar om. Det hjälper användare att välja och avgöra vad som är viktigt att läsa och navigera genom texten. Det är extra viktigt för de som använder tekniska hjälpmedel, till exempel skärmläsare.

Använd rätt format på rubriker

Markera rubriker med h1-h6 för att få en korrekt rubrikformat. Undvik att formatera rubriker genom att ändra på storleken och markera med fetstil, kursivt eller understruket. Det ser kanske tydligt ut för de som ser, men de som använder tekniska hjälpmedel kan inte veta att det är en rubrik. Inte heller sökmotorer tolkar det som rubrik, vilket försämrar sökbarheten.

Hoppa inte över rubriknivå

Ange rubriker i rätt hierarkisk ordning, det vill säga h1, h2, h3 och så vidare. Om man hoppar över rubriknivåer undrar användare med skärmläsare var föregående rubriknivå tagit vägen, eller om hen har missat information på sidan.

Ta bort rubriker som saknar text

Rubriker som inte har någon text är förvirrande för användare med skärmläsare. Skärmläsaren läser upp till exempel “rubrik nivå 2” men sedan ingen text som rubrik.

Detta kan förekomma när sidmallar eller block har fält för rubriker som redaktörerna inte använder. Det kan också hända om redaktören i brödtextfältet ställer in formatering till rubrik, och sen inte skriver något där, utan istället gör en blankrad.

Använd de rubrikfält som finns, och gör inte blankrad, särskilt inte med rubrikformat. Om ni inte är nöjda med hur designen ser ut när det gäller rubrikformat och mellanrum ska ni justera det i CSS-mallen istället.

Så kontrollerar du rubrikstruktur på en webbsida

För att kolla om en webbsida använder korrekta rubriker, kan du använda tillägget Web Developer i din webbläsare. Innan du börjar testa så behöver du först installera tillägget och det finns både till Chrome och Firefox.

När du har installerat tillägget, gör du följande för att se sidans rubrikstruktur:
Steg 1. Klicka på Web Developer-ikonen i webbläsarens verktygsfält
Steg 2. Välj fliken “Information”
Steg 3. Klicka på “View Document Outline”

Där ser du då rubrikstrukturen på sidan, och du kan ändra om något inte är korrekt.

Vill du ha hjälp med granskning?

Ibland finns inte tiden, kunskapen eller tekniken för att göra en komplett granskning. Vi gör en komplett granskning utifrån WCAG och ger en tydlig rapport där du enkelt ser vad som är fel och hur du åtgärdar det.

 Tillgänglighetsgranskning – ja tack!