Hoppa till huvudinnehållet

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, men även de som läser och skummar snabbt.

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 du inte är nöjd med hur designen ser ut när det gäller rubrikformat och mellanrum ska du 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 tillgänglighet?

Vi granskar din webbplats och kravställer de åtgärder du behöver genomföra, eller utbildar din organisation i hur man skapar tillgängliga webbsidor och dokument.

Våra tjänster inom tillgänglighet

Inspireras av vårt nyhetsbrev
Anmäl dig till vårt nyhetsbrev för spännande innehåll, från vetenskapliga upptäckter till praktiska tips. Uppdatera dina kunskaper och inspireras tillsammans med oss.
Aktivera JavaScript i din webbläsare för att slutföra detta formulär.
Namn

Vi kommer använda de personuppgifter du lämnar här för att kunna kontakta dig och genomföra ett eventuellt uppdrag. Vi kommer inte lämna ut dem till någon annan. Kontakta oss om du vill att vi tar bort dina uppgifter. Läs mer hur vi hanterar personuppgifter i vår dataskyddspolicy.
Inspireras av vårt nyhetsbrev
Anmäl dig till vårt nyhetsbrev för spännande innehåll, från vetenskapliga upptäckter till praktiska tips. Uppdatera dina kunskaper och inspireras tillsammans med oss.
Aktivera JavaScript i din webbläsare för att slutföra detta formulär.
Namn

Vi kommer använda de personuppgifter du lämnar här för att kunna kontakta dig och genomföra ett eventuellt uppdrag. Vi kommer inte lämna ut dem till någon annan. Kontakta oss om du vill att vi tar bort dina uppgifter. Läs mer hur vi hanterar personuppgifter i vår dataskyddspolicy.