Detta måste du veta om rubriknivåer

Rubriker skall vara som en röd tråd och leda användaren rätt

Rubriker skall vara som en röd tråd och leda användaren rätt

Veckans tips handlar om hur du skall jobba med dina rubriker för att göra det lättare för synskadade att använda din blogg eller webbplats. Först berättar jag om några grundförutsättningar, sedan lite enkla tips om hur du kan göra för att komma igång med arbetet på din egen webbplats (eller blogg, för den delen).

Hjälpmedel för synskadade

Synskadade använder ofta ett program för att läsa av en webbsida. Programmet läser av koden som sidan är uppbyggd av, och rapporterar det på olika sätt till användaren.

Det kan antingen vara genom att läsa upp en text med hjälp av datorns talsyntes, men det är också väldigt vanligt att användaren via ett kortkommando tar fram en lista på vilka rubriker som finns på webbsidan. Användaren kan sedan stega mellan de olika rubrikerna, och sedan få tillhörande text uppläst. Smidigt, eller hur?

Saker som kan gå fel

Det som kan gå fel nu är att rubrikerna på din webbplats inte är rätt kodade, då känner skärmläsaren inte av att det är en rubrik, och det kan i värsta fall generera en rubriklista som är tom. Inte så lätt att få någon överblick då, eller hur? Eventuella rubriker kommer att läsas upp, rakt av, som vanligt text, och det blir väldigt grötigt. Tänkt dig själv att försöka läsa en text som är utan mellanrum, och utan rubriker. Ungefär så funkar det.

Hur du ser till att det inte blir fel

Det du som ansvarig skall se till är att dina rubriker är kodade på rätt sätt. Din huvudrubrik skall vara kodad med H1, underrubriker H2 och så vidare. Du kan ta hjälp av min guide ”Testa grundläggande tillgänglighet med Firefox” för att se hur rubriker fungerar på din webb.

Det viktigaste är att du inte blandar olika nivåer, kolla de här exemplen:

  • Din webbplats namn är satt som H1, dina sidors namn är H2, underrubriker på sidorna är H3. Konsekvent och bra. Har du information i en kolumn till höger kan de ha H4. beror lite på hur du prioriterar din information.
  • Din webbplats är inte formaterad som H1 (skärmläsaren läser den åndå tidigt i dokumentet), men dina sidors namn är kodade som H1, underrubrikerna H2, ett fält med nyheter i kolumnen till höger också h2.

Tänk på det här när du jobbar med rubrikerna

Exempel på korrekta rubriknivåer, lista med hjäl av Fans för Firefox

Exempel på korrekta rubriknivåer, lista med hjäl av Fans för Firefox

  • Börja alltid med H1, fyll på prioriteringsnivån neråt. Skippa inte H1 för att den ser för stor ut, det ställer du in i stilmallen, om din webbplats har en sådan.
  • Blanda aldrig nivåer, hoppa aldrig över nivåer. Sätt inte H6 på rubriker i högerkolumner för att den har rätt storlek, alla inställningar ställer du in i stilmallen.

Läs mer om stilmallar (cascading style sheet) på Wikipedias webbplats, eller artiklen ”Separera innehåll från design – använd stilmallar” från eutveckling.se.

Mer om rubriker

Läs mer om skärmläsare

Kommentera och prenumerera på bloggen

Gratis uppdateringar via RSSJag vill gärna veta dina synpunkter på det här inlägget, så skriv vill en kommentar om du har tid och lust. Och om du gillade den här artikeln, glöm inte att prenumerera på mitt RSS-flöde för fler gratis artiklar, eller följ @larskarlsson på Twitter.

3 thoughts on “Detta måste du veta om rubriknivåer

  1. Ett par reflektioner:

    * Att sätta webbplatsens namn med h1 är kanske rätt tillgänglighetsmässigt, men man ska vara medveten om att det gör det svårare för Google att avgöra vad som är unikt med sidan, och därför kan kosta i sökplacering.

    Dessutom blir det tjatigt att inleda varje sidas rubrikhierarki med att höra sajtnamnet igen.

    Bättre då att ha sajtnamnet i sidtiteln (till *höger* om huvudrubriken). Tjatigt det också, men fungerar anständigt tillgänglighetsmässigt, och ger bättre sökbarhet.

    * Hur man gör när man har flera olika innehåll på en sida – till exempel en huvudspalt och en högerspalt – har jag funderat mycket över, utan att komma till något resultat som känns helt rätt. Den lösning du föreslår, med högerspaltens rubriker som h4, gör ju att de hamnar under huvudtextens sista h3:a i hierarkin, och därmed kan vara lite svåra att upptäcka. (I viss mån kan man dock kompensera det genom att ha synliga eller dolda genvägar i sidan.)

    Men jag har som sagt inte kommit fram till någon lösning som är självklart bättre. Ofta landar jag i att sätta en dold h2 typ ”Sidospalt” (fantasilöst, jag vet) och sedan ha rubrikerna där i h3.

    * Jag vet att WCAG 2 säger att det inte får vara några hål i h-hierarkin, så det är väl bara att lyda. Men personligen har jag alltid tyckt det är ganska dumt. Det är väl bara i akademiska uppsatser (och numera inte ens där) som man har konsekventa heltäckande rubrikhierarkier. I normal text för seende hoppar man ju ofta över en mellanrubriknivå ibland när den inte tillför något.

    Låt mig illustrera med ditt exempel. Om man har rubrikerna i högerkolumnen som h4, så betyder det att man i ALLA texter i huvudspalten (även de kortaste) måste ha en h3-rubrik. (Alternativt att när det inte finns någon h3-a i huvudtexten så måste sidospaltens rubriker ändras till h2, och få en ny css.).

    * Kanske har ett ‘inte’ fallit bort i din sista punkt om h6 i högerspalten? Jag förstår inte vad den försöker säga.

  2. @tommy Tack för ditt uttömmande svar, jag har ändrat min sista punkt Det skall stå ”inte”.

    Jag tycker alltid det är lika klurigt när det gäller rubriknivåer, eller så är det jag som seende som krånglar till det.

    Har planer på att be min synskadade kollega kolla av bloggen och se om den är begriplig.

  3. Jag hade en lång diskussion med Roger Johansson m fl om detta för ett tag sedan och jag hoppas att man med hjälp av WAI-ARIA landmark roles kommer att kunna låta bli att använda rubriker för att identifiera delar av en sida och istället enbart ha dem för att märka upp innehåll.

    WAI-ARIA landmarks är lätt att komma igång med och har flera fördelar för dem som tillverkar hjälpmedel (eftersom det blir konsekvent för användaren hur man kan hoppa till olika delar av en sida). Samtidigt slipper utvecklare lägga tid på att försöka hitta på egna lösningar för uppmärkning av sidsrukturer.

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s