Så gör du en snabb tillgänglighetsgranskning av din webbplats

En snabb tillgänglighetsgranskning kan göras med dessa fyra relativt enkla steg för att upptäcka flera av de vanligaste problemen. Vi visar dig hur det går till steg-för-steg.

Responsivitet och zoom

En responsiv design gör att din webbplats fungerar bra på olika enheter och vid olika zoomnivåer, vilket är viktigt för personer med synnedsättningar eller de som använder mobila enheter. Zoomning kan också vara ett väldigt viktigt verktyg för personer som behöver förstora text för att läsa den.

Undersök:

• Se till att innehållet förstoras och presenteras i en logisk ordning så att det går att förstå och läsa.

• Se till att text och innehåll förblir läsbart och användbart utan att skapa horisontell scroll.

• Se till att inget relevant innehåll försvinner vid förstorningen.
• Inget innehåll får kapas, pressas ihop, överlappar, ligger bakom eller blir oläsligt på något annat sätt.

Så här gör du:

• Försök att zooma in på sidan upp till 200 % i din webbläsare och se om layouten fortfarande fungerar bra.

• Använd Ctrl + plus för att förstora innehållet och Ctrl + minus för att förminska innehållet.

• Kolla också om din webbplats fungerar på olika skärmstorlekar, som på en mobiltelefon eller en surfplatta. Vänd mobiltelefonen och se ifall sidan hänger med till liggande/stående.

• Ändra textstorleken till ”stor” i webbläsarens inställningar.

Tangentbordsnavigering

Många användare, inklusive personer med motoriska funktionsnedsättningar eller synnedsättningar, är beroende av tangentbordsnavigering för att navigera på en webbplats eller webbsida. Om det inte går att navigera på din webbplats med tangentbordet utesluts dessa användare från att kunna använda sidan.

När man navigerar med tangentbordet är det också avgörande att kunna se vilken komponent eller vilket element på webbplatsen som är aktivt, alltså var “fokus” är. Detta gäller särskilt för personer som inte kan använda en mus eller pekdon, till exempel användare med motoriska funktionsnedsättningar eller synnedsättningar. Om fokus inte är synligt eller tydligt markerat, kan användare som navigerar med tangentbordet inte veta var de befinner sig på sidan. De riskerar att missa viktiga länkar, knappar eller formulärfält, vilket leder till en frustrerande upplevelse och kan göra det omöjligt för dem att använda webbplatsen. En tydlig fokusmarkering hjälper alla användare att navigera effektivt och gör webbplatsen mer tillgänglig för alla.

Undersök:

• Testa om webbplatsen går att navigera helt med tangentbordet.
• Kolla att du når alla interaktiva element och att det går att använda webbplatsen utan mus.
• När du flyttar mellan element, bör det finnas en tydlig visuell markering (som en ram, färgändring eller annan markör) runt det aktiva elementet som visar var fokus ligger.
• Kontrollera att fokusmarkeringen är tillräckligt tydlig och kontrasterar väl mot bakgrunden, så att den är lätt att se för alla användare, även de med synnedsättningar.

Så här gör du:

• Ställ dig högst upp på webbsidan.
• Använd tab-tangenten för att hoppa mellan länkar, knappar och formulärfält, och se till att fokus är tydligt markerat när du förflyttar dig.
• Använd Shift + Tab för att backa/ta dig tillbaka.
• För att aktivera/gå in på en knapp, funktion eller fälla ut menyer, använd Enter-knappen.
• Testa ifall snabbkommandon som Home och End fungerar. Home-knappen ska leda dig till toppen av sidan, och End-knappen ska leda dig längst ner på sidan.

Prova att läsa med skärmläsare

Användare som är blinda eller har kraftiga synnedsättningar använder skärmläsare för att navigera och förstå webbplatsens innehåll. Om viktig information inte läses upp eller om länkar och knappar inte är tillräckligt beskrivande, kan dessa användare inte få tillgång till innehållet eller interagera med det.

Undersök:

• Använd skärmläsare för att hoppa mellan rubriker (ofta med kommando H för rubriker). Kontrollera om rubrikerna är logiskt strukturerade (H1 för huvudrubrik, följt av H2, H3 etcetera).
• Kontrollera att skärmläsaren läser upp meningsfulla alternativtexter (även kallat alt-text) för viktiga bilder, och att dekorativa bilder som inte tillför något inte har onödig alt-text.
• Testa att fylla i ett formulär med skärmläsaren. Kontrollera att varje fält har en tydlig etikett som skärmläsaren läser upp korrekt. Skärmläsaren bör också meddela eventuella felmeddelanden om fält fylls i felaktigt.
• Kontrollera att komponenter som till exempel knappar, länkar eller kryssrutor presenteras korrekt som de ska.
• Testa om skärmläsaren meddelar om viktiga händelser, som fel vid formulärinmatning, framgångsrik inlämning eller andra interaktioner som till exempel att nytt innehåll tillkommer och blir uppläst eller att en vara läggs i kundkorgen på ett korrekt sätt.

Så här gör du:

Det kan vara lite krångligt att komma i gång med en skärmläsare, men det finns en del guider att ta till, för att det ska gå lite smidigare.

Här kan du hämta information om den inbyggda skärmläsaren i Microsoft Windows.

Ladda ner, eller aktivera någon av följande skärmläsare för att starta din granskning:

• NVDA (NonVisual Desktop Access) – Windows, kan laddas ner gratis.
• JAWS (Job Access With Speech) – Windows, den mest använda skärmläsaren i världen, men kostar pengar.
• VoiceOver – macOS, iOS, iPadOS, Apples inbyggda skärmläsare och fungerar på alla deras enheter, gratis.
• TalkBack – Android, inbyggd skärmläsaren för Android-enheter, gratis.
• Narrator – Windows, Microsofts inbyggda skärmläsare för Windows, gratis (ingår med Windows).

Kontraster för text

Att använda tillräcklig kontrast mellan text och bakgrund är viktigt för de som har nedsatt syn. Principen är enkel – om inte kontrasten är tillräcklig går det inte texten att läsa. Låg kontrast gör text svår att läsa, särskilt för personer med synnedsättningar, färgblindhet eller äldre användare. Tillräcklig kontrast hjälper alla att se innehållet tydligt och minskar ansträngningen för ögonen.

Undersök:

• Kontrollera att texten har tillräcklig kontrast mot bakgrunden, särskilt för viktiga element som knappar och länkar. Du kan använda gratisverktyg för detta.
• Se till att färgkontrasten uppfyller WCAG-standarderna, som är minst ett kontrastförhållande på 4.5:1 för vanlig text och 3:1 för stor text.

Så här gör du:

Det finns flera olika verktyg som kan hjälpa dig med detta, och här har vi listat några av dem.

Colour Contrast Analyzer från TPGi

Ett gratis verktyg som hjälper dig att kontrollera kontrasterna mellan förgrund och bakgrund. Den mäter ut och säkrar att du har ett bra kontrastvärde för läsarna, så att du kan vara säker på att alla kan ta till sig informationen. Fungerar för alla digitala format och kan även användas för att kontrollera inlägg i sociala medier.

https://www.tpgi.com/color-contrast-checker/

Contrast Checker

I verktyget Contrast Checker, som också är gratis, anger du för- och bakgrundsfärg och får därefter ett översiktligt resultat för liten och stor text. Verktyget är enkelt och går snabbt att lära sig.

https://contrastchecker.com

Vill du veta mer om hur vi kan hjälpa dig?

Läs mer om vilka utbildningar vi kan erbjuda dig inom digital tillgänglighet

Fler tips hittar du på sidan Digital tillgänglighet – Inspiration och tips

Vad innebär tillgänglighet – Ordlista