Kriterier för digital tillgänglighet

Börja med att kontrollera om det finns ljudfiler eller video med ljud på sidan. Om det finns, kontrollera att inget spelas upp automatiskt. Här följer några alternativ:

1. Ladda sidan och lyssna efter ljud som spelas upp automatiskt. Om du inte hör något ljud är den här punkten godkänd.

2. Ladda sidan och titta på den aktiva sidans flik i webbläsarens flikfält. Kontrollera att det inte visas någon högtalarikon i fliken. Om ingen ikon visas är den här godkänd.

3. Öppna webbläsarens utvecklarverktyg genom att trycka F12. Använd sökfunktion och sök efter <audio> eller <video>. Om du ser att något av dessa element finns i koden, kontrollera att attributet autoplay är satt till false.

Börja med att kontrollera att om det finns något innehåll som rör sig, blinkar eller scrollar på sidan. Om det finns, kontrollera om det rör sig automatiskt, alltså utan att användaren aktivt har valt att något ska röra sig och hur länge rörelsen i så fall pågår. Om den pågår i mindre än 5 sekunder är den ett godkänt undantag.

Video och animationer

Börja med att kontrollera om det finns video eller andra animationer, exempelvis video utan ljud eller gif:ar på sidan.

Kontrollera att ingen video startar automatiskt eller körs i bakgrunden på sidan. Automatiskt innebär att något startar oberoende av vad användaren gör. Allt som rör sig ska vara en följd av vad användaren väljer att göra.

Funktionella mikroanimationer

Exempel på en funktionell mikroanimation är när en varukorg blinkar till när användaren har lagt till en produkt. Det kan också vara en indikator som rör sig för att visa status, exempelvis en progressbar för ned- eller uppladdning av en fil. Dessa är alltså tillåtna.

Godkända undantag

Följande exempel är godkända undantag. De får alltså blinka eller röra sig mer än fem sekunder.

• Laddningsindikator som visar att en hel sida laddas

• Textmarkör, en så kallad caret, som blinkar i ett inmatningsfält när fältet har fokus.

1. Kontrollera om det finns innehåll på sidan som uppdateras och om det i så fall görs automatiskt. Automatiskt innebär här att innehåll läggs till, ändras eller försvinner av andra anledningar än att användaren själv har initierat ändringen.

2. Att sökresultat ändras efter att användaren har gjort en sökning är vedertaget, och ingår inte i det här kriteriet. Det handlar snarare om innehåll som ändras dynamiskt och om innehåll som ändras på grund av andra anledningar. Exempelvis efter ett visst tidsintervall, ändringar som görs av andra användare eller andra omständigheter.

3. Om sådant innehåll finns, fundera på vilken typ av innehåll det är, genom att gå igenom kategorierna av uppdateringar nedan.

Kritisk information

Bedöm allvarlighetsgraden. Om informationen är avgörande betydelse för användaren i det aktuella sammanhanget, visa informationen direkt. Om informationen är viktig men inte kan ses som kritisk, ge användaren informationen i samband med att användaren gör en ändring, exempelvis går till en annan sida.

Tidsstyrda eller slumpmässiga ändringar

Undvik den här typen av ändringar helt. Fundera istället på vad som är den viktigaste informationen och hur den kan presenteras för användaren på ett enkelt och meningsfullt sätt. Se till att det alltid finns tillräckligt med tid för användaren att ta till sig av informationen.

Information som inte behöver förmedlas direkt

Exempel: väderinformation eller antalet lediga platser på ett event. Är det nödvändigt att användaren får informationen direkt? Ibland räcker det att informationen uppdateras i samband med att användaren exempelvis laddar om eller går till en ny sida. Undvik att ladda om hela sidan.

Innehåll som ändras i realtid

Exempel på innehåll som ändras i realtid: en chattfunktion eller kommentarer i sociala medier.

1. Utgör en funktion sidans huvudsakliga innehåll?

2. Är funktionen sekundär och visas parallellt med annat innehåll?

Bestäm vilket värde användaren har av att informationen visas. Behöver den visas just där och då? Kan det tas bort helt eller länkas till annan sida?

Kan användaren pausa, stoppa eller dölja uppdateringar?

Kontrollera att det går att pausa, stoppa, dölja eller på annat sätt styra hur ofta uppdateringen sker. Till exempel: Användaren vill ändra inställningarna i en chatt. Användaren kan tillfälligt dölja chatten genom att inställningarna öppnas på en annan sida eller i en annan flik.

1. Kontrollera om det finns något innehåll som blinkar. Kontrollera speciellt filminnehåll.

2. Säkerställ att innehållet inte blinkar snabbare än tre gånger per sekund.

Var extra uppmärksam med att visa video som innehåller diskotekslampor, pyroteknik, explosioner eller andra snabba hopp mellan ljus och mörker eller ljus i olika färger. Riskera aldrig att orsaka epileptiska anfall hos våra användare.

1. Identifiera alla formulär på webbsidan eller i tjänsten.

2. Kontrollera att inget av formulären innehåller en captcha-funktion som användaren måste passera för att kunna skicka formuläret.

1. Identifiera alla bilder som innehåller text på den aktuella sidan. Logotyper utgör undantag.

2. Kontrollera om bilder som innehåller text fyller ett visuellt syfte och om syftet återges i bildernas alt-texter i koden. För komplexa bilder där en kort alt-text inte räcker till för att beskriva bilden; hänvisa i alt-texten till var användaren kan hitta motsvarande information i riktig text.

3. Om bilder innehåller relativt mycket text, överväg att presentera innehållet som riktig text istället för text i bild.

Bedöm om den aktuella sidan:

1. är en av många sidor på en webbplats

2. är en sida som genererats som ett resultat av en uppgift

3. är en del av en process eller tjänst som användaren bara kan ta sig till genom att logga in.

Om påstående 1 ovan är sant, kontrollera på vilka sätt som användaren kan nå den aktuella sidan, exempelvis genom att söka eller att hitta sidan i en informationsstruktur från en meny. Om den aktuella sidan är en av många på en webbplats och användaren bara kan nå sidan på ett sätt, är detta krav inte uppfyllt.

Om något av påståendena 2 eller 3 ovan är sant är detta kriterie inte relevant.

För tjänster eller webbsidor där användaren kan fylla i och skicka information, gör följande:

1. Utför alla steg i tjänsten för att simulera att en användare utför en uppgift. För att undvika eventuella fel i bakomliggande system bör testdata användas här.

2. Kontrollera om den aktuella tjänsten eller formulären på webbsidan avslutas med en knapp för att granska informationen i formuläret.

3. Kontrollera att nästa steg i tjänsten tar användaren till en sida där användaren kan granska den information som den har angett i formuläret.

4. Kontrollera att det finns en möjlighet för användaren att gå tillbaka och korrigera information som har blivit fel.

1. Påbörja en uppgift, exempelvis genom att logga in och utföra något

2. Överge uppgiften och låt sidan vara inaktiv tillräckligt länge för att den övre gränsen för inaktivitet ska inträffa om det finns en övre tidsgräns.

3. Kontrollera att användaren inte skickas vidare till en annan sida innan tidsgränsen har passerat.

För att inte behöva vänta ut en tidsgräns på över 20 timmar eller mer, kan du som utvecklare ange en kortare tidsgräns för att kontrollera att det som ska ske när tidsgränsen nås faktiskt sker. Exempelvis någon typ av varningsmeddelande eller att användaren skickas vidare till en annan sida.

1. Gör en sökning på den aktuella webbsidan med exempelvis Google. Kopiera sidans webbadress, gå till sökfältet, klistra in webbadressen och sök. Den text som visas som en länkas i sökmotorns första sökträff är sidans titel.

2. Granska koden på sidan genom att öppna webbläsarens utvecklingsverktyg genom att trycka på F12 eller högerklicka på ett objekt på sidan och välj ”Inspektera”. Nästan längst upp i sidans dokumentstruktur och innanför elementet <head>-sektionen finns sidans titel i elementet <title>.

3. Granska texten som visas för den aktuella webbsidan i din webbläsares flikfält. I Google Chrome och Microsoft Edge visas flikfältet längst upp i webbläsarfönstret. Den text som visas i fliken är sidans titel. Om du hovrar över den aktuella fliken med din musmarkör visas en utökad tooltip som innehåller sidans titel.

4. Titeln ska innehålla sidans namn och gärna beskriva sidans ämne eller syfte. Den ska vara så unik som möjligt och vara specifik och innehålla den mest relevanta informationen först. På Afa Försäkring skriver vi sidans namn följt av avsändarens namn. Exempel: "Arbetsskadeförsäkring - Vid skada på jobbet - Afa Försäkring".

1. Granska koden på sidan genom att öppna webbläsarens utvecklingsverktyg genom att trycka på F12 eller högerklicka på ett objekt på sidan och välj 'Inspektera'. Längst upp i sidans dokumentstruktur finns elementet <html>.

   • Om sidans huvudsakliga språk är svenska ska attributet lang ha värdet 'sv'. Exempel: <html lang='sv'>.

   • Om sidans huvudsakliga språk är ett annat språk än svenska, använd korrekt värde för det språket. Rätt språk kan hittas på W3Docs ISO Language Codes.

2. Du kan också testa genom att använda en skärmläsare som Jaws, NVDA, Voice Over eller Talkback. Kontrollera att sidans innehåll läses upp på svenska, sidans huvudsakliga språk är svenska.

Utgå från en sida med textinnehåll på olika språk, eller en sida med ett huvudspråk och ett område med innehåll som avviker från huvudspråket. Gör något av följande:

1. Om områdena eller textstyckena saknar attributet lang, lägg till ett sådant attribut för varje område. Om områdena ser ut att ha ett felaktigt värde i attributet lang, korrigera det i koden.

2. Starta en skärmläsare och använd piltangenterna för att navigera radvis i textinnehållet på sidan. Kontrollera om skärmläsaren byter syntetisk röst för att läsa upp innehåll på olika språk. Talsyntesen ska anpassas till textens språk.

Gå igenom webbplatsens kod och kontrollera att informationsområden är strukturerade med lämpliga HTML-element som <main>, <nav>, <section>, <form>, <article> och <aside>.

• <header>,Webbplatsövergripande del. Innehåller vanligtvis logotyp, övergripande navigation och funktioner för sök och uppläsning.

• <nav>, Navigering exempelvis i toppen av sidan eller sidonavigering om sådan används.

• <main>,Sidans huvudsakliga innehåll. Inleds med en h1-rubrik.

• <article>, Används om sidan innehåller en eller flera delar med redaktionellt material.

• <aside>, Används om sidan exempelvis innehåller information i en högerspalt.

• <section>, Används för en del av innehållet, som en del av. Börjar vanligtvis med en rubrik.

• <form>, Används för formulär. Ska omsluta hela formuläret.

• <footer>, Sajtövergripande del. Innehåller ofta kontaktuppgifter, avsändare, generell information om webbplatsen, tillgänglighetsredogörelse med mera.

1. Gå igenom sidan eller skissen och bestäm vilka av sidans texter som fungerar som rubriker.

2. Kontrollera att alla rubriker är uppmärkta som rubriker i koden med elementen <h1> till <h6>. Du kan granska direkt i koden eller använda verktyg som visualiserar alla sidans h-kodade områden, exempelvis verktyget Accessibility Insights for Web (tillägg i Chrome).

3. Kontrollera att ingen rubrik på sidan märks upp med endast fetstil eller lite större text men saknar rubrik-element i koden.

4. Kontrollera att det inte finns några tomma rubriker, alltså h-element som saknar textinnehåll.

5. Kontrollera att det inte finns några rubrikelement som används för text som inte är eller fungerar som rubriker.

1. Kontrollera att sidans första rubrik som beskriver dess huvudsakliga innehåll är uppmärkt med elementet <h1> för rubriknivå 1. Du kan granska direkt i koden eller använda verktyg som visualiserar alla sidans h-kodade områden, exempelvis Accessibility Insights for Web.

2. Kontrollera att sidans resterande rubriker har en rubriknivå som motsvarar deras plats i innehållets struktur. Vanligtvis är alla underrubriker på en webbsida underordnade sidans huvudrubrik. Varje ny sektion på sidan inleds med en rubrik med elementet <h2> för rubriknivå 2. Det gäller så länge innehållet hör ihop med eller är sammankopplat med sidans huvudinnehåll.

3. Innehåll som inte är underordnat sidans huvudrubrik, utan utgör en del av webbplatsens generella information, kan inledas med en ny rubrik på nivå 1. Exempel på detta är rubriker i webbplatsens sidfot som inte är underordnade den aktuella sidans huvudrubrik utan är ett eget område.

1. Identifiera huvudrubriker och underrubriker på sidan.

2. Kontrollera att rubriker är beskrivande och har en tydlig koppling till innehållet.

3. Testa med skärmläsare. Använd kortkommandon i skärmläsaren för att visa skärmläsarens elementlista för rubriker. I vissa skärmläsare är kortkommandot Insert eller Caps Lock + F7. I VoiceOver på Mac används VO+U för att få fram olika listor för navigation.

4. Gå igenom rubrikerna i listan och fundera över om du förstår vad rubrikerna representerar, helst utan att titta på innehållet på sidan.

1. Gå igenom textinnehållet på sidan och kontrollera om det finns fetmarkerad text eller text som visuellt märks ut på något annat sätt.

2. Högerklicka på den markerade texten och välj “Inspektera” eller “Granska” för att kontrollera koden för texten.

3. Kontrollera att texten är uppmärkt med elementet <strong> i koden, eller elementet <em> för kursiv text.

4. Testa med skärmläsare och använd piltangenterna för att navigera och läsa i texten. Om inställningarna i skärmläsaren är satta att omfatta uppläsning av stil och betoning kommer skärmläsaren att annonsera markering av fet eller kursiv text.

1. Granska innehållet och ta reda på om det är begripligt utan det visuella sammanhanget.

2. Om du upptäcker att färg, form, storlek och placering är nödvändigt för att förstå hänvisningar i innehållet, behöver du troligen omarbeta dessa.

Ställ markören i webbläsarens adressfält och använd därefter varken mus eller touchpad. Navigera dig igenom hela sidan med tabbtangenten.

• Tryck på Tabb för att navigera framåt.

• Tryck på Shift + Tabb för att navigera bakåt.

Kontrollera att det går att navigera till alla interaktiva objekt på sidan som länkar, knappar och formulärsfält. Du ska inte kunna navigera med tabbtangenten till rubriker eller brödtext.

• För varje interaktivt objekt, kontrollera att det går att aktivera komponenten.

• Tryck på Enter för att aktivera en länk.

• Tryck på Enter eller Mellanslag för att aktivera en knapp.

• Tryck på Mellanslag för att välja en kryssruta eller radioknapp.

• Tryck på Piltangenterna för att navigera mellan radioknappar, kryssrutor i grupp, mellan valen i en dropdown-meny eller autocomplete-lista.

1. Navigera igenom hela sidan med tabbtangenten tills att du åter står i webbläsarens adressfält. Säkerställ att fokus aldrig fastnar någonstans.

2. Öppna en komponent. Exempelvis en datumväljare. Kontrollera att det går att navigera ut ur komponenten och vidare till nästa komponent.

3. Öppna ett modalt fönster. Kontrollera att det går att avbryta eller stänga modalen med tangentbordet och att du inte fastnar i den.

Metod 1: Testa på egen hand

Navigera igenom hela sidan med tabbtangenten och testa att tabbordningen följer sidans läsordning. Ordningen ska kännas intuitiv och förutsägbar.

Metod 2: Testa med ett plugin

• Ladda ned verktyget Accessibility Insights for Web (tillägg i Chrome) för att testa och välj 'Tab stops'.

• Sätt markören i webbläsarens adressfält och navigera dig igenom sidan med tabbtangenten. När du navigerar mellan de interaktiva elementen på sidan visas deras ordning med en siffra i en cirkel och en linje mellan varje element.

• Titta på mönstret och se till att ordningen följer sidans läsordning och att det inte finns några 'korsade linjer'.

• Om tabbordningen är korrekt ska inga linjer korsa varandra.

Metod 3: Testa med en skärmläsare

Använd skärmläsare och navigera dig igenom sidan med tabbtangenten. Tabbordningen ska följa den ordning som innehållet läses upp.

Modala fönster och dialogrutor

• Öppna en modal och kontrollera att du får fokus inne i modalen.

• Kontrollera att det går att navigera mellan objekten inne i modalen och att fokus aldrig flyttas utanför den.

• Stäng modalen genom att trycka på Stäng-knappen eller Esc-tangenten.

• Kontrollera att fokus hamnar på rätt ställe efter att du stängt modalen.

1. Kontrollera att fokusmarkören inte är dold i koden. Vanliga misstag är att sätta outline till 0 eller none i sidans CSS-kod.

2. Navigera igenom sidan med tabbtangenten. När du navigerar till ett objekt, kontrollera att det är tydligt markerat att det är just det objekt som har fokus.

3. Om du använder helt egengjorda komponenter behöver du själv säkerställa att komponenten har synligt fokus.

1. Ställ markören i webbläsarens adressfält. Tryck en gång på tabbtangenten. I vissa webbläsare kan du först behöva navigera förbi flera knappar i webbläsarens inbyggda gränssnitt, exempelvis bokmärken och favoriter.

2. Kontrollera att en länk med länktexten 'Gå till sidans innehåll' eller liknande visas längst upp på sidan. Länken ska alltså vara det första interaktiva objektet på sidan och före sidans logotyp. Den ska bara vara synlig när den har fokus.

3. Tryck på Enter för att aktivera länken. Fokus ska nu flyttas till sidans huvudinnehåll, oftast dess första H1-rubrik. Beroende på hur stort sidhuvudet är kan sidan scrolla ner lite så att huvudrubriken hamnar högst upp på den synliga delen av sidan.

4. Navigera till nästa interaktiva objekt genom att trycka på tabbtangenten en gång till. Kontrollera att fokus då hamnar på nästa interaktiva objekt efter huvudrubriken.

Om inte kortkommandon har byggts in explicit, finns egentligen inget behov av att göra tester av denna punkt. Om webbsidan eller tjänsten som ska testas inte byggts av det egna teamet, och det är oklart huruvida kortkommandon har byggts in, testa genom att göra följande:

1. Testa om det finns kortkommandon kopplade till alfabetiska tangenter genom att trycka på varje tangent i tur och ordning.

2. Notera om det sker något i gränssnittet när tangenterna trycks ner.

3. Gör samma test med numeriska tangenter och notera om det sker något i gränssnittet när tangenterna trycks ner.

4. Om det sker något i gränssnittet när en tangent trycks ner, notera vad som sker. Lösningen kommer vara att justera kortkommandot att inte aktiveras med enskilda bokstäver eller siffror, exempelvis att lägga till en eller flera modifieringstangenter.

Sätt fokus på en komponent, antingen genom att klicka på komponenten men helst genom att navigera till den med tabbtangenten. Kontrollera därefter följande:

1. Inget nytt fönster eller ny modal öppnas.

2. Fokus är kvar på komponenten till dess att användaren väljer att flytta fokus.

3. Användaren är kvar på sidan.

4. Formulär skickas inte.

5. Det sker ingen större förändring av innehållet på sidan.

Testa gärna med användare för att kontrollera att allt som sker uppfattas som intuitivt och förväntat.

1. Navigera igenom sidan med tabbtangenten och kontrollera om ny information visas i anslutning till komponenter eller interaktiva objekt när de får fokus.

2. Använd musmarkören och hovra över komponenter och interaktiva objekt. Kontrollera om ny information visas i anslutning till objekten vid hover.

3. Jämför och kontrollera att information som läggs till vid komponenter och interaktiva objekt vid fokus eller hover är möjlig att få fram med båda navigationssätten. Innehåll ska inte förutsätta att användaren kan navigera med antingen tangentbord eller mus.

4. Kontrollera att tooltips och liknande komponenter enbart visar extra information när användaren har valt att interagera med komponenten, exempelvis genom att klicka på komponenten eller trycka Enter när komponenten har fokus.

Gå igenom sidan och kontrollera att alla komponenter går att använda.

Om de är inaktiva, överväg att ändra konceptet. Om de fortsatt ska vara inaktiva se till att de följer dessa råd:

• Det ska finnas information i text som förklarar vad användare behöver göra för att aktivera komponenten.

• Undersök i koden att attributet disabled eller aria-disabled används, den sistnämnda anger status med skärmläsare samtidigt som man kan tabba till den. Vilket som är lämpligt att använda bedöms utifrån kontexten.

• Kontrollera att man i CSS-koden använt cursor: not-allowed som ger en visuell indikator på att man inte kan klicka på elementet med mus.

1. Granska alla komponenter på sidan som låter användaren välja ett värde eller mata in information.

2. Gör ett val eller mata in information i varje komponent. Om det tillkommer nya fält som en konsekvens av ditt val eller den information som du har matat in, är det okej. Det är viktigt att den övergripande strukturen på sidan är densamma.

3. Kontrollera att inga nya fönster öppnas utan förvarning när du exempelvis väljer en radioknapp, kryssruta eller gör ett val i en rullgardinsmeny.

4. Kontrollera att fokus inte automatiskt flyttas till nästa komponent när du skriver in text eller gör ett val. Fokus ska vara kvar på samma komponent tills du väljer att flytta fokus. Om sidan laddas om när du gör ett val, exempelvis för att hämta ny data när du gör ett val i en dropdownmeny, ska fokus vara kvar på det valda elementet även efter att sidan har laddat färdigt.

5. Kontrollera att formulär inte skickas automatiskt när du flyttar fokus från en komponent till en annan. Skriv in information i formulärets sista fält och navigera vidare med tabbtangenten. Fokus ska då flyttas till nästa komponent, som troligtvis är en knapp för att skicka.

6. Kontrollera att det finns en knapp i formuläret för att skicka informationen till mottagaren och att informationen skickas när du aktiverar knappen. Om formuläret innehåller fel visas ett felmeddelande.

7. Testa gärna med användare för att säkerställa att allt som sker känns intuitivt och förväntat.

Testa den aktuella webbsidan eller tjänsten med en mobil enhet, eller genom att göra följande:

1. Starta webbläsarens utvecklingsverktyg med F12.

2. Aktivera verktyget för att testa den aktuella webbsidan med mobilenheter.

3. Välj en enhet att testa med, exempelvis iPhone 12 Pro.

4. Använd knappen för att rotera skärm för att testa om gränssnittet fungerar i porträtt- och landskapsläge.

1. Testa den aktuella webbsidan eller tjänsten i mobila enheter med olika skärmbreddar.

2. Justera bredden på webbläsarens fönster för att kontrollera hur innehållet på sidan förhåller sig till fönstrets bredd.

3. Zooma i webbläsaren genom att trycka på Ctrl + (plus) och Ctrl - (minus). Ctrl 0 återställer zoomfunktionen till 100 %.

1. Läs igenom innehållet på sidan, utan hjälpmedel, på skärmar med olika storlekar, exempelvis dator, läsplatta och smartphone.

2. Kontrollera att allt innehåll behåller sin logiska ordning så att dess betydelse bevaras, även om delar av innehållet flyttar sig. Var särskilt uppmärksam på faktarutor, tabeller och informationsområden som hänvisar till annat innehåll på samma sida.

1. Använd en skärmläsare och läs igenom allt innehåll på sidan.

2. Kontrollera att läsordningen är korrekt och att skärmläsaren läser upp all text på ett logiskt och intuitivt sätt.

3. Kontrollera också att skärmläsaren läser innehållet i samma ordning som det presenteras visuellt.

Gå igenom sidan och identifiera områden där färger används.

Kontrollera följande:

1. Information som förmedlas med endast färg förmedlas även som text.

2. Det finns en visuell markering som gör att innehåll i en avvikande färg skiljer sig från övrigt innehåll.

Detta gör du enklast genom att testa hur sidan ser ut i gråskala, ladda ned verktyget Accessibility Insights for Web (tillägg i Chrome) för att testa. Säkerställ att all information och funktioner fortfarande är tydliga, även utan färger.

Förstora innehållet genom att använda tangentbordet.

Använd följande kortkommandon för att ändra storleken på texten på webbsidan:

• CTRL och plus (+) för att öka textens storlek.

• CTRL och minus (-) för att minska textens storlek.

• CTRL och 0 för att återställa textens storlek.

När du ökar eller minskar textens storlek kan du i sidans överkant se hur mycket du har förstorats textstorleken. Informationen visas bara i några sekunder men blir synlig igen varje gång du ändrar textens storlek.

• Förstora texten till 200 %.

• Kontrollera att texten verkligen har förstorats.

• Kontrollera att texten inte klipps av, trunkeras eller döljs jämfört med när texten inte är förstorad.

• Kontrollera att textstorleken i stilmallen (CSS) anges i relativa måttenheter. Öppna kodfönstret genom att trycka F12 eller högerklicka på exempelvis en rubrik på sidan och välj 'Inspektera'. Under fliken 'Styles' letar du efter egenskaper som innehåller beskrivningen 'size'. Egenskaper för storlek ska anges med enheten 'em' eller 'rem'.

Det enklaste sättet att testa dessa textförändringar är att använda ett så kallat bokmärke, eller bookmarklet. Använd exempelvis bokmärket “Text spacing bookmarklet” som finns på att hämta på Codepen. Gör så här:

1. Gör en sökning på 'Text spacing bookmarklet'.

2. Klicka på det första sökresultatet som borde vara hos Codepen.

3. Inne på webbplatsen Codepen, dra länken 'Text spacing' till bokmärkesfältet eller högerklicka på länken och välj 'Spara som bokmärke.' Bokmärket kommer då att läggas till bland dina bokmärken i din webbläsarens bokmärkesfält.

4. När du vill testa om textavstånd stöds på din sida, välj bokmärket “Text spacing” från ditt bokmärkesfält för att göra textändringarna.

5. För att återställa, ladda om sidan.

Kontrollera följande och jämför hur texten ser ut utan några ändringar av textavståndet:

• Radavståndet har ökat.

• Avståndet mellan textstycken har ökat.

• Avståndet mellan tecken har ökat.

• Avståndet mellan två ord ökat.

• Inga objekt på sidan, exempelvis texter, bilder eller knappar, överlappar eller hamnar bakom något annat objekt på sidan.

• Text klipps inte av eller trunkeras.

1. Klicka på ett interaktivt objekt, exempelvis en knapp eller en länk, men håll nere vänster musknapp.

2. Flytta markören bort från det interaktiva objektet.

3. Släpp vänster musknapp.

4. Om testet lyckas ska objektets funktion inte aktiveras.

Kontrollera att funktioner som bygger på gester kan aktiveras på ett alternativt sätt. Exempel är dra-och-släpp, karuseller, zoomfunktioner i kartor och objekt som kan flyttas i sidled för att visa fler funktioner.

Kontrollera att funktioner som bygger på rörelser kan aktiveras på ett alternativt sätt. Exempel är att användaren kan tilta en mobil enhet för att gå framåt eller bakåt i ett flöde eller att vifta med handen framför enhetens kamera för att navigera i en karta.

Kontrollera att rörelsestyrning kan stängas av i gränssnittet.

Text mot bakgrund

1. Granska all brödtext, text i bilder och text i komponenter på sidan.

2. Kontrollera att text presenteras mot bakgrund med tydlig kontrast till texten.

3. Om du är osäker, gör följande:

   • Identifiera textens färg och färgen på bakgrunden där texten är placerad.

   • Kontrollera att kontrasten mellan text och bakgrund är minst 4,5:1. Ladda ned verktyget Colour contrast analyzer (Software center).

Text i komponenter

Om texten är i en interaktiv komponent:

1. Kontrollera vilka olika tillstånd som komponenten kan befinna sig i.

2. För varje tillstånd, gör följande:

   • Identifiera textens färg.

   • Identifiera bakgrundens färg.

   • Kontrollera att kontrastförhållandet mellan text och bakgrund är minst 4,5:1. Ladda ned verktyget Colour contrast analyzer (Software center).

1. Identifiera sidans alla interaktiva komponenter.

2. Kontrollera att komponenter är placerade mot bakgrunder med tydlig kontrast till komponenternas ramar eller bakgrundsfärg.

3. Lägg även märke till kontrast i olika tillstånd: focus, hover, selected exempelvis.

4. Om du är osäker, gör följande:

   • Identifiera färgen i den angränsande bakgrunden.

   • Identifiera komponentens bakgrundsfärg. Om komponenten har samma bakgrund som den angränsande bakgrunden, identifiera färgen på komponentens ram.

   • Ladda ned verktyget Colour contrast analyzer (Software center) och kontrollera att kontrastförhållandet mellan komponentens ram och den bakgrund där komponenten är placerad är minst 3:1.

1. Gå igenom sidan och hitta alla grafiska element.

2. Kontrollera att ikoner presenteras mot bakgrunder med tydliga kontraster till ikonerna.

3. Om du är osäker och för testning av andra grafiska element, gör följande:

   • Ta reda på vilka delar av det grafiska elementet som behövs för att förstå innehållet i symbolen/det grafiska elementet. För varje del:

   • Identifiera färgen på det grafiska elementet. (Om elementet består av flera färger, välj den med lägst kontrast.)

   • Identifiera färgen på den intilliggande bakgrunden.

   • Jämför de bägge färgerna och säkerställ att kontrasten mellan dem är minst 3:1.

1. Kontrollera att alla meningsbärande bilder på webbplatsen eller webbsidan har textbaserade alternativ, alltså en förklarande beskrivning i text i attributet alt. Ett sätt att testa alt-texter är att inaktivera visning av bilder i webbläsaren.

   • Google Chrome: Inställningar > Integritet och säkerhet > Webbplatsinställningar > Bilder > Tillåt inte att webbplatser visar bilder.

   • Microsoft Edge: Inställningar > Cookies och webbplatsbehörigheter > Bilder > Inaktivera Visa alla.

   • Ett alternativ är att använda ett plugin i webbläsaren för att inaktivera bilder, exempelvis Web Developer.

2. Kontrollera att bildernas alt-texter är begripliga och att de beskriver syftet med bilderna på webbsidan.

1. Kontrollera att alla komplexa meningsbärande bilder på webbplatsen eller webbsidan har textbaserade alternativ, alltså en förklarande beskrivning i text i attributet alt. Ett sätt att testa alt-texter är att inaktivera visning av bilder i webbläsaren.

   • Google Chrome: Inställningar > Integritet och säkerhet > Webbplatsinställningar > Bilder > Tillåt inte att webbplatser visar bilder.

   • Microsoft Edge: Inställningar > Cookies och webbplatsbehörigheter > Bilder > Inaktivera Visa alla.

   • Ett alternativ är att använda ett insticksprogram i webbläsaren för att inaktivera bilder, exempelvis Web Developer.

2. Kontrollera att komplexa bilder som diagram, kartor och organisationsscheman har alt-texter som är begripliga och att de beskriver syftet med bilderna på webbsidan.

1. Kontrollera att alla bilder på webbplatsen eller webbsidan som inte är meningsbärande har tomma alt-attribut, alltså att de inte har en förklarande beskrivning i text i attributet alt. Tomma alt-attribut får hjälpmedel att ignorera bilder som är dekorativa.

   • Ett sätt att kontrollera hur alt-attributet används är att använda ett plugin i webbläsaren för att inaktivera bilder, exempelvis Web Developer.

   • Ett annat sätt är att granska bilderna i webbläsarens utvecklarverktyg. Högerklicka på bilden och välja “Inspektera” i Google Chrome eller “Granska” i Microsoft Edge.

2. Om det finns bilder som helt saknar alt-attribut behöver de img-element som utgör bilderna i koden kompletteras med ett alt-attribut som saknar värde. Exempel: <img src='bildkälla' alt=''>.

Kontrollera att det på webbsidor som innehåller ljudklipp finns en text som beskriver innehåll som återges med endast ljud, exempelvis att ett ljudklipp är en podd och vad den handlar om.

Kontrollera att det på webbsidor som innehåller videoklipp finns en text som beskriver innehåll som återges med endast video, exempelvis att innehållet är ett videoklipp och vad det handlar om.

1. Kontrollera att det på webbsidor som innehåller ljudklipp, exempelvis poddar, finns en text som utförligt beskriver innehållet i podden.

2. Beskrivningen ska vara tillräckligt utförlig för att en person som inte kan uppfatta ljud ska kunna ta del av innehållet eller budskapet. Transkribering av podden är exempelvis ett bra alternativ.

1. Kontrollera att det på webbsidor som innehåller förinspelad video med ljud, exempelvis filmer, finns en text som utförligt beskriver innehållet i filmen.

2. Beskrivningen ska vara tillräckligt utförlig för att en person som inte kan uppfatta ljud eller video ska kunna ta del av innehållet eller budskapet. Transkribering av filmer är exempelvis ett bra alternativ.

1. Kontrollera att det på webbsidor som innehåller video, exempelvis filmer, för varje film finns undertexter som användaren själv kan aktivera. Riktiga undertexter kan man ofta anpassa, exempelvis textstorlek.

2. Kontrollera att undertexterna är synkroniserade med ljudet och att de stämmer med filmens innehåll.

Kontrollera följande:

• Att det på webbsidor som innehåller video, exempelvis filmer, för varje film finns syntolkning av innehåll som presenteras visuellt i filmen.

• Att syntolkningen är synkroniserad med det visuella innehållet och att beskrivningarna stämmer med filmens innehåll.

Webbläsarens utvecklarverktyg

• Högerklicka på länken och välj “Inspektera” i Chrome eller “Granska” i Edge. Utvecklarverktyget kommer då att visa den aktuella länkens kod.

• Kontrollera att länken utgörs av ett <a>-element.

Plugin:et Web Developer för Chrome

• I plugin:et Web Developer, välj fliken “Information” och välj sedan “Display Link Details.”

• Verktyget visar då href-attributen i samtliga länkar på sidan så att de kan granskas visuellt.

• Högerklicka på den aktuella länken och välj “Inspektera.”

• Kontrollera att länken utgörs av ett <a>-element.

Om länkar inte går att nå med tabbtangenten

• Kontrollera hur länken ser ut i koden. Om den inte är kodad med ett <a>-element kan den behövas kodas om.

1. Gå igenom alla länkar på sidan, inkluderat sådana som leder till andra sidor på samma webbplats, till andra delar av samma sida och länkar till andra webbplatser eller dokument.

2. För att hitta alla länkar på sidan kan du använda dig av en skärmläsare, exempelvis Jaws eller NVDA för Windows (tillåtet program att ladda ned) eller Voice Over för MacOS eller iOS (inbyggda i enheterna).

3. Kontrollera att länkarna har synliga länktexter.

1. Gå igenom alla länkar på sidan, inkluderat sådana som leder till andra sidor på samma webbplats, till andra delar av samma sida och länkar till andra webbplatser eller dokument.

2. Kontrollera att alla länkar har tydliga länktexter som är begripliga utanför sitt sammanhang, alltså förklarande i sig själva.

3. Om en länk endast utgörs av en bild, exempelvis en logotyp, ska bildens textalternativ beskriva såväl bilden som länkens mål. Exempel: alt='IA systemets logotyp. Till startsidan.'

För att hitta alla länkar på sidan kan du använda dig av en skärmläsare, exempelvis Jaws eller NVDA för Windows (tillåtet program att ladda ned) eller Voice Over för MacOS eller iOS (inbyggda i enheterna).

Testa gärna även med användare ur olika målgrupper för att säkerställa att länktexter är tydliga och lätta att förstå.

1. Gå igenom alla länkar på sidan som leder till externa sidor utanför webbplatsen. Kontrollera att det är tydligt för användaren att länken leder till en extern sida med en annan avsändare än Afa försäkring/förebyggande verksamhet.

2. Gå igenom alla länkar på sidan som leder till dokument. Kontrollera att länktexten beskriver vilken typ av dokument det är och dokumentets storlek.

3. Kontrollera att det är tydligt när länkar och dokumentet öppnas i nya flikar eller om dokument laddas ner. Om ikoner används för att beskriva det, finns motsvarande information som text i koden för användare med hjälpmedel.

Webbläsarens utvecklarverktyg

• Högerklicka på länken och välj “Inspektera” i Chrome eller “Granska” i Edge. Utvecklarverktyget kommer då att visa den aktuella länkens kod.

• Kontrollera att knappen utgörs av ett <button>-element.

Om knappar inte går att nå med tabbtangenten

• Kontrollera hur knappen ser ut i koden. Om den inte är kodad med ett <button>-element (exempelvis div-element) kan den behövas kodas om.

1. Gå igenom sidans alla knappar som användaren kan interagera med.

2. Kontrollera att knappar har synliga etiketter. Testa gärna med användare för att försäkra er om att beskrivningar av knappar är tydliga.

3. Om knappar inte har synliga etiketter, försök i första hand att lägga till en synlig etikett på knapparna.

4. Om det inte är möjligt att lägga till synliga etiketter, kontrollera att ikoner i knappar är tydliga och att det finns en alternativ textbeskrivning i koden (i form av alt-attribut eller som aria-label).

Granska i webbläsarens utvecklarverktyg

1. Gå igenom numrerade och onumrerade listor i den aktuella tjänsten eller webbsidan.

2. Högerklicka på det första objektet i listan och välj “Granska” i Microsoft Edge eller “Inspektera” i Google Chrome.

3. Kontrollera att varje objekt i varje lista omsluts av ett <li>-element.

4. Kontrollera också att numrerade listor inleds med elementet <ol> och att onumrerade listor inleds med elementet <ul>.

Testa med skärmläsare

1. Starta en skärmläsare, exempelvis skärmläsaren NVDA.

2. Använd tangenten pil ner för att flytta skärmläsarens fokus radvis nedåt på sidan. Navigera fram till sidans första numrerade eller onumrerade lista.

3. När fokus flyttas in i listan, kontrollera att skärmläsaren annonserar en lista. Skärmläsaren läser då upp något i stil med “lista” följt av antalet listobjekt som listan innehåller.

4. När fokus flyttas ut ur listan är det förväntade att skärmläsaren annonserar att listan är slut.

Webbläsarens utvecklarverktyg

1. Öppna webbläsarens utvecklarverktyg med F12. Välj fliken “Elements” om den inte redan är vald.

2. Sätt fokus i den del av webbläsarfönstret där webbsidan visas som den är tänkt att möta användarna, alltså inte i kodvyn.

3. Vid fokus på en tabell, högerklicka på länken och välj “Inspektera” i Chrome eller “Granska” i Edge. Kodvyn kommer då att skrolla fram till den aktuella länken så att du ser den i koden.

4. Kontrollera att tabellen innehåller de delar som den ska, beskrivet ovan i påståendet.

Plugin:et Web Developer för Chrome

1. I plugin:et Web Developer, välj fliken “outline” och välj sedan “Display table cells”.

2. Verktyget visar då tabellceller på sidan så att de kan granskas visuellt.

Testa med skärmläsare

1. Starta en skärmläsare, exempelvis skärmläsaren NVDA.

2. Använd tangenten pil ner för att flytta skärmläsarens fokus radvis nedåt på sidan. Navigera fram till en tabell och navigera med piltangenterna inom tabellen.

3. Om en tabell är korrekt kodad ska varje datacell ge information om dess rad- eller kolumnrubrik, beroende på den riktning du förflyttar dig i. Byter du kolumn, ska cellens “nya” kolumn läsa upp i kombination med cellens innehåll.

Webbläsarens utvecklarverktyg

1. Öppna webbläsarens utvecklarverktyg med F12. Välj fliken “Elements” om den inte redan är vald.

2. Sätt fokus i den del av webbläsarfönstret där webbsidan visas som den är tänkt att möta användarna, alltså inte i kodvyn.

3. Vid fokus på en tabell, högerklicka på länken och välj “Inspektera” i Chrome eller “Granska” i Edge. Kodvyn kommer då att skrolla fram till den aktuella länken så att du ser den i koden.

4. Kontrollera att tabellen, table-elementet, innehåller en caption med rubriken för tabellen.

Testa med skärmläsare

1. Starta en skärmläsare, exempelvis skärmläsaren NVDA.

2. Använd tangenten pil ner för att flytta skärmläsarens fokus radvis nedåt på sidan. Navigera fram till en tabell på den aktuella webbsidan.

3. När fokus flyttas in i tabellen, kontrollera att skärmläsaren annonserar en tabell och tabellens överskrift. Skärmläsaren läser då upp “tabell” följt av innehållet i caption-elementet.

Webbläsarens utvecklarverktyg

1. Öppna webbläsarens utvecklarverktyg med F12. Välj fliken “Elements” om den inte redan är vald.

2. Sätt fokus i den del av webbläsarfönstret där webbsidan visas som den är tänkt att möta användarna, alltså inte i kodvyn.

3. Vid fokus på en tabell, högerklicka på länken och välj “Inspektera” i Chrome eller “Granska” i Edge. Kodvyn kommer då att skrolla fram till den aktuella länken så att du ser den i koden.

4. Kontrollera att tabellen, table-elementet, innehåller en caption med rubriken för tabellen.

Testa med skärmläsare

1. Starta en skärmläsare, exempelvis skärmläsaren NVDA.

2. Använd tangenten pil ner för att flytta skärmläsarens fokus radvis nedåt på sidan. Navigera fram till en tabell på den aktuella webbsidan.

3. När fokus flyttas in i tabellen, kontrollera att skärmläsaren annonserar en tabell och tabellens överskrift. Skärmläsaren läser då upp “tabell” följt av innehållet i caption-elementet.

Granska i webbläsarens utvecklarverktyg

1. Öppna en webbsida eller en webbtjänst som innehåller en eller flera ramar.

2. Högerklicka någonstans i det innehåll som läses in från en annan sida och som omsluts av elementet iframe. Klicka på “Granska” i Microsoft Edge eller “Inspektera” i Google Chrome.

3. Du kan söka efter termen i koden, sök efter “iframe”.

4. Om du hittar ett iframe-element, kontrollera att iframe-elementet har en tydlig beskrivning av ramens innehåll i attributet title.

Testa med skärmläsare

1. Starta en skärmläsare, exempelvis skärmläsaren NVDA.

2. Använd tabbtangenten för att navigera till ett objekt som ligger så nära innehållet i en ram som möjligt men inte inuti ramen, exempelvis till en länk eller ett formulärfält.

3. Fortsätt att navigera nedåt i tjänsten eller webbsidan med pil ner för att nå innehållet i ramen.

4. Kontrollera att skärmläsaren läser upp beskrivningen i iframe-elementets title-attribut när fokus flyttas in till innehållet i ramen.

Gå igenom sidans alla komponenter som har synliga etiketter.

• Jämför komponenternas synliga etiketter med de namn som komponenterna har i koden. Kontrollera att komponenternas namn i koden är likställt med eller inleds med komponenternas synliga etiketter. Använd något av följande tillvägagångssätt:

  • Granska knapparna i koden. Öppna webbläsarens utvecklingsverktyg genom att trycka på F12 eller högerklicka på en knapp och välj “Inspektera”. Kontrollera att knappelementet har attributet aria-label som beskriver knappens funktion.

  • Du kan också titta i utvecklingsverktygets tillgänglighetsträd. Välj 'Accessibility' i den högra kolumnen. Under 'Computed properties' hittar du egenskapen 'Name'. Där ska du kunna se värdet som sätts i attributet aria-label.

  • Testa med skärmläsare. Sätt fokus på komponenten. Kontrollera att den beskrivning som skärmläsaren läser upp inleds på samma sätt som knappens synliga etikett.

Granska kodstruktur för grupperade formulärobjekt

1. Gå igenom sidans alla formulärobjekt som är grupperade, det vill säga komponenter i formulär som hör ihop utifrån placering och struktur. Exempel är radioknappar och kryssrutor.

2. Högerklicka på det första objektet i grupperingen och välj 'Inspektera' i Google Chrome eller 'Granska' i Microsoft Edge.

3. I webbläsarens utvecklarverktyg, granska de element som omsluter formulärobjekt som hör ihop, exempelvis radioknappar och kryssrutor.

4. Kontrollera att grupperingar av formulärobjekt omsluts av elementet <fieldset> och att det elementet inleds med ett <legend>-element som beskriver gruppen.

Testa med skärmläsare

1. Starta en skärmläsare på din dator, exempelvis skärmläsaren NVDA.

2. Navigera radvis med pil ner på den aktuella sidan och navigera fram till en grupp av formulär.

3. Kontrollera att skärmläsaren läser 'gruppering' följt av texten i <legend>-elementet när fokus flyttas in i grupperingen.

4. Navigera i grupperingen med pil ner och förbi det sista objektet för att lämna grupperingen.

5. Kontrollera att skärmläsaren läser 'lämnar gruppering' när fokus flyttas från det sista formulärobjektet.

1. Gå igenom alla formulär i tjänsten eller webbsidan.

2. Högerklicka på ett formulärfält och klicka på “Granska” i Microsoft Edge eller “Inspektera” i Google Chrome.

3. Kontrollera att samtliga formulärfält där användaren kan mata in personlig information har attributet autocomplete med ett värde som motsvarar det innehåll som användaren kan ange. Exempel är värdet “email” i attributet autocomplete för fält där användaren kan ange en e-postadress. Giltiga värden för attributet autocomplete finns under kapitel 7 i Web Content Accessibility Guidelines (WCAG) 2.1.

4. Kontrollera också att fält för information som exempelvis e-postadress, telefonnummer, webbadress eller lösenord har en typ för inmatning som motsvarar den information som användaren kan ange. Det anges med attributet type. Detta säkerställer att rätt tangentbord för inmatning visas i mobilen exempelvis.

1. Gå igenom och granska alla formulärfält på den aktuella tjänsten eller webbsidan.

2. Kontrollera att samtliga formulärfält har synliga etiketter som beskriver syftet med varje formulärfält. Etiketter ska inte utgöras av placeholder-texter inuti fälten som försvinner när fältet får fokus.

1. Gå igenom alla formulär på den aktuella sidan eller i den aktuella tjänsten.

2. Kontrollera att samtliga formulärobjekt har etiketter.

3. Kontrollera att formulärobjektens etiketter är placerade i direkt anslutning till formulärobjekten så att det är lätta att uppfatta och att de inte kan förväxlas med andra fält.

Testa även gärna med skärmläsare (exempelvis NVDA för PC) för att säkerställa att man får all information visuellt kopplat till fältet uppläst i anslutning till fältet.

Granska i webbläsarens utvecklarverktyg

1. Gå igenom alla formulärfält i tjänsten eller webbplatsen.

2. Högerklicka på ett formulärfält och klicka på “Granska” i Microsoft Edge eller “Inspektera” i Google Chrome.

3. Kontrollera att det finns en koppling mellan det aktuella formulärfältet och den etikett som beskriver fältets syfte. Om etiketten exempelvis omsluts av ett label-element ska det ha ett for-attribut som refererar till det aktuella formulärfältets id-värde.

Testa med skärmläsare

1. Starta en skärmläsare, exempelvis skärmläsaren NVDA.

2. Använd tabbtangenten för att navigera mellan formulärfält i tjänsten eller webbplatsen.

3. Kontrollera att skärmläsaren läser upp den etikett som beskriver syftet med ett formulärfält. Den information som skärmläsaren läser upp ska ha samma innehåll som fältets synliga etikett.

4. Om en skärmläsare inte läser upp formulärfältets etikett kan det bero på att det saknas en koppling mellan etiketten och det aktuella fältet. Om det label-element som omsluter formulärfältets etikett saknar ett for-attribut som refererar till formulärfältets id-värde finns ingen koppling mellan etiketten och fältet.

Granska i webbläsarens utvecklarverktyg

1. Gå igenom obligatoriska formulärfält i tjänsten eller webbplatsen.

2. Högerklicka på ett obligatoriskt fält och klicka på “Granska” i Microsoft Edge eller “Inspektera” i Google Chrome.

3. Kontrollera att obligatoriska fält märks upp med attributet required. Attributet ska inte ha något värde.

4. Kontrollera också att fält som är uppmärkta med attributet required också visuellt beskrivs som obligatoriska.

Testa med skärmläsare

1. Starta en skärmläsare, exempelvis skärmläsaren NVDA.

2. Använd tabbtangenten för att navigera mellan formulärfält i tjänsten eller webbplatsen.

3. Navigera fram till ett obligatoriskt fält.

4. Kontrollera att skärmläsaren läser upp att fältet är obligatoriskt. Det annonseras genom att skärmläsaren beskriver formulärfältet med “krävs” efter annan information om det aktuella fältet.

5. Kontrollera också att information som beskriver att formulärfältet är obligatoriskt och som presenteras visuellt, också läses upp av skärmläsaren.

Om en skärmläsare inte läser upp visuellt presenterad information om att ett formulärfält är obligatoriskt kan det bero på att det saknas en koppling mellan informationen och det aktuella fältet.

Testa visuellt

1. Granska inmatningsfält som kräver att användaren matar in information i ett specifikt format. Det kan vara person- eller organisationsnummer, kontonummer, postnummer eller telefonnummer.

2. Kontrollera att det finns information som beskriver det förväntade formatet på ett tydligt sätt.

3. Kontrollera att information om format associeras till det aktuella fältet. Exempelvis genom att bädda in informationen i fältets etikett, alltså i elementet label.

Testa med skärmläsare

1. Starta en skärmläsare på din dator, exempelvis skärmläsaren NVDA.

2. Använd tabbtangenten för att navigera till ett fält som kräver ett särskilt format och där det finns instruktioner om hur formatet ska anges.

3. Kontrollera att skärmläsaren läser instruktioner om format på ett tydligt sätt.

Visuellt

Börja med att visuellt kontrollera att rubriker och etiketter (labels) på formulärfält är tillräckligt beskrivande för funktionen.

Testa rubriker med skärmläsare

1. Starta en skärmläsare, exempelvis NVDA.

2. Öppna den sida du vill testa, speciellt sidor med formulär.

3. Gå igenom genom att pila för att kontrollera att både rubriker och etiketter är tydliga och begripliga.

4. Du behöver även testa igenom att bara tabba dig genom formuläret, för att säkerställa att man vid fokus på ett formulärfält får höra allt som behövs.

Navigering med tabbtangenten

1. Identifiera var och när på sidan som det sker någon form av direktvalidering genom att skriva in felaktig data eller lämna tomt på obligatoriska fält.

2. Navigera igenom samtliga formulärfält med tabbtangenten, men skicka inte formuläret.

3. Kontrollera att det sker en validering när användaren tabbar förbi ett fält som är felaktigt.

För varje fel som uppstår

1. Kontrollera att fältet markeras visuellt och att ett felmeddelande visas i text.

2. Granska koden för fältet och kontrollera att fältet har attributet aria-invalid='true'.

3. Kontrollera i koden att felmeddelandet som visas är kopplat till fältet, exempelvis med attributet aria-describedby.

Testa med skärmläsare

1. Starta en skärmläsare, exempelvis NVDA.

2. Öppna den sida du vill testa, med formulär.

3. Testa att mata in felaktig data.

4. Kontrollera att skärmläsaren läser upp felmeddelandet direkt och avbryter en eventuell pågående uppläsning av något annat.

5. Kontrollera att fokus är kvar på komponenten där användaren är och inte automatiskt flyttas till felmeddelandet.

6. Kontrollera i koden att felmeddelandet har attributet role='alert' eller att det element som felmeddelandet bäddas in i har attributet aria-live='assertive'. Om attributet role='alert' används, innebär det implicit att attributet aria-live används eftersom det nedärvs automatiskt till innehåll som märks upp med role='alert'.

Visuellt

1. Fyll i ett formulär på ett felaktigt sätt och klicka på 'Skicka'.

2. Kontrollera att varje fält som innehåller fel får en visuell markering och att ett felmeddelande visas vid varje felaktigt fält.

3. Felen ska ha god kontrast (över 4.5:1), ha en ikon samt placeras nära felkällan.

4. På längre formulär (mer än 4-5 element): Kontrollera att ett samlingsmeddelande med samtliga felmeddelanden visas längst upp i formuläret.

Testa med skärmläsare

1. Öppna den sida du vill testa, med formulär. Starta en skärmläsare, exempelvis NVDA.

2. Testa att mata in felaktig data och skicka in formuläret.

3. Om det finns en summering: kontrollera att skärmläsarens fokus automatiskt flyttas till början av sidan och läser upp rubriken för felmeddelandet.

4. Gå igenom formuläret och lyssna så att felmeddelanden läses upp vid de felaktiga intmaningarna.

5. Testa både genom att pila och tabba.

1. Identifiera innehåll på sidan som förändras när användaren gör någonting och som informerar användaren om sidans status.

2. För varje förändring, kontrollera att det element i koden som innehåller information om sidans status har attributet role='status' eller aria-live='polite'. Om meddelandet är uppmärkt med attributet role='status' behöver inte aria-live='polite' läggas till eftersom det nedärvs implicit till områden med role='status'.

3. Testa med en skärmläsare och utför en uppgift som resulterar i att information ändras.

4. Kontrollera att skärmläsaren läser upp informationen, inklusive förändringen, för användaren utan att avbryta en pågående uppläsning av innehåll. Skärmläsaren ska läsa meddelandet när den pågående uppläsningen är klar.

5. Kontrollera att användaren får ta del av all relevant information. Exempel: “3 ärenden godkända” istället för enbart “3”.

6. Kontrollera att fokus är kvar vid den komponent där användaren hade fokus då uppgiften utfördes och inte flyttas till meddelandet om sidans status.

För egenkodade komponenter och komponenter som inte är standardkomponenter i HTML

1. Testa med en skärmläsare och navigera dig fram till komponenten med tabbtangenten.

2. Kontrollera att skärmläsaren läser upp den roll som komponenten har och att rollen beskriver komponenten korrekt. Exempel: En komponent som ser ut och fungerar som en knapp beskrivs som en knapp av skärmläsaren.

3. Använd kortkommandon i skärmläsaren för att ta fram skärmläsarens elementlista över olika typer av element. I listan över formulärobjekt ska du kunna se vilka komponenter som skärmläsaren uppfattar som knappar och formulär. Kontrollera att den roll som knappen har i listan stämmer överens med komponentens funktion och beskriver den korrekt.

För övriga interaktiva komponenter

1. Öppna utvecklingsverktyget i din webbläsare med F12.

2. Kontrollera att semantisk HTML används om det är möjligt. Exempel: Elementet <button> används för knappar som inte ligger i formulär.

3. Kontrollera också att koden inte innehåller onödig redundans, exempelvis att attribut inte finns i dubbel uppsättning.

1. Identifiera alla komponenter på sidan som kan ändras, exempelvis kryssrutor som kan kryssas eller inmatningsfält där användaren kan skriva in text.

2. Testa med en skärmläsare. Navigera till varje komponent som du tidigare har identifierat och prova att ändra den med tangentbordet.

3. Kontrollera att skärmläsaren tydligt informerar om förändringen, exempelvis att skärmläsaren läser 'kryssruta markerad'.

4. Kontrollera också följande:

   • Obligatoriska tillstånd och egenskaper för en typ av komponent omfattas.

   • Otillåtna tillstånd och egenskaper inte omfattas.

   • Tillstånd och egenskaper uppdateras och visar det aktuella tillståndet när komponenten ändras.

Testa även komponenters värde som kan expanderas och minimeras, flikar som är valda med mera.

För att kontrollera om det finns dolda delar på sidan som inte döljs i koden, gör så här:

1. Identifiera innehåll som ska vara synligt respektive dolt på sidan. Det kan exempelvis vara innehåll i expanderbara ytor, stängda menyer eller innehåll i flikar som inte har öppnats.

2. Kontrollera att innehållet är dolt visuellt.

3. Testa med en skärmläsare och navigera dig fram till komponenten närmast före det dolda innehållet, exempelvis en menyknapp för en meny som är stängd.

4. Navigera nedåt med piltangenterna eller tabbtangenten och kontrollera att skärmläsaren inte läser upp innehåll som är visuellt dolt på skärmen och att dessa delar inte heller går att komma åt med tabbtangenten.

5. Gå igenom hela sidan med skärmläsare för att kontrollera att det inte finns något ytterligare innehåll som enbart döljs visuellt men inte för skärmläsare.

Granska navigationsfunktioner i webbtjänsten och kontrollera att den är placerad på samma plats och sorteras på samma sätt på tjänstens alla sidor.

Granska hur funktioner benämns i webbtjänsten och kontrollera att de benämns på samma sätt på tjänstens alla sidor.

Kontrollera att det finns en globalt placerad väg att ta del av hjälp. Exempelvis i sidfot eller som widget eller huvudmeny på alla sidor i tjänsten.

Hjälpen ska vara i någon av dessa former:

• Kontaktuppgifter för att få hjälp av en människa.

• Kontakformulär.

• Chatt.

• Kontrollera att alla funktioner med drag-and-drop kan användas med alternativa metoder, så de kan styras med enpunkts-klick. Det kan exempelvis vara knappar som alternativ för att ändra ordning på element som också har drag-and-drop funktion.

• Testa med mus, tangentbord och pekskärm för att säkerställa att inga funktioner endast är tillgängliga med drag and drop.

• Kontrollera att användare inte är beroende av sitt minne för att mata in uppgifter som exempelvis lösenord för att logga in.

• Verifiera att det finns stöd för biometrisk autentisering (exempelvis bank-id där man kan använda face-id) eller att man kan inhämta sparade uppgifter för inmatningen.

• Mät interaktiva element (som knappar, länkar och ikoner) och kontrollera att deras tryckbara yta är minst 24x24 pixlar. Det finns olika sätt att mäta, exempelvis kan du använda en bookmarklet vid namn 24×24 Pixel Cursor Bookmarklet.

• Kom ihåg att hela klickytan räknas, även eventuell klickbar padding runt den visuella knappen/länken.

• Kontrollera att närliggande interaktiva element inte är för nära varandra, för att undvika oavsiktliga tryck.

• Navigera genom sidan med hjälp av tangentbordet (Tab framåt eller Shift+Tab bakåt) och verifiera att fokusindikatorn alltid är synlig och inte täcks av andra element.

• Testa särskilt för situationer där flytande element eller popup-fönster kan dölja fokus. Om en täckande modal öppnas ska fokus låsas i modalen tills man stängt den för att förhindra fokus bakom modalen.

• Kontrollera att användare inte behöver mata in samma information flera gånger på en sida eller i en process.

• Verifiera att systemet automatiskt fyller i eller återanvänder information som redan angetts, till exempel adress eller personuppgifter. Eller att det finns mekanismer som tillåter att återanvända data.