Testa grundläggande tillgänglighet med Firefox

Den här guiden hjälper dig att genomföra fyra moment för att se om din webbplats har någon form av grundläggande tillgänglighet.

De fyra moment som guiden går igenom är:

  • Kontrollera om dina rubriker är rätt uppmärkta
  • Kontrollera hur sidan fungerar utan bilder
  • Förstora och förminska texten
  • Använd webbplatsen med bara tangentbordet

Guiden baseras på Vervas checklista, och är inte heltäckande på något sätt, men ger i alla fall en fingervisning. Checklistan tar som sagt upp fyra viktiga punkter, och för att kunna genomföra två av dem kan du använda dig av ett tillägg till Firefox, nämligen Web Developer. Om du inte har Firefox installerat så står det i checklistan hur du gör med Internet Explorer och verktygsfältet Web Acessibility Toolbar.

För den här guiden behöver du alltså:

Innan du börjar med checklistan, klicka på ”Outline” i verktygsfältet Web Developer, och se till att det sitter en bock framför ”Show element names when outlining”, då blir det tydligare vad som är vad.

Testa dina rubriker först

Den första punkten i checklistan är ”Testa att rubriker används på rätt sätt”, det gör du genom att klicka på ”Outline” i verktygsfältet och sedan ”Outline headings”. Nu skall du se en tunn färgad ram runt dina rubriker, det skall också stå vilken rubriknivå (h1 till h6) som rubriken har (eftersom du kryssade i ”Show elements…”). Olika färger på ramen betyder olika rubriknivåer.

Rubriker utan ram, och hur du fixar dem

Om du nu har en rubrik på din sida som inte har någon ram, så är den inte formaterad som rubrik. Visuellt ser den ut som en rubrik, men den är det inte rent tekniskt. Det måste du ordna, eftersom personer med exempelvis skärmläsare inte kan se att det är en rubrik trots att du kanske formaterat den med fetstil och 16 pixlar hög. Sen är det ingen hemlighet att sökmotorer gillar sidor som har rubriker som är rätt formaterade, och i rätt ordning.

Det här med rubriker är viktigt för tillgängligheten, eftersom användare med skärmläsare ofta plockar fram listor över rubriker för att kunna få en överblick av sidan. Om rubrikerna inte är formaterade rätt känner inte skärmläsaren av dem, utan tolkar dem som vanligt brödtext. Användare får ingen överblick.

Ändra till rätt rubriknivå (h1, h2, h3 och så vidare) direkt i koden, eller med det publiceringssystem eller CMS du skapat sidan.  Det där vet du förhoppningsvis bättre själv hur du skall göra.

Sätt rubrikerna i rätt ordning

En sidan börjar alltid med h1, underrubriker är h2. Finns det fler nivåer formateras de som h3, h4 och så vidare. Titta gärna hur jag har gjort på den här sidan.

Så här skriver tillgänglighetskonsulterna ETU AB om rubriker:

Tänk på att rubrikerna ska påvisa hur du som författare tycker att rubriker och textstycken förhåller sig till varandra. En mycket viktig del av väl skriven text.

Mer om rubriker:

Läs mer om skärmläsare:

Testa hur sidan fungerar utan bilder

Varför skall jag göra det här?

Mobilanvändare och modemanvändare kan stänga av bilder för att kunna använda webben på grund av den lägre hastigheten. Snnskadade besökare som en hjälpmedel (exempelvis den populära skärmläsaren JAWS) kan inte se bilder alls, utan brukar läsa upp bildens alt-text, om det finns någon.

Så här kontrollerar du dina bilder

Andra punkten i checklistan är ”Testa att sidan fungerar utan att bilder syns”. Det gör du genom att klicka på ”Images”, ”Disable images” och sedan ”All images”. Nu ser du hur din sida ser ut helt utan bilder. Fortfarande lika snyggt? Prova på Trollhättan Energis hemsida, de använder bara bilder.

Lite att tänka på:

  • Går sidan fortfarande att använda utan bilder, eller har viktig information försvunnit?
  • Har du angett alternativtext på bilder som har ett budskap? Använd gärna samma text i alt-texten som på bilden.
  • Om du inte ställer in width  och height på dina bilder kan det hända att utseendet förändras och liksom trycks ihop. Ställ in värdena i din stilmall, eller din webbsida.
  • Har du en meny som är byggd av bilder? Då syns den nog inte så bra nu. Fundera på om du kan använda bara färger istället.

Mer om alttexter:

Förstora och förminska text

Den tredje punkten är ”Testa att användaren kan ändra storlek på sidans text”. Gå till Firefox eget verktygsfält och välj ”Visa”, ”Zoom” och bocka för ”Zooma endast texten”. Välj sedan ”Visa”, ”Zoom” och några gånger väljer du ”Zooma in” för att se om texten förstoras. Sidan skall fortfarande vara begriplig och läsbar.

Lite att fundera på:

  • Går det inte att förstora texten alls? Då använder du fasta mått (px, pt), använd relativa istället (em exempelvis). Läs mer om skillnader mellan måtten em och px.
  • Går texten utanför layouten? Då är nog layouten satt i fasta mått och texten i relativa. Funderar på om det är möjligt att bygga din webbplats med en flexibel design.

Mer om att att zooma texter:

Navigera helt utan mus

Det är inte helt självklart att alla dina besökare använder en mus. Själv använder jag oftast pekplattan på min bärbara, eller på jobbet en slaks pinne som snurrar ett jul som skickar en signal .. och så vidare. Alla är heller inte stadiga på handen, av olika anledningar. Det är därför väldigt bra om din webbplats fungerar utan mus, och att det finns andra sätt att navigera.

Den sista punkten ”Testa att navigera utan mus” genomför du såhär:

  1. Öppna sidan i din webbläsare
  2. Använd tab-tangenten och navigera dig fram till några av posterna i menyn
  3. Aktivera länken med enter och kontrollera att sidan laddas
  4. Kontrollera att du kan nå alla objekt (sökrutor, knappar, länkar) som du kan med musen

Det var allt, nu har du en hyfsad överblick över din webbs tillgänglighet.

Om du vill gå vidare med dina tester

Här är några länkar till resurser för att kunna komma längre med tillgänglighetn på din webbplats.

Har du synpunkter på guiden om grundläggande tillgänglighet? Skriv gärna en kommentar.

Lämna ett svar