Tidigare kursmtrl

Övning 1: Finn fem fel!

Använd valfritt verktyg/metod och försök hitta minst fem fel med textbeskrivningar här (i detta avsnitt)!

Exempel från den engelska regeringens testsida med alla tänkbara tillgänglighetsfel, licens: Open Government Licence v3.0.

Tips: Du kan testa bildtexter med

Kodgranskning (webbläsarens inspekterare)
Automattest (till exempel Wave)
Visualisering (tilläggsprogram som till exempel Web developer toolbar - obs! installera på egen risk)
Skärmläsare (har du provat Windows inbyggda skärmläsare till exempel?)

Övning 2: Proportionell förstoring (zoom)

Den som behöver förstora får plats med mindre på skärmen.
Bland annat därför behöver din sajt fungera även med en ganska liten skärm. En konkret gräns är att först vid fönsterbredd under 320 pixlar är det godtagbart att scrollning i sidled krävs.

Sök upp valfri webbsida som du vill testa.

Använd sedan webbläsarens funktion för att simulera hur webbsidan uppfattas med olika skärmbredd:

Chrome: Visa -> Utvecklare -> Verktyg för utvecklare Klicka sedan på en liten ikon som visar två olika skärmar (inringad i bilden här intill) med alt-texten "Toggle device toolbar"
Safari: Utvecklare -> Använd responsivt designläge
Firefox: Verktyg -> Webbutvecklare -> Följsamt designläge.
Edge: Utvecklarverktyg -> Enhet -> Anpassad

Prova några olika storlekar ner till 320 pixlars bredd.

Skärmavbild som visar funktionen Responsivt designläge med skärmbredd inställd på 320px

Och/eller använd mobilen - vilka pixelmått har din skärm? Du kanske kan kan testa både på bredden och höjden?!

Kontrollfrågor zoom Klicka runt lite på webbplatsen. Fungerar det bra? Behöver du scrolla i sidled?
(Det ska inte behövas, förutom vid vissa undantagsfall när kravet är uppenbart opassande.) Får allt innehåll plats? Vad händer med riktigt långa ord, om sådana finns? Avstavas de?

Nu kan du återgå till valfri fönsterbredd.

Prova också att zooma. Ibland är den funktionen spärrad av sidans metadata.

Övning 3: Förstoring av enbart text

I Chrome finns två olika varianter:

För övningen rekommenderas den enkla varianten: Välj "Mycket stor" i Inställningar -> Utseende -> Teckenstorlek.

Om du behöver testa exakt 200% teckenstorlek (gränsvärde i WCAG) så kan du istället göra följande (men skriv i så fall upp vilka värden du utgick från så att du kan ställa tillbaka efteråt):

Menyval Inställningar -> Utseende -> Anpassa teckensnitt.
Markera reglaget för teckenstorlek så visas en siffra. Justera reglaget tills siffrans värde dubblerats. Då är texten så stor som wcag kräver.

I Firefox finns en bra funktion:

Menyval Visa -> Zoom -> Zooma endast texten.
Upprepa Visa -> Zoom -> "Zooma in" (eller kommando-+) ända tills "200%" visas

Kontrollfrågor textförstoring Förstoras all text? (Om inte så beror det troligen på att textens storlek har angivits i absoluta måttenheter såsom px eller pt.) Fungerar layouten fortfarande?Vad händer med riktigt långa ord, om sådana finns? Avstavas de?

Övning 4: Avstånd mellan tecken, ord och rader

Följande länk går inte till någon annan sida utan kör ett javascript på sidan du befinner dig på. Prova att klicka på den så får du se hur den här sidans innehåll påverkas.

T e x t s p a c i n g

Om du vill återställa sidan igen är det bara att ladda om den.

Om du vill och får* kan du lagra detta javascript som ett bokmärke (till exempel genom att dra länken till ditt bokmärkesfält), och då kan du aktivera detta script när du befinner dig på vilken sida som helst, för att testa ökat avstånd mellan tecken, ord och rader på den sidan, upp till de gränsvärden som anges i WCAG.

Ett sådant bokmärke, en kallad bookmarklet, är ett enkelt sätt att testa att sidans layout är tillräckligt flexibel för användare som behöver större avstånd.

* Eftersom bookmarklets innehåller kod är det inte säkert att du kan eller bör installera sådana. Körbar kod kan ju innebära risk.

Kontrollfrågor avståndsförstoring Fungerar layouten fortfarande? Om det finns en horisontell meny - får hela menyn plats? Vad händer med riktigt långa ord, om sådana finns? Avstavas de?

Övning 5: Automatisk mätning av kontraster

Använd ett automatverktyg för att hitta innehåll med misstänkt dålig kontrast på din utvalda webbsida. Här är två exempel på verktyg, men det finns också många andra:

Chrome-tillägget Accessibility Insights for Web. Använd verktygets automatiska granskningsfunktion. Denna funktion kan även rapportera en hel del andra typer av problem, men försök att fokusera på kontraster just nu.
Online-testverktyget wave.webaim.org. Där matar du in adressen till den sida som du vill granska, så får du en mängd olika symboler infällda i sidan. Några av dem kan gälla kontrastproblem.

Kontrollfrågor automatisk kontrastmätning Hittade verktyget några brister? Var verktygets anmärkningar motiverade, eller hade verktyget gjort en felbedömning? Hittar du samma brister om du testar med flera olika automatverktyg?

Övning 6: Manuell kontroll av kontraster

Försök att göra en manuell bedömning av vilket innehåll på en webbsida som har dålig kontrast mot bakgrunden, eller som befinner sig i riskzonen för detta. Undersök både text, knappar och andra kontroller, och viktiga grafiska element i exempelvis illustrationer och diagram.

Ett sätt att identifiera innehåll som kan behöva ökad kontrast är att växla till gråskala. Innehåll med snarlik ljusintensitet smälter då in i varandra och är svåra att särskilja. Du kan växla till gråskala exempelvis med Accessibility Insights for Web eller med inställningar i ditt operativsystem.

Använd gärna programmet Colour Contrast Analyser för att få mätvärden. Det går till så att du med en "pipett" mäter färgen på två olika pixlar och får ett värde som beskriver ljusförhållandet mellan dem. Verktyget svarar också på om kontrastvärdet uppnår de olika gränsvärden som gäller enligt WCAG.

Kontrollfrågor manuell kontrastkontroll Hittade du samma element som automatverktygen? Blir det någon skillnad när du ändrar bredd på fönstret eller förstorar texten? Det är inte ovanligt att innehållet då hamnar mot en annan bakgrund. Kan du med blotta ögat avgöra vilket innehåll som är i riskzonen?