Skriv beskrivande rubriker
Rubrikers funktion är att strukturera innehåll och göra sidor lättare att överblicka.
För vem?
- Personer med lässvårigheter
- Personer med försämrat korttidsminne
- Personer med synnedsättning
Varför?
- Tydliga rubriker ger möjlighet att förutse vad varje del av webbplatsen innehåller. För personer som navigerar med tangentbordet eller använder skärmläsare ger tydliga rubriker en möjlighet att hoppa till olika delar av innehållet. Innehållet blir lätt att överblicka.
- Användare (även användare utan funktionsnedsättningar) läser sällan innehåll på en webbplats ord för ord. I stället skannar de av sidan och letar efter nyckelord.
Rekommendationer
- Använd nyckelord ur texten.
- Skriv de viktigaste orden först.
- Använd aktivt språk, gärna verb.
- Gör inte rubrikerna längre än 5-10 ord.
- Se till att rubrikerna är formaterade som rubriker, dvs. att de inte är fetmarkerad brödtext. Annars kan skärmläsare inte känna igen rubrikerna.
- Lämna inte rubrikfältet tomt.
- Skapa inte artiklar som bara består av rubriker. Varje artikel ska ha både rubrik och innehåll.
- Skapa rubriker och underrubriker på ett sätt som gör innehållet lättöverskådligt.
Rubriknivåer
För personer som navigerar med hjälp av skärmläsare är det viktigt att rubriker och underrubriker återger strukturen på sidan och att rubrikhierarkin är korrekt. En person som kan se skannar av en sida med blicken och uppfattar rubriker utifrån sidans layout. Men någon som inte kan se layouten behöver kunna skapa sig en överblick över sidan på annat sätt, t.ex. genom att låta skärmläsaren läsa alla rubriker på sidan.
En skärmläsare använder html-koden för att känna igen rubriker. Därför är det viktigt att huvudrubriken ska vara taggad som H1 och att underrubriker är taggade som H2 eller H3.
Hoppa inte över rubriknivåer. Har du inte en H2 ska du inte använda en H3.
Använd underrubriker på ett sätt som gör sidan lättöverskådlig, också för personer som kan se. Rubriker och underrubriker ska hjälpa användaren att navigera.
Exempel på tillgängliga rubriker
Musik, museer och trädgårdar på uu.se
Korta fakta om Uppsala universitet på uu.se
Exempel på otillgängliga rubriker
Problem: Rubriken beskriver inte innehållet
En artikel som handlar om forskning i humaniora och samhällsvetenskap har rubriken "Vi antar framtidens utmaningar". Rubriken är inte tillgänglig eftersom det utifrån den inte går att förstå vad artikeln handlar om.
Problem: Rubrikhierarkin återger inte strukturen på sidan korrekt, exempel 1
I Infoglue blir den rubrik som finns i komponenten puff image wide (piw) en H1. Det betyder att rubriken i den stora rutan i piw ska beskriva innehållet på hela sidan.
Om du lägger en artikel (med någon av artikelstilarna simple, image to the left, image to the right och indented text) under piw kommer den artikelns rubrik också att vara H1. De artiklar som i sin tur hamnar under den får rubriker som är H2.
Använd piw-komponenten endast på förstasidan på din webbplats. En förstasida ska helst bara innehålla piw och puff container (med nyheter, publikationer, kalendarium eller bildpuff). Rubrikerna i puffarna blir H2.
Rubrikerna på webbsidan som bilderna föreställer är:
H1: Forskning vid Uppsala universitet
Denna har följande underrubriker
- H2: Publikationer
- H2: Forskarutbildning
- H2: Forskningsstrategier
Underrubrikerna hör ihop med huvudrubriken och där är strukturen okej.
Men sedan kommer en ny H1 som har lika mycket tyngd som första H1: Forskningsprojekt. Dess underrubriker är:
- H2: Föreläsningar
- H2: Nya professorer
- H2: Utveckling och innovation
Där blir rubrikstrukturen ologisk eftersom det inte går att förvänta sig att föreläsningar, nya professorer samt uveckling och innovation ska ligga under Forskningsprojekt.
Om du vill lägga en artikel under puff image wide-komponenten ska du välja någon av artikelstilarna "dark grey with image" och "grey with image". Dessa artikelstilar får H2-rubriker.
Problem: Rubrikhierarkin återger inte strukturen på sidan korrekt, exempel 2
Bilden föreställer en webbsida som ska handla om forskning i matematik. Rubriken i piw-komponenten är en H1 och rubriken under är också en H1. De båda har alltså lika stor tyngd. Men artikeln som är länkad från piw-komponenten handlar om forskning i matematik. Därför ska denna vara en underrubrik till Forskning. Dessutom är rubriken "Hennes forskning avslöjar matematiska träd" inte tillräckligt beskrivande. Det är inte helt tydligt att det handlar om en intervju.
Kontroll
Manuell granskning med skärmläsare och användningstester. Kolla att varje rubrik beskriver innehållet som den representerar. Testa att läsa rubrikerna utanför sitt sammanhang och se om det går att förstå vad avsnitten handlar om. Testa att läsa sidan med datorns skärmläsare (finns både i Windows och Mac). Låt skärmläsaren läsa rubrikerna. Titta inte på skärmen när du testar. Förstår man hur sidan är strukturerad och vad den handlar om, om man bara hör rubrikerna läsas upp?