Kom igång och testa tillgänglighet

Att testa tillgänglighet kan kännas avancerat, som något bara specialister kan göra. Men så är det inte! Det finns tester alla kan och bör göra. På den här sidan summerar vi tester och verktyg vi rekommenderar.

Mät kontraster på text och grafik

Goda kontraster är en förutsättning för att personer med exempelvis nedsatt syn ska kunna urskilja exempelvis text eller illustrationer. Det finns flera olika verktyg för att mäta kontraster, bland annat WCAG Color contast checker.

Där kan du se kontrasterna på olika element på sidan och om några är underkända. Du kan också använda en pipett eller färgvärden för att få kontrastvärdet för de färgerna. Se till att kontrasten mellan text och bakgrund överstiger 4.5:1. På icke-text som ikoner, diagram eller kantlinjer runt formulärelement ska kontrasten vara över 3.0:1.

Skärmbild av verktyg med kontrastvärde på webbsida — Kontrastverktyg som mäter färger på sidan.

Testa tangentbordsnavigation

Se till att alla klickbara element kan nås med tangentbord. Det är viktigt för att användare med olika hjälpmedel ska kunna styra webbplatsen eller appen.

Såhär testar du:

I webbläsaren använder du tabb-tangenten för att gå framåt mellan alla knappar, länkar eller formulärelement
Gå bakåt med skift och tabb.
Aktivera ett element i fokus med enter.
I vissa element, som exempelvis en del formulärelement eller flikar behöver du använda piltangenter för att gå mellan valen. I en grupp med radioknappar exempelvis. Du väljer något i listan med mellanslag.

Förstoring och ökad textstorlek

Sidor ska gå att zooma till minst 200% och alla funktioner ska gå att använda och innehåll ska synas. Man ska inte behöva scrolla i sidled.

Testa också att i webbläsaren eller i din telefons inställningar öka textstorleken till det dubbla. Texten ska då anpassa sig till din inställning.

Webbläsare zoomar in sida på 200% — Webbplatsen visas med inzoomning på 200 procent.

Smidiga tillägg i webbläsare

Det finns tillägg, plugins, där du kan testa bland annat faktorer som påverkar användare med skärmläsare - utan att du behöver kunna testa med skärmläsare.

Plugin: Accessibility insights for web

Detta är ett plugin som du kan ladda ned för webbläsarna Edge eller Chrome. Med detta verktyg finns fler möjligheter men det vi vill lyfta fram är deras Ad hoc tools. Där kan du testa den tekniska tillgängligheten på ett visuellt och enkelt sätt.

Där kan du välja att slå på visuella markörer för exempelvis:

Tab stops - numrering visar visuellt ordningen när du tabbar dig fram på sidan med tangentbordet. Denna funktion är användbar när du vill visa på en knasig ordning eller om något missas. Att navigera med tangentbord är en viktig funktion för att användares hjälpmedel ska kunna ta sig fram på sidan.
Headings - visar visuellt med exempelvis h1, h2, h3 vart kodade rubriker finns på sidan. Det återfinns i koden, men är ofta bra för redaktörer eller testare att se visuellt.
Color - visar sidan i svartvitt. Det gör det tydligt om designen håller även för användare som inte kan urskilja färger.
Fördjupade funktionerna "Accessible names" eller "Landmarks" visar områden eller namnen på element som skärmläsaranvändare får uppläst när man navigerar på sidan.

Översikt av reglare i tillägget Accessibility insights for web — Översikt av reglage i tillägget Accessibility insights for web.

Tabbordningen visas visuellt på webbsida — Med tab stops påslaget kan vi följa tabbordningen på sidan.

Plugin: web developer toolbar

Du kan använda detta plugin att markera visuellt många olika saker som finns i koden. Det mest intressanta finns antingen under Images eller Outline.

Till exempel:

Alt-texters innehåll, klicka på "Display Alt Attributes" under Images-flikeken
Tabellers kod, om tabellrubriker har th för rubrik och td för celler exempelvis. Detta finns under Outline.
Rubrikers nivåer. Detta finns under Outline.
Och mycket mer...

Afa Försäkring — Fliken Images innehåller bland annat display alt attributes.

Våga testa skärmläsare

Att testa med riktiga skärmläsaranvändare är alltid att föredra, men för att få till mer mängd tester och löpande är det också viktigt att andra testar. Det kan ta lite tid att lära dig hantera hjälpmedlet. Men när du väl gjort det så är det så värt det! Det är praktiskt att kunna testa hela webbsidor och lyssna in hur helheten låter med skärmläsare.

Program: skärmläsaren NVDA

Du kan ladda ned skärmläsaren NVDA i Software center.

Grundinställningar

Lägg till en fokusmarkör så du ser var skärmläsaren läser, under Inställningar väljer du Syn, sedan Aktivera överstrykning och kryssar i Markera navigatorobjektet.
Om du vill använda NVDA tangent kan du göra det, ursprungligen är det Skiftlås.

Navigation och kommandon

Om du tycker skärmläsare pratar för mycket kan du lätt tysta den utan att fokus flyttas med CTRL.
Navigera med piltangenterna upp och ned för att gå mellan alla element på sidan, höger- och vänsterpilarna gör att den läser tecken för tecken.
Precis som utan skärmläsare kan du hoppa mellan alla klickbara element med tabb, bakåt med skift+tabb, och aktivera knappar och länkar med enter.
Lyssna om allt har tydliga namn, roller (exempelvis knapp) och status (exempelvis markerad eller utfälld).
Använd guider för att fördjupa dig i kommandon, då kan du exempelvis hoppa mellan rubriker, landmärken eller liknande:
- Deques lista över kommandon
- Webaims guide för kommandon