Rubrikstruktur

Källor: Funka

Introduktion

Detta dokument kommer att förklara varför rubrikstruktur är viktigt och hur det gynnar flera användare från ett tillgänglighetsperspektiv när det kodas rätt. Informationen har hämtats ifrån Funkas webbinarium och det kommer finnas en länk till videon längre ner i dokumentet. Rekommenderar starkt att du kollar på filmen om du är intresserad att lära dig mer om rubriker och rubrikstruktur. Det kommer även finnas en länk längst ner från World Wide Web Consortium (W3C) som går genom exempel på hur rubrikstrukturer ska se ut beroende på vart de befinner sig på en webbsida.

”Rubriker skapas inte med visuell design i fokus. Deras enda syfte är att definiera en hierarki för innehållsstruktur så att både människor och maskiner kan förstå informationsstrukturen.” – Citat av Webaim

Varför det är viktigt med struktur

När rubriker skapas på en sida så räcker det inte att rubrikens design ser bra ut, den måste också vara begriplig och skapa struktur för sidans innehåll. En rubrik ska alltid vara kodad som en rubrik: h1, h2, h3, h4, h5, eller h6. Något som ska agera som rubrik kan inte bara vara exempelvis en fetstilt text eller en text med större storlek eftersom de inte kommer att visas som rubriker i rubrikstrukturen för användare med hjälpmedel så som skärmläsare och rubriklistor. Detta gör att personer med hjälpmedel så som skärmläsare får svårt att förstå kontexten av sidans innehåll och gör det svårt att ta till sig av informationen på sidan.

Rubriker hjälper även personer som kan se innehållet visuellt på sidan. Om inte rubrikerna visas tydligt i en logisk struktur så får även dessa användare svårt att tyda ordningen av innehållet på ett korrekt sätt.

Ett exempel på rubrikstruktur

Med hjälp av det olika rubriksnivåerna så sätter man innehållet på sidan i en hierarki. 

Här är ett exempel på en rubrikstruktur kan se ut: 

<h1>Helgens meny</h1>

Genom att först ha en huvudmeny som heter “Helgens meny” så informeras användaren att detta som kommer efter denna huvudrubrik handlar om helgens meny. Den första h2:an heter “Lunchmeny” följt av tre stycken h3:or men olika rätter. Eftersom dessa ligger en nivå under h2-rubriken så vet vi att dessa rätter är lunch alternativen. Sedan kommer en ny h2:a vilket gör att vi går uppåt i hierarkin igen, och denna rubrik heter “middagsmeny” följt av tre andra h3 rubriker. Tack vare detta kan vi urskilja vilka rätter/innehåll som tillhör Lunchmenyn och Middagsmenyn. 

Dolda rubriker

Vad är dolda rubriker och hur kan de användas?

Man kanske inte vill att det ska visas en stor huvudrubrik på startsidan “Välkommen till ….!” men man vill fortfarande att det budskapet ska förmedlas till användare som använder exempelvis skärmläsare. Då kan man lägga en H1 rubrik högst upp på sidan och sedan dölja den med CSS. Eftersom det då finns en H1 i början på sidans struktur så kan man fortsätta strukturen med h2 rubriker och så vidare. Rubrikerna iinklusive den dolda huvudrubriken kommer att synas i rubrik listor som en del användare använder sig utav och därmed får de en bättre överblick över strukturen på sidan.

Mer information om rubrikstruktur

Här är en länk till ett Youtube-klipp där Funka går igenom vikten av rubrikstruktur och även visar hur en blindanvändare med skärmläsare navigerar genom rubrikstrukturer: Varför detta eviga tjat om att strukturera rubriker!?

Här är en länk från W3C där de relaterade kriterier till rubrikstrukturer presenteras samt visar exempel på hur rubrikstrukturer ska se ut före/efter navigering med fullständiga kodexemplar: Rubriker | Initiativet för webbtillgänglighet (WAI) | W3C