Övning 4: Storleksförändringar
Liten skärm:
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 -> Toggle device toolbar
- Safari: Utvecklare -> Använd responsivt designläge
- Firefox: Verktyg -> Webbutvecklare -> Följsamt designläge.
- Edge: Utvecklarverktyg -> Enhet -> Anpassad
Välj 320 pixlars bredd. Det motsvarar en liten mobil - eller en stor skärm med förstoring.
- Klicka runt lite på webbplatsen. Fungerar det bra?
- Behöver du scrolla i sidled? (Det ska inte behövas)
- 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.
Extrauppgift 1: Förstoring av enbart text
I Chrome kan du göra så här:
- 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
- Förstoras all text?
- Fungerar layouten fortfarande?
Extrauppgift 2: Avstånd mellan tecken, ord och rader:
Obs! Inkluderar externa script, så använd inte på hemliga eller känsliga sajter.
Prova sedan (på några sidor) att välja bokmärket "Text spacing".
Fungerar layouten?
Övning 7: Granskningsverktyg online
Testa din sajt med någon/några av följande!
Fler verktygstips på webbriktlinjer.se/testa
- Får din sajt samma resultat med alla verktyg?
- Vilket verktyg gillar du bäst?
Övning 8: Tilläggsprogram till Chrome
Testa själv eller med din bordsgranne valfri sajt med:
- Tota11y (Prova “screen reader wand” och visa alla landmarks.)
- Accessibility Insights for Web (Automatgranska, prova tabb-ordning.)
Övning 9: Testa med simulator
- Web Disability Simulator (Prova exempelvis färgblindhet och dyslexi.)
Vill du prova fler simulatorer? Se webbriktlinjer.se/simulera/