En snabb tillgänglighetsgranskning kan göras med dessa fyra tester för att upptäcka merparten av de vanligaste problemen:

Testa med tangentbordsnavigation

Det händer tyvärr att webbsidor delvis är beroende av att användaren använder en mus eller pekskärm. Både användare med nedsatt motorik och användare med nedsatt syn kan ha svårt för detta så det är viktigt att det går att navigera via tangentbordet. Det förekommer även att det inte går att se vilken komponent som är markerad (har fokus) för tillfället då det saknas en visuell markering för detta. Utan en markering blir det svårt att navigera med tangentbordet då användaren inte vet var på sidan de är. Genom att testa webbsidor med tangentbordsnavigation går det ofta att hitta många generella problem. 

Så gör du:

  • Använd tab-tangenten för att stega runt på sidan.
  • Använd enter-knappen för att trycka på knappar, länkar och fälla ut menyer.
  • Använd pil-tangenter för att stega mellan menyalternativ i utfällda rullgardinsmenyer och radioknappar.
  • Använd escape-knappen för att stänga menyer och dialogrutor.
  • Testa gärna flera andra snabbkommandon som att home- och end-knapparna hoppar till första eller sista valet i en rullgardinsmeny eller att page down-knappen scrollar ner en skärm på sidan.

Kontrollera att:

  • Det element som är i fokus (det som är aktivt för tillfället) är alltid tydligt visuellt markerat, till exempel att det är omslutet av en ram med god färgkontrast.
  • Alla funktioner på sidan går att nå och använda med tangentbordet.
  • Innehåll som går att fälla ut både kan öppnas och stängas igen.
  • Dialogrutor som öppnas hamnar i fokus automatiskt så att det direkt går att stega vidare i dialogrutans innehåll.
  • Osynliga element kan inte få fokus, till exempel att det inte går att stega in i menyer som är ihopfällda.
  • Funktioner som använder "dra och släpp" eller komplexa rörelser som swipe eller skakning går att utföra på annat sätt, till exempel genom knappar för att flytta upp och ner eller för att växla till föregående eller nästa bild i ett bildspel.
  • Om det finns funktioner som laddar in mer innehåll så sätts fokus i början av den nya innehållet så att användaren inte behöver stega tillbaka själv.

Testa hur innehållet anpassar sig

Många användare behöver anpassa sin upplevelse på webben för att kunna ta till sig informationen så det är viktigt att en sida är anpassningsbar och responsiv. Så här kan du testa några av de vanligaste typerna av anpassning.

Så gör du:

  • Zooma in sidan till 200% och utforska - I de flesta webbläsare kan du trycka Ctrl (eller Cmd) och plus för att förstora innehållet och Ctrl och minus för att förminska innehållet.
  • Ändra textstorleken i webbläsarens inställningar och sätt den till stor.
  • Förminska bredden på webbläsarfönstret eller använd en enhet med mindre skärm.
  • Testa sidan i både profil- och landskaps-läge.

Kontrollera att:

  • Innehållet förstoras och presenteras i en logisk ordning så att det går att förstå och läsa.
  • Inget relevant innehåll försvinner.
  • Inget innehåll kapas, pressas ihop, överlappar, ligger bakom eller blir oläsligt på något annat sätt.
  • Det finns tillräckligt med luft runt innehåll och komponenter så att det går att se vad som hör ihop.
  • Långa ord radbryts för få plats i sina behållare och skapar inte sidoscroll.
  • Text klipps inte av med "...".

Testa med skärmläsare

Det är få användare som faktiskt använder skärmläsare men för dem som gör det är verktyget ovärderligt och det är kritiskt att webbplatsen fungerar även för dem. Även små problem kan leda till att hela sidan blir obrukbar för dessa användare. Därmed är det väldigt viktigt att testa hur en sida upplevs via skärmläsare.

Så gör du:

De flesta operativsystem har en inbyggd skärmläsare som är gratis att använda.

  • iOS – VoiceOver, finns inbyggt direkt i iOS.
  • Android – TalkBack, finns inbyggt direkt i Andoird.
  • Windows – Narrator, finns inbyggt direkt i Windows.
  • Windows – NVDA, gratis och open-soruce skärmläsare som är lite kraftfullare än Narrator och går att ladda ner för den som vill ha lite mer funktionalitet att testa med.

Att komma igång med en skärmläsare kan ta en stund, men det går relativt fort att lära sig grunderna, så stressa inte om det känns främmande i början. Läs igenom komma igång-guider och bekanta dig med hur skärmläsaren fungerar.

Deque University har guider if textformat för de flesta skärmläsare.

A11ycast har videoguider för de flesta skärmläsare.

Vi rekommenderar att du inte tittar på skärmen samtidigt som du använder en skärmläsare, så ta på dig en ögonbindel och prövar att navigera på sidan som en blind besökare.

Kontrollera att:

  • Innehåll läses upp på ett logiskt sätt så att det går att förstå.
  • Knappar och länkars texter läses upp. Texten förklarar på ett tydligt sätt vad knappen gör eller vart länken leder.
  • Meningsbärande bilder presenteras med en alternativ text som förklarar bildens motiv.
  • Komponenter presenterar vad de är, till exempel "Knapp", "Länk" eller "Kryssruta".
  • Komponenter presenterar vilket tillstånd de har, till exempel "Utfälld", "Ihopfälld" eller "Aktiv".
  • Det presenteras vilken typ av innehåll som ska anges i formulärfält. Till exempel "Lösenord" eller "E-post".
  • När det sker saker på sidan så meddelas detta av skärmläsaren. Till exempel när vara läggs till i kundkorg ("Vit T-shirt lades till i kundkorgen"), när filtrering av artiklar ändras ("Visar 9 nyheter för år 2024") eller om det uppstår valideringsfel för formulärfält ("Fältet e-postadress är obligatoriskt att ange").

Automatiskt test

Automatiska testverktyg är en stor hjälp för att hitta tillgänglighetsproblem på bara några sekunder. De är ofta mycket bra på att hitta vissa typer av problem som kan vara svåra för människor att identifiera, till exempel fel i källkoden. De fungerar också som ett sätt att snabbt "ta tempen" på en hemsidas tillgänglighetsnivå.

Tyvärr kan automatiska testverktyg inte hitta alla problem. Skaparna bakom verktyget Axe, som idag används i bakgrunden av många testverktyg, hävdar att de kan hitta ungefär hälften av möjliga tillgänglighetsproblem, som ett referensvärde på hur mycket automatiska tester kan hjälpa i dagsläget. Därför rekommenderar vi dem som en del av dessa grundläggande tester utan att lägga ansvaret helt i teknologin.

Det finns mängder av verktyg för att testa tillgänglighet, så hitta ett verktyg som passar dig och dina behov. Ett webbläsartillägg är enkelt att använda och finns nära till hands men kan vara mindre kraftfullt än andra tjänster. Här är några förslag:

Så gör du:

  • Kontrollera om verktyget rapporterar några brister.
  • Utvärdera om det faktiskt är ett problem, ibland har verktygen fel.
  • Håll utkik efter mönster eller grupper av fel och utvärdera om det är något som behöver ändras i era metoder för att undvika dem i framtiden.
  • Tänk på att alla fel inte kan hittas av automatiska tester.

En mer tillgänglig webb

Genom att utföra dessa tester kommer en webbsida få bättre tillgänglighet vilket gör att fler användare kommer kunna använda sidan. Det finns möjligen fler problem som vi inte hittat men som paretoprincipen säger: åttio procent av symptomen beror på tjugo procent av orsakerna. Vänta inte med testning till slutet av projektet utan gör dessa tester löpande för varje funktion som utvecklas.

Mer läsning