Testa användbarhet och tillgänglighet

Testning kan uppmärksamma saker som är specifikt för din applikation men det kan också vara saker vi behöver ta in i KTH Style för att förbättra den. Det är därför viktigt att du återkopplar till ansvariga för KTH Style (se KTH Style guide ) när du hittat områden för förbättring.

Du behöver testa både genom att använda verktyg/tjänster för tillgänglightstester (se punkt 1 nedan), göra användningstester (se punkt 2 nedan) och göra manuella tester (se punkt 3 nedan), eftersom de olika testerna fångar olika tillgänglighetskrav. 

Testerna nedan kan göras under tiden du utvecklar och ska också göras som en del av acceptanstestet. 

1. Testa tillgängligheten med olika tjänster/verktyg

Webbsida

Det finns flera vertyg som hjälper dig som utvecklare när det kommer till att testa en sida eller en applikation utifrån tillgänglighet. Nedan följer några vertyg och tips som du kan utgå ifrån:

• Lighthouse  - Ett webbläsarplugin som enkelt kan skanna den sida du står på och rapportera eventuella fel.

• IBM Equal Access Accessibility Checker  - Även detta är ett webbläsarplugin som kan skanna den sida du står på och listar det som inte är bra ur ett tillgänglighetsperspektiv.

• W3C Validator  - Testar din HTML ur ett tekniskt perspektiv så att det är tekniskt och semantiskt korrekt.

• Tota11y  - Ännu ett webbläsarplugin (finns för olika webbläsare).

Jobbar du på KTH:s IT-avdelning och bygger din applikation via CD/CI-pipelinen så kan du konfigurera den i Cellus, närmar bestämt i docker-stack.yml för respektive projekt, så att den kör tester på valda URL:er varje gång du pushar kod till dess Gir repo. Rapporterna kan sedan läsas i applikationen Inspect som du finner här: app-r.referens.sys.kth.se/inspect  (beta version under uppbyggnad).

Pdf

Tillgänglighetsanpassa pdf-dokument i Adobe Acrobat Pro

2. Gör användningstester

Testa om användaren förstår och kan använda

Gör du sidor med ny information/funktioner eller betydande förändringar behöver du göra användningstest för att testa att användare kan förstå information och/eller utföra det som funktionen är till för. Flera av tillgänglighetskraven i webbriktlinjer.se  kräver också användningstest för att se att de uppfylls: 1.3.2, 2.4.2, 2.4.4, 2.4.6, 3.2.1, 3.2.2, 3.2.3, 3.2.4, 3.3.1, 3.3.2 och 3.3.3.

Användningstest

Se instruktioner hur du genomför ett användbarhetstest för vidareutveckling .

3. Gör manuella tillgänglighetstester

3A. Testa olika skärmstorlekar och skärmriktningar

Testa följande tillgänglighetskrav i webbriktlinjer.se : 1.3.2, 1.3.4 och 1.4.10.

Vad

• Granska sidan visuellt

Hur

• Testa i alla webbläsare
• I följande skärmbredder:
  • Full skärm
  • I-pad läge
  • Mobilläge
• Och i roterat mobilläge 

 Se detaljer på Utrustning, inställningar för tester .

Kontrollera

• Att innehållet har en meningsfull, logisk läsordning 
• Att innehållet presenteras rätt:
  • Innehåll och funktioner är tillgängliga och fungerar
  • Innehållet inte överlappar eller blir helt eller delvis oåtkomligt

Notera!

• Fel, undantag, avvikelser och frågor

3B. Testa om det går att förstora text

Testa följande tillgänglighetskrav i webbriktlinjer.se : 1.4.4.

När

• Kontrollera förstoring vid utveckling av stilmallar och sidmallar

Vad

• Förstora texten

• Granska sidan visuellt

Se Utrustning och inställningar för tester .

Hur

• Testa med alla webbläsare
• I olika skärmbredder: 
  • Full skärm
  • I-pad läge
  • Mobilläge 
• Och med roterat mobilläge 
• Förstora text görs i olika webbläsare under Inställningar.

Se detaljer i Utrustning, inställningar för tester .

Kontrollera att

• Inget går sönder:
  • Till exempel att delar av texten hamnar bakom en bild, krockar med annan text eller innehåll hamnar utanför sidan

Notera!

• Fel, undantag, avvikelser och frågor

3C. Testa om det går att öka avstånd mellan tecken, rader, stycken och ord

Testa följande tillgänglighetskrav i webbriktlinjer.se : 1.4.12.

Vad

• Öppna sidan du ska granska och klicka på: Textspacing Bookmarklet 
• Granska sidan visuellt

Hur

• Testa i alla webbläsare 
• Med olika skärmbredder:
  • Full skärm
  • I-pad läge
  • Mobilläge
• Och med roterat mobilläge
• Installera "Textspacing Bookmarklet"

 Se detaljer på Utrustning, inställningar för tester .

Kontrollera att

• Inget går sönder:
  • Till exempel att delar av texten hamnar bakom en bild, krockar med annan text eller innehåll hamnar utanför sidan

Notera!

• Fel, undantag, avvikelser och frågor

3D. Testa om det går att navigera med hjälp av tangentbordet

Testa följande tillgänglighetskrav i webbriktlinjer.se : 2.1.1, 2.1.2, 2.4.3. 2.4.7, 3.2.1 och 3.2.2.

Vad

• Tabba sig igenom sidan med hjälp av tangentbordet

Hur

• Alla webbläsare
• I stor skärm och I-pad läge
• Genom att använda kortkommandon

Se detaljer på Utrustning, inställningar för tester .

Kontrollera

• Att sida kan tabbas utan hastighetskrav
• Att det går att nå alla interaktiva element på sidan i en logisk ordning:
  • Först huvud, sen innehållsdelen på sidan, sen vänsternavigation och sist footer
  • Innehållet för respektive del ska gås igenom på samma sätt som det är presenterat på sidan

• Att användaren inte fastnar någonstans på sidan:
  • Dit man kan navigera med tangentbord ska det också gå att ta sig vidare med tangentbord

• Att fokus är tydligt för varje typ av element på sidan:
  • Rutan som visar fokus ska ha heldragen ej för tunn linje med tillräcklig kontrast. Exempel på tydlig fokusmarkering:

  

• Att inga oväntade förändringar sker vid fokusering
• Att användaren kan välja element. Exempel:
  • Testa ett urval av länkar på sidan
  • Testa olika utfall i formulär:
    • Inget svar, många svar, felmeddelande och så vidare
    • Markera/avmarkera kryssrutor
    • Bra/naturligt fokus. Fokus ska vara kvar eller på nästa element efter ett val.

Notera!

• Fel, undantag, avvikelser och frågor

3E. Kontrollera strukturen i skärmläsare

Testa följande tillgänglighetskrav i webbriktlinjer.se : 1.3.1 och 2.4.1.

Vad

• Granska strukturen för sidan visuellt och genom att lyssna

Hur

• Testa i:
  • Alla webbläsare
  • I stor skärm
• Använd skärmläsare

Se detaljer på Utrustning, inställningar för tester .

Kontrollera

• Att semantisk struktur är korrekt: Rubriker med rätt h-element.
• Kontrollera att sidan följer riktlinjer för landmarks, se Sidans struktur  (“Landmarks för huvud, fot, vänstermeny” och “Landmarks för huvudinnehåll”)
• Att användaren kan hoppa förbi återkommande innehåll

Notera!

• Fel, undantag, avvikelser, frågor

3F. Gå igenom sidan med skärmläsare

Testa följande tillgänglighetskrav i webbriktlinjer.se : 1.1.1, 1.3.1, 1.3.2, 3.1.2, 3.2.1, 4.1.2, 4.1.3

Vad

• Gå igenom sidan och ta del av innehåll genom att lyssna och interagera med alla element med hjälp av tangentbordet.

Hur

• Testa i alla webbläsare
• I stor skärm
• Använd skärmläsare

 Se detaljer i Utrustning, inställningar för tester

Kontrollera att

• Läsordningen är logisk.
• Bildtexter läses upp (dekorativa bilder ska inte läsas upp).
• Korrekt språk
• Komponenter läses upp korrekt och att det går att interagera med dem:
  • Rubriker, listor, formulärselement, tabeller, skräddarsydda komponenter
• Se till att meddelanden som inte är i fokus presenteras.

Notera!

• Fel, undantag, avvikelser och frågor

3G. Använd röststyrning

Testa följande tillgänglighetskrav i webbriktlinjer.se : 2.5.3.

Vad

• Gå igenom sidan och säg det som står på knappar och andra interaktiva element på sidan

Testa i

• Alla webbläsare
• I stor skärm
• Använd skärmläsare/röststyrning

Se detaljer på Utrustning, inställningar för tester .

Kontrollera

• Att användaren kan interagera med knappar och andra interaktiva element med rösten

Notera!

• Fel, undantag, avvikelser och frågor

4. Uppdatera då det påträffas fel

Om du hittar tillgänglighetfel så kan det vara något av följande som behöver åtgärdas:

• Kod i KTH Style app:
  • Kontakta ansvariga för KTH Style (se KTH Style guide ).
• Kod på appnivå:
  • Ändra egen kod på app-nivå samt
  • Om det är ett generellt problem som kan behöva uppdaterade riktlinjer, kontakta ansvariga för KTH Style (se KTH Style guide ).