Handbok för test av digital tillgänglighet – WCAG 2.1 AAErik Jansson och Tommy Olsson, tillganglighet@bolagsverket.se

IntroduktionDen här handboken är tänkt som en visualiserad guide för granskning av tillgängligheten i webbplatser, e-tjänster och appar. Den kompletterar checklistan för WCAG 2.1 AA [ ska vara en länk till checklistan! ] som används vid granskning och test av webbtillgänglighet samt vid upphandling.I checklistan finns en kolumn som heter Ordning i handboken och med checklistan sorterad i den ordningen blir granskningen enklare.När du börjar lära dig de olika checkpunkterna och bara behöver handboken som snabbreferens kan du använda Navigeringsfönstret i Word (kryssruta under Visa i menyn) för att snabbt hoppa mellan avsnitt.

Förberedelser och verktygFör att kunna utföra alla granskningsmoment som beskrivs i handboken krävs att du använder följande verktyg.

WebbläsareFirefox

PluginsVerktyg som installeras i Firefox och som används som komplement till din granskning.Wave Evaluation ToolWeb Developer

BookmarkletsJavaScript som körs på den aktuella sidan I webbläsaren tills du laddar om eller lämnar sidan. Force Focus – lägger till en tydlig ram runt aktuellt tangentbordsfokus.Text Spacing – temporär stilmall för text som emulerar minimikraven i kriterium 1.4.12.

SupportOm du behöver hjälp så kan du skicka ett mejl till tillganglighet@bolagsverket.se så ska vi försöka hjälpa till!

1Läs villkoren för användning av detta material.

Innehåll

Störande 31.4.2 – Ge användaren möjlighet att pausa, stänga av eller sänka ljud42.2.2 – Ge användarna möjlighet att pausa eller stänga av rörelser 42.3.1 – Orsaka inte epileptiska anfall genom blinkande innehåll 42.2.1 – Ge användarna möjlighet att justera tidsbegränsningar 4 Struktur 51.3.2 – Presentera innehållet i en meningsfull ordning för alla 52.4.2 – Skriv beskrivande sidtitlar 52.4.4 – Skriv tydliga länkar 62.4.6 – Skriv beskrivande rubriker och etiketter 63.2.3 – Var konsekvent i navigation, struktur och utformning 62.4.5 – Erbjud användarna flera olika sätt att navigera 6 Tangentbord 72.1.1 – Utveckla systemet så att det går att hantera med enbart

tangentbordet 72.1.2 – Se till att markören inte fastnar vid tangentbordsnavigation 72.4.7 – Markera tydligt vilket fält eller element som är i fokus 72.4.3 – Gör en logisk tab-ordning 73.2.1 – Utför inga oväntade förändringar vid fokusering 72.4.1 – Erbjud möjlighet att hoppa förbi återkommande innehåll 72.1.4 – Skapa kortkommandon med varsamhet 81.4.13 – Popup-funktioner ska kunna hanteras och stängas av alla 8 Storlek och skärm 91.4.4 – Se till att text går att förstora utan problem 91.4.12 – Se till att det går att öka avstånd mellan tecken, rader, stycken och

ord 91.4.10 – Skapa en flexibel layout som fungerar vid förstoring eller liten

skärm 101.3.4 – Skapa en design som fungerar oavsett skärmens riktning 102.5.1 – Erbjud alternativ till komplexa fingerrörelser 102.5.2 – Gör det möjligt att ångra klick 102.5.4 – Erbjud alternativ till rörelsestyrning 10 Färg och form 111.3.3 – Gör inte instruktioner beroende av sensoriska kännetecken 11Hänvisningar till komponenter och innehåll är inte enbart beroende av

sensoriska kännetecken såsom färg, form, storlek, placering, orientering eller ljud. 11

1.4.1 – Använd inte enbart färg för att förmedla information 111.4.3 – Använd tillräcklig kontrast mellan text och bakgrund 111.4.11 – Använd tillräckliga kontraster i komponenter och grafik 13 Bilder

141.1.1 – Beskriv med text allt innehåll som inte är text 141.4.5 – Använd text, inte bilder, för att visa text 15 Formulär 162.4.6 – Skriv beskrivande rubriker och etiketter 163.2.4 – Benämn funktioner konsekvent 163.3.2 – Skapa tydliga och klickbara fältetiketter 163.2.2 – Utför inga oväntade förändringar vid inmatning 171.3.5 – Märk upp vanliga formulärfält i koden 18

2Läs villkoren för användning av detta material.

3.3.1 – Visa att ett fel uppstått och beskriv det tydligt 183.3.3 – Ge förslag på hur fel kan rättas till 183.3.4 – Ge möjlighet att ångra, korrigera, eller bekräfta vid viktiga

transaktioner 18 Ljud och video 191.1.1 – Beskriv med text allt innehåll som inte är text 191.2.1 – Erbjud alternativ om en inspelning enbart består av ljud eller video

191.2.2 – Texta inspelad rörlig media (video, ljud, animationer) 191.2.4 – Texta direktsändningar 201.2.3 – Erbjud alternativ till videoinspelningar 201.2.5 – Syntolka videoinspelningar 21 Kod 224.1.1 – Se till att koden validerar 221.3.1 – Ange i kod vad sidans olika delar har för roll 222.4.1 – Erbjud möjlighet att hoppa förbi återkommande innehåll 222.4.2 – Skriv beskrivande sidtitlar 233.1.1 – Ange sidans språk i koden 233.1.2 – Ange språkförändringar i koden 233.3.2 – Skapa tydliga och klickbara fältetiketter 231.3.5 – Märk upp vanliga formulärfält i koden 233.3.1 – Visa att ett fel uppstått och beskriv det tydligt 234.1.2 – Se till att skräddarsydda komponenter fungerar i hjälpmedel 242.5.3 – Möjliggör röststyrning av knappar och kontroller 244.1.3 – Se till att hjälpmedel kan presentera meddelanden som inte är i

fokus 24

3Läs villkoren för användning av detta material.

Störande

1.4.2 – Ge användaren möjlighet att pausa, stänga av eller sänka ljudLjud som spelas upp automatiskt så går att pausa, stoppa eller sänka volymen på.

2.2.2 – Ge användarna möjlighet att pausa eller stänga av rörelserInget innehåll rör sig, blinkar, skrollar eller uppdateras automatiskt. Om sådant innehåll finns kan användaren pausa, stoppa eller dölja det. Ett undantag här är ”laddsnurror” och förloppsindikatorer (Figur 1) eftersom dessa hjälper användaren genom att visa att en tom sida inte har ”frusit” utan att innehållet håller på att laddas.

Figur 1 Förloppsindikator.

2.3.1 – Orsaka inte epileptiska anfall genom blinkande innehållIngen del av innehållet blinkar mer än 3 gånger under en 1-sekundsperiod.

2.2.1 – Ge användarna möjlighet att justera tidsbegränsningarDet finns ingen tidsgräns för hur användaren interagerar med sidan. Om tidsgräns finns kan användaren stänga av, anpassa eller utöka den till minst 10 gånger ursprungsvärdet.

4Läs villkoren för användning av detta material.

Struktur

1.3.2 – Presentera innehållet i en meningsfull ordning för allaAllt innehåll kommer i en meningsfull logisk ordning oavsett hur användaren tar del av det. Det enklaste sättet att testa detta är att stänga av sidans stilmall (CSS). I Firefox trycker du på ALT-tangenten och väljer i menyn: Visa > Sidstil > Ingen (Figur 2). Då visas innehållet i sin ursprungliga ordning, vilket är den ordning som förmedlas till ett hjälpmedel såsom en skärmläsare. För att uppfylla detta kriterium krävs att innehållets ordning är meningsfull oavsett om du har stilmallen på eller av.

Figur 2 Stäng av sidstil (CSS) i Firefox.

2.4.2 – Skriv beskrivande sidtitlarDetta är del 1 av detta kriterium (del 2 finns i avsnittet Kod). En bra, beskrivande titel sammanfattar sidans ämne eller innehåll. Titeln syns i webbläsarens flikar. Håll muspekaren över fliken för att se hela titeln (Figur 3).

Figur 3 Håll muspekaren över fliken för att se sidans titel.

Varje sida på en webbplats, liksom andra typer av dokument, ska ha en unik titel (Figur 4).

Figur 4 En webbplats med samma titel på alla sidor uppfyller inte 2.4.2.

Först bör istället sidans ämne beskrivas, så att det väsentliga kommer först och så att det inte döljs utanför flikens bredd. En godkänd titel på sidan i Figur 4 skulle vara:Prislista – Näringslivsregistret – Bolagsverket.

5Läs villkoren för användning av detta material.

2.4.4 – Skriv tydliga länkarSyftet med alla länkar framgår av länktexten. Användaren ska kunna förstå vart länken leder även när den är lyft ur sitt sammanhang. Tydliga och informativa länkar gör att användaren snabbare hittar den information de söker. De underlättar även för användare med kognitiva begränsningar. Ett exempel på ett typiskt fel: Klicka här för att logga in! En bättre variant skulle vara: Logga in.

2.4.6 – Skriv beskrivande rubriker och etiketterDetta är del 1 av detta kriterium (del 2 finns i avsnittet Formulär). Kolla att alla rubriker på sidan beskriver ämnet eller syftet med det avsnitt som följer och alla ledtexter och etiketter beskriver ämnet eller syftet med det element de tillhör. Detta är enklast att kontrollera med CSS avstängt (Figur 2) men ska även se rätt ut med CSS.

3.2.3 – Var konsekvent i navigation, struktur och utformningNavigeringsfunktioner som upprepas på flera av webbplatsens sidor presenteras i samma inbördes ordning.

2.4.5 – Erbjud användarna flera olika sätt att navigeraDet finns mer än ett sätt att hitta en webbsida inom tjänsten eller webbplatsen, utom när sidan är ett resultat av eller ett steg i en process.Exempel: sökfunktion, navigeringsmeny, sidkarta, innehållsförteckning, A-Ö.

6Läs villkoren för användning av detta material.

TangentbordFöreställ dig att du inte kan använda musen. Hur fungerar sidan då? Använd tangentbordet för att utforska sidan. Du tar dig fram och tillbaka bland sidans element med Tab resp. Shift+Tab. När ett element har fokus är Enter-knappen oftast motsvarigheten till att klicka. För att markera kryssrutor används i regel Mellanslag. Inom en grupp av radioknappar används i regel piltangenterna för att flytta fokus.

2.1.1 – Utveckla systemet så att det går att hantera med enbart tangentbordetSystemet och alla dess funktioner ska gå att hantera med enbart tangentbord. Den som bara kan eller vill använda tangentbordet (eller hjälpmedel som kopplas till tangentbords-kommandon) är beroende av att systemet inte förutsätter att användaren har till exempel mus eller pekskärm.

2.1.2 – Se till att markören inte fastnar vid tangentbordsnavigationOm tangentbordsfokus flyttas till en komponent så kan fokus också flyttas bort från samma komponent via tangentbord.

2.4.7 – Markera tydligt vilket fält eller element som är i fokusDet framgår tydligt vilket element på sidan som har tangentbordsfokus. När fokus hoppar långt på sidan ska det uppfattas i ögonvrån. En tjock ram med framträdande färg (Figur 5, markering a), eller en invertering av elementets färger (Figur 5, markering b) är exempel på godkända varianter.

Figur 5 Två godkända varianter av tangentbordsfokus, ram (a) resp invertering (b).

2.4.3 – Gör en logisk tab-ordningAllt innehåll som användaren kan navigera till via tangentbord kommer i en logisk navigeringsordning och fokus hoppar inte runt på sidan på ett oförutsägbart sätt. Om 2.4.7 ovan är underkänd och du har svårt att se fokus så blir denna checkpunkt svår att bedöma. Du kan då använda Force focus som beskrivs i avsnittet Förberedelser och verktyg.

3.2.1 – Utför inga oväntade förändringar vid fokuseringAtt en komponent får fokus ändrar inte kontexten. Inget oförutsägbart ska hända då ett element får fokus.

2.4.1 – Erbjud möjlighet att hoppa förbi återkommande innehållDetta är del 1 av detta kriterium (del 2 finns i avsnittet Kod). Det ska finnas genvägar i strukturen, till exempel genom så kallade skipplänkar (Figur 6). Det

7Läs villkoren för användning av detta material.

kan ta lång tid att ta sig till olika delar av ett dokument när man navigerar med tangentbord, eftersom man normalt måste stega sig förbi varje länk. Webbplatser som har ett omfattande och komplext menysystem med många länkar kan försvåra avsevärt för många användare.

Figur 6 Tidigt i tabbordningen får användaren möjlighet att hoppa över navigationen via en skipplänk.

2.1.4 – Skapa kortkommandon med varsamhetDet finns inga en-tangentskommandon i tjänsten (stäm av mot kraven). Om det mot förmodan måste finnas en-tangentskommandon så ska det gå att stänga av den funktionen.

1.4.13 – Popup-funktioner ska kunna hanteras och stängas av allaInnehåll som dyker upp vid fokus är tillgängligt oavsett zoom och går att stängas/tas bort enkelt (till exempel med ESC). Det kan gälla till exempel undermenyer, tooltips och popup-fönster. Tyvärr skapar sådant innehåll annars ofta tillgänglighetsproblem, till exempel för att användaren inte har aktiverat funktionen med avsikt; användaren inte blir medveten om att det har dykt upp nytt innehåll eller för att det nya innehållet stör användarens förmåga att genomföra en uppgift.Nu kan du använda musen igen och testa samma sak vid hover, alltså med muspekaren över element. Innehåll som dyker upp vid hover ska förbli synligt tills pekaren förs utanför området eller tills användaren döljer det.

8Läs villkoren för användning av detta material.

Storlek och skärm

1.4.4 – Se till att text går att förstora utan problemKontrollera att det går att förstora texten till 200 % utan att information eller funktion går förlorad. Det gäller alltså inte zoom av hela sidan, utan zoom av texten. I Firefox trycker du på ALT-tangenten och väljer i menyn: Visa > Zoom > Zooma endast texten (Figur 7).

Figur 7 Kryssa i Zooma endast texten i menyn.

Zooma sedan texten till 200% i snabbmenyn (Figur 8) eller genom att hålla Ctrl nedtryckt och scrolla med musens scrollhjul. Aktuell zoom visas i webbläsarens adressfält. Gå sedan vidare till nästa checkpunkt 1.4.12.

Figur 8 Öka zoom till 200 % i Firefox meny.

1.4.12 – Se till att det går att öka avstånd mellan tecken, rader, stycken och ordOm du inte redan gjort det, se till att du har funktionen Text spacing installerad. I avsnittet Förberedelser och verktyg ser du det går till. Med texten fortsatt inzoomad till 200 % aktiverar du Text spacing.Det ska vara möjligt att ta del av allt innehåll och använda alla funktioner på sidan med dessa inställningar. Kontrollera att inget innehåll döljs eller blir oläsbart. Många användare, till exempel dyslektiker och personer med nedsatt syn, behöver kunna påverka textstorlek, avståndet mellan stycken, rader, ord och tecken för att lättare kunna läsa.Ladda om sidan och zooma ut till 100 % innan du går vidare!

9Läs villkoren för användning av detta material.

1.4.10 – Skapa en flexibel layout som fungerar vid förstoring eller liten skärmLayouten fungerar på en 320 pixlar bred skärm utan att information eller funktion går förlorad och utan scroll i mer än en riktning. Denna checkpunkt säkerställer i praktiken att sidans design är responsiv. Ett enkelt sätt att testa detta i Firefox är att trycka Ctrl+Shift+M och ställa in fönstret på 320 x 480 (Figur 9: markering a).

Figur 9 Testa responsiv design i Firefox. Värdena (a) går att ändra och fönstret kan roteras (b).

1.3.4 – Skapa en design som fungerar oavsett skärmens riktningKlicka på knappen Rotera (Figur 9: markering b) och gör samma kontroll igen (som i 1.4.10 ovan).Tryck Ctrl+Shift+M igen för att återgå till normalläge!

2.5.1 – Erbjud alternativ till komplexa fingerrörelserKontrollera att all funktionalitet som kräver flera fingrar eller rörelser är också hanterbar med ett enda finger utan rörelser. När du till exempel tittar på en karta i mobilen så kan du zooma med två fingrar genom att dra isär dem, men du kan även (oftast) klicka på en plus-knapp.

2.5.2 – Gör det möjligt att ångra klickFunktionalitet som är hanterbar med muspekare eller finger slutförs först när fingret lyfts från mus eller skärm, och ingen del av funktionen utförs dessförinnan. På så sätt går det att ångra sig.

2.5.4 – Erbjud alternativ till rörelsestyrningFörmodligen aldrig aktuell för våra webbplatser, tjänster eller appar. Funktionalitet som är hanterbar genom att röra inmatningsenheten eller genom rörelser hos användaren är också hanterbar via användargränssnittskomponenter, och respons på rörelsen går att stänga av för att undvika oavsiktlig aktivering.

10Läs villkoren för användning av detta material.

Färg och form

1.3.3 – Gör inte instruktioner beroende av sensoriska kännetecken

Hänvisningar till komponenter och innehåll är inte enbart beroende av sensoriska kännetecken såsom färg, form, storlek, placering, orientering eller ljud. Exempel på typiska fel: "Tryck på den röda knappen" (Figur 10) eller "Läs mer till höger".

Figur 10 En person med den vanligaste typen av nedsatt färgseende har svårt att se vilken knapp som är röd. Knapparna i bilden har färgerna röd, gul resp. grön, sett genom ett filter som simulerar deuteranopi.

1.4.1 – Använd inte enbart färg för att förmedla informationKontrollera att färg inte används som det enda visuella sättet att förmedla information eller särskilja ett visuellt element. Ett vanligt exempel på när detta är viktigt är länkar i löpande text. Om dessa endast skiljer sig i färg är de lätta att missa för vem som helst. En vanlig brist är användning av röd färg som enda sättet att indikera ett fel (Figur 11).

Figur 11 Två sätt att presentera fel samt en simulering av hur de uppfattas av användare med resp. utan fullgott färgseende. A är underkänt eftersom endast färg används som indikator. B är godkänt eftersom form och text kompletterar färg.

1.4.3 – Använd tillräcklig kontrast mellan text och bakgrundKolla så att det inte finns någon text på sidan som riskerar vara svårläst på grund av dålig kontrast. Här är Insidans ”Fler nyheter” (Figur 12). Datumen möter inte kontrastkraven. Vid simulering av nedsatt syn blir datumen nästintill omöjliga att läsa, medan övrig text är hjälpligt läsbar.

11Läs villkoren för användning av detta material.

Figur 12 Datumen i rutan är grå mot grå bakgrund. För användare med nedsatt syn blir de svåra att läsa.

Om du misstänker att en text har för låg kontrast så kan du enkelt kontrollera det med hjälp av kontrastverktyget (Figur 13) i Wave. Du kan läsa om installation av Wave i avsnittet Förberedelser och verktyg.

Figur 13 Använd Wave för att kontrollera kontrast för text.

Mycket riktigt har datumen för låg kontrast (Figur 14).

Figur 14 Wave indikerar att kontrastvärdet är för lågt.

Använd tillägg såsom Wave endast som komplement när du bedömer kontrasten. Wave kan till exempel missa problem med text som ligger över en bakgrundsbild (Figur 15).

Figur 15 Knappen har godkänd kontrast mot vit bakgrund men inte mot bakgrundsbilden. Denna brist kan automatiska verktyg såsom Wave inte upptäcka.

12Läs villkoren för användning av detta material.

Tänk också på att textens bakgrund kan variera beroende på fönstrets storlek, eller om den visas med mobiltelefon. Det finns säkra, manuella sätt att mäta kontrast i de fall du är osäker. Kontakta tillganglighet@bolagsverket.se för att få hjälp!

1.4.11 – Använd tillräckliga kontraster i komponenter och grafikText är ofta det huvudsakliga informationsbärande innehållet på en sida, men även grafik kan vara informationsbärande (Figur 16). Då måste även den möta kontrastkraven.

Figur 16 Informationsbärande grafik, till exempel ett diagram, måste möta kontrastkraven.

Detsamma gäller komponenter, såsom knappar och formulärfält samt indikatorn för tangentbordsfokus (Figur 17).

Figur 17 Textfält, knappar och indikator för tangentbordsfokus. Alla med för låga kontrastvärden.

13Läs villkoren för användning av detta material.

Bilder

1.1.1 – Beskriv med text allt innehåll som inte är textDetta är del 1 av detta kriterium (del 2 finns i avsnittet Ljud och video).

Alla förgrundsbilder ska ha alt-attributet (tomt eller ifyllt). Bakgrundsbilder omfattas inte av riktlinjen så dem kan du bortse ifrån. Är bilden innehållsbärande så ska den ha ifylld alt-text som presenterar

motsvarande information som bilden i dess sammanhang. Är bilden rent dekorativ så ska den ha en tom alt-text.

Det enklaste sättet att granska tillgängligheten hos bilder är att stänga av sidans stilmall (Figur 2 på sida 3). Då framträder alla förgrundsbilder och bakgrundsbilder visas inte.Kontrollera att alla bilder som visas har alt-attributet. Här är verktyget Web Developer (Figur 18) hjälpsamt genom att lyfta fram den relevanta koden.

Figur 18 För att visa alt-texter klickar du på Web Developer > Images > Display Alt Attributes

Eftersom endast förgrundsbilder visas så ska nu alla bilder du ser ha alt-attributet. Det ska vara ifyllt om bilden är innehållsbärande; och tomt för dekorativa bilder.Att en bild är innehållsbärande (Figur 19, Figur 21 resp. Figur 22) innebär att den förmedlar relevant information som inte återfinns i den omkringliggande texten. Tänk på att bilder ofta är innehållsbärande även om de inte föreställer text!

Figur 19 En innehållsbärande bild med sin alt-text som verktyget Web Developer lyfter fram.

Att en bild är dekorativ (Figur 20) innebär att den kan tas bort utan att sidinnehållets betydelse påverkas. Den ska då ha ett tomt alt-attibut: alt=""

Figur 20 En dekorativ bild med tomt alt-attribut som verktyget Web Developer lyfter fram.

14Läs villkoren för användning av detta material.

I Figur 21 ser du ett exempel på ett avsnitt med bild som har underkänd alt-text. Eftersom avsnittets text inte innehåller informationen i bilden och eftersom bilden inte är enbart dekorativ ska den ha en ifylld alt-text.

Figur 21 Ett underkänt exempel. Vilka är värdeorden? Utan alt-text till bilden är detta avsnitt inkomplett.

I Figur 22 ser du ett exempel på en bra alt-text eftersom den förmedlar samma information som bilden.

Figur 22 En bra alt-text. Alt-texten beskriver inte bilden utan förmedlar samma information som bilden. De två streckade pilarnas innebörd förmedlas av texten ”… i båda företagen.”

1.4.5 – Använd text, inte bilder, för att visa textKontrollera så att all text utgörs av text och inte bild av text. Logotyper är undantagna, men Bolagsverkets logga ska ha alt-texten ”Bolagsverket” (Figur 19) för att följa riktlinje 1.1.1 ovan. För att testa om en text utgörs av text så kan du försöka markera texten (Figur 23).

Figur 23 Siffran ”11” består av en text som ligger ovanpå en bild. Med texten markerad blir detta tydligt.

15Läs villkoren för användning av detta material.

Formulär

2.4.6 – Skriv beskrivande rubriker och etiketterDetta är del 2 av detta kriterium (del 1 finns i avsnittet Struktur). Kontrollera att alla ledtexter och etiketter beskriver ämnet eller syftet med det element de tillhör (Figur 24).

Figur 24 Formuläret Kontakta oss på bolagsverket.se.

3.2.4 – Benämn funktioner konsekventAllteftersom du granskar fler delar av webbplatsen och så kommer du stöta på samma komponenter på flera sidor. Jämför då namn, ledtext/etikett, textalternativ så att de är konsekventa. Om till exempel ett fält för inmatning av personnamn har ledtexten Namn på en sida så ska den inte ha ledtexten För- och efternamn på en annan.

3.3.2 – Skapa tydliga och klickbara fältetiketterDetta är del 1 av detta kriterium (del 2 finns i avsnittet Kod) Kontrollera att …

om ett särskilt format förväntas för inmatade uppgifter framgår det tydligt i ledtexten.

det framgår tydligt vilka fält som är obligatoriska alternativt valfria. ledtexter är visuellt placerade så att det inte uppstår några tvetydigheter

om vilket fält de tillhör. I Figur 24 är ledtexten Ämne * lite väl långt ifrån sitt fält. Figur 25 visar ett sätt att placera ledtexten så att tillhörigheten blir tydligare.

Figur 25 Placeras ledtexten ovanför sitt fält blir tillhörigheten tydligare.

16Läs villkoren för användning av detta material.

det finns ledtexter/etiketter eller instruktioner när innehåll kräver inmatning

från användaren. Ledtexter är kopplade till det fält de tillhör. Att klicka på ledtexten ska ge samma resultat som att klicka på elementet. Till exempel ska klick på ledtexten till en kryssruta kryssa i/ur rutan.

Grupper av sammanhörande fält är visuellt grupperade (Figur 26) och varje grupp har en beskrivande rubrik.

Figur 26 Del av ett visuellt grupperat formulär. Rutan Beställare resp. Beställning är så kallade fieldset. Vad vill du beställa? är ett fieldset underordnat Beställning.

3.2.2 – Utför inga oväntade förändringar vid inmatningTesta att inget överraskande händer, till exempel att kontexten helt ändras, då du ändrar värdet i ett element. Ett vanligt exempel på detta är att en kryssruta eller radioknapp byter ut påföljande innehåll (Figur 27). I vissa fall, som i exemplet, är detta rätt förutsägbart beteende och därför ok. I mer komplexa fall kan det vara mycket förvirrande för många användare.

Figur 27 Ett godkänt sätt att förändra kontext vid inmatning.

17Läs villkoren för användning av detta material.

1.3.5 – Märk upp vanliga formulärfält i kodenDetta är del 1 av detta kriterium (del 2 finns i avsnittet Kod). Kontrollera att vanliga typer av inmatningsfält erbjuder automatisk komplettering av inmatningen där det är önskvärt. Exempel: namn, adress, telefonnummer (läs mer på webbriktlinjer.se)

3.3.1 – Visa att ett fel uppstått och beskriv det tydligtDetta är del 1 av detta kriterium (del 2 finns i avsnittet Kod). Testa att mata in felaktigheter och/eller lämna obligatoriska fält tomma i tjänsten. Om inmatningsfel upptäcks automatiskt så ska det som är fel markeras och felet beskrivas för användaren med text (Figur 28).

Figur 28 Fel vid inmatning presenteras vid fältet och beskrivs i text. I mer omfattande formulär kan detta kompletteras med en sammanställning av fel högst upp på sidan. På så vis ser användaren felet även om fältet är långt ner, utanför skärmen.

3.3.3 – Ge förslag på hur fel kan rättas tillKolla så att om inmatningsfel upptäcks automatiskt och det finns kända korrigeringsförslag så ges förslagen till användaren, utom om det skulle äventyra säkerheten eller syftet med innehållet.

3.3.4 – Ge möjlighet att ångra, korrigera, eller bekräfta vid viktiga transaktionerFör sidor som innebär att användare ingår rättsliga åtaganden, utför ekonomiska transaktioner, ändrar/raderar användarstyrda data et c. ska minst ett av följande gälla:

åtgärden kan ångras, och/eller; inmatat data kontrolleras och användaren ges möjlighet att rätta hittade

inmatningsfel och/eller; det finns en funktion för att förhandsgranska, bekräfta och rätta till

information innan åtgärden slutförs (Figur 29).

18Läs villkoren för användning av detta material.

Figur 29 Användaren får en sammanställning av vad som kommer att skickas in.

Ljud och video

1.1.1 – Beskriv med text allt innehåll som inte är textDetta är del 2 av detta kriterium (del 1 finns i avsnittet Bilder). Kontrollera att ljud- och videoinnehåll som du stöter på har ett textalternativ som åtminstone beskriver innehållet. Textalternativet kan finnas på samma sida eller via en länk.

Figur 30 Podcasten Skatteskolan från verksamt.se.

Varje Skatteskolan-avsnitt har en text som beskriver vad avsnittet handlar om (Figur 31). Det är en tolkningsfråga vad som krävs för att beskrivningen ska vara tillräcklig, men det måste i alla fall finnas en sammanfattande beskrivning.

Figur 31 Beskrivning av innehållet i ett av Skatteskolans avsnitt.

1.2.1 – Erbjud alternativ om en inspelning enbart består av ljud eller videoLjud och video är tidsberoende medan text och bilder är tidsoberoende. Kolla att …

för förinspelade ljudspår finns ett tidsoberoende alternativ som presenterar ett fullgott alternativ. Till exempel ett manuskript som redigerats så att det motsvarar inspelningens verkliga innehåll, eller en transkribering. Detta gäller alltså till exempel podcasten Skatteskolan.

19Läs villkoren för användning av detta material.

för förinspelad video finns antingen ett tidsoberoende alternativ eller ett

ljudspår som presenterar motsvarande information.

1.2.2 – Texta inspelad rörlig media (video, ljud, animationer)Kontrollera att produktioner där ljud är en av komponenterna har en textversion av ljudinnehållet. Ett exempel kan vara en online-föreläsning med informativa bilder och en berättarröst (Figur 32).

Figur 32 Om det som sägs innehåller information som inte finns i bilderna så ska ett textalternativ till ljudspåret erbjudas.

1.2.4 – Texta direktsändningarDet finns textbeskrivningar till allt direktsänt innehåll. Digital video ska ha undertexter och för annat ljud bör en textversion erbjudas.

1.2.3 – Erbjud alternativ till videoinspelningarInspelad digital video ska ha undertexter (kallas även textbeskrivningar eller textremsa), utom när videon är ett mediealternativ till text (men då ska det tydligt framgå). Kontrollera att videoinspelningar har alternativ: syntolkning (ljudbeskrivning) eller presenterad som text. Videon ”Film om verklig huvudman för dig som är företagare” har ett textalternativ (Figur 33).

Figur 33 Textad video: ”Film om verklig huvudman för dig som är företagare”.

Symbolerna som indikerar textning kan variera. De kan till exempel se ut som i Figur 34

20Läs villkoren för användning av detta material.

Figur 34 Tre exempel på symboler för textning.

21Läs villkoren för användning av detta material.

1.2.5 – Syntolka videoinspelningarKontrollera att videoinspelningar är syntolkade (Figur 35).

Figur 35 Texten i den övre pratbubblan (“Ada står vänd mot kameran”) visar exempel på syntolkning, medan den nedre bubblan (Ringsignal. “Hej det är jag!”) representerar det ordinarie ljudspåret.

Syntolkning heter audio description på engelska och symboliseras ofta av någon av ikonerna i Figur 36

Figur 36 Två exempel på symboler för syntolkning.

För många videor så räcker det med att vi ser till att den befintliga berättarrösten beskriver allt väsentligt. Vi behöver inte lägga på ett ytterligare ljudspår. Våra originalvideor kan vara tillgängliga utan större ansträngning om vi gör rätt från början.

22Läs villkoren för användning av detta material.

KodFöljande kriterier kräver fördjupad kunskap om HTML5 och WAI-ARIA för att utvärdera.

4.1.1 – Se till att koden validerarVerifiera att koden validerar utan allvarliga fel. Använd Web Developer (Figur 37). Varningar och vissa fel kan vara ok beroende på kontext. Behöver du hjälp med bedömningen kan du mejla tillganglighet@bolagsverket.se.

Figur 37 Med Web Developer kan du validera koden även på interna webbplatser och i testmiljö med Validate Local HTML. OBS! Data skickas till då extern validator så tänk på GDPR och informationssäkerhet!

1.3.1 – Ange i kod vad sidans olika delar har för rollKontrollera att allt innehåll är uppmärkt med semantiskt korrekt HTML och, där det behövs, aria-attribut för att förmedla struktur, relationer och betydelse. Bland mycket annat ska rubrikstrukturen vara korrekt. Det testar du enkelt med Wave (Figur 38).

Figur 38 Granska rubrikstrukturen med Wave. Den gula ikonen indikerar bristande struktur då en nivå har hoppats över

Övrig granskning för detta kriterium måste göras manuellt i källkoden. HTML5-specifikationen och WAI-ARIA Authoring Practices är bra att ha till hands.

2.4.1 – Erbjud möjlighet att hoppa förbi återkommande innehållDetta är del 2 av detta kriterium (del 1 finns i avsnittet Tangentbord). Kontrollera att sidan använder korrekt HTML5-struktur: <header>, <nav>, <main>, <aside>, <footer> et c. och att den kompletterats med aria-landmärken där det

23Läs villkoren för användning av detta material.

behövs; eller att det finns skipplänkar för att hoppa över innehåll som upprepas på flera av webbplatsens sidor (Figur 6 på sida 6).

2.4.2 – Skriv beskrivande sidtitlarKontrollera i koden att <title>-elementet har ett innehåll som beskriver den specifika sidan. Se 2.4.2 del 1 i avsnittet Struktur för detaljer och bildexempel.

3.1.1 – Ange sidans språk i kodenKolla att det språk som sidans huvudinnehåll är skrivet i är angivet i ett lang-attribut i <html>-elementet. Detta är viktigt för bland andra användare med skärmläsare. För svenska sidor är både lang="sv-SE" och lang="sv" godkända varianter.

3.1.2 – Ange språkförändringar i kodenSpråket är angivet för varje avsnitt eller fras som är på ett annat språk än omgivande text genom lang-attribut. Då slipper hjälpmedelsanvändaren plötsliga inslag av svengelska!Exempel från en tänkt svensk sida: <h2 lang="en-US">Accessibility</h2>

3.3.2 – Skapa tydliga och klickbara fältetiketterDetta är del 2 av detta kriterium (del 1 finns i avsnittet Formulär).Kontrollera att …

det framgår i kod vilka fält som är obligatoriska (required). Ledtexter är kopplade till det fält de tillhör. Grupper av sammanhörande fält omsluts av ett <fieldset> med en

beskrivande <legend>.

1.3.5 – Märk upp vanliga formulärfält i kodenDetta är del 2 av detta kriterium (del 1 finns i avsnittet Formulär). Kolla så att vanliga typer av inmatningsfält har attributet autocomplete med förväntat innehåll angivet. Lista på möjliga värden finns i HTML5-specifikationen.

3.3.1 – Visa att ett fel uppstått och beskriv det tydligtDetta är del 2 av detta kriterium (del 1 finns i avsnittet Formulär). Om ett inmatningsfel upptäcks automatiskt så ska det som är fel markeras och felet beskrivas för användaren med text. Fältet markeras med attributet aria-invalid. Om valideringen sker med JavaScript ska behållaren för felmeddelandet vara en live region.Felmeddelandet bör ligga i ett <strong>, antingen inuti ledtexten eller mellan ledtext och fält. Fältet bör referera till felmeddelandet med aria-errormessage. Här följer ett kodexempel:

HTML Z <label for="age">Ålder <strong id="age-err">Fyll i ålder mellan 0 och 130</strong></label>

<input name="age" type="number" required min="0" max="130" id="age" aria-invalid="true" aria-errormessage="age-err">

24Läs villkoren för användning av detta material.

4.1.2 – Se till att skräddarsydda komponenter fungerar i hjälpmedelKontrollera att alla komponenter som till exempel skapats i JavaScript i användargränssnittet har ett namn och en roll som hjälpmedel kan komma åt.Många användare behöver hjälpmedel såsom skärmläsarprogram, förstoringsprogram punktdisplay med mera. Dessa hjälpmedel kommunicerar med operativsystemets tillgänglighets-API. För att det ska fungera behöver varje del av en webbsida eller applikation vid varje tillfälle exponera sitt namn, sin roll och sitt aktuella värde. Då kan hjälpmedlet presentera applikationen på ett korrekt sätt för användaren.

2.5.3 – Möjliggör röststyrning av knappar och kontrollerKontrollera att text som är synlig på knappar och andra gränssnittskontroller också finns i, och överensstämmer med, den maskinläsbara etikett som representerar kontrollen i exempelvis program för röststyrning.Den som använder röststyrning säger vanligtvis det som står på en knapp för att använda knappen. Detta fungerar om det som står på knappen motsvarar den maskinläsbara texten. Upplevelsen för seende som använder skärmläsare blir också bättre om uppläst text matchar det som visas på skärmen.

4.1.3 – Se till att hjälpmedel kan presentera meddelanden som inte är i fokusKontrollera att statusmeddelanden som presenteras i realtid (med JavaScript) kan bli automatiskt tydliggjorda genom role-attribut, aria-live eller liknande, utan att först få fokus.Se till att de som använder tekniska hjälpmedel som exempelvis skärmläsare och förstoringsprogram kan göras uppmärksamma på viktiga meddelanden även om de presenteras utanför det område på sidan som användaren har i fokus. Berörda användare riskerar annars att missa varningar, upplysningar och felmeddelanden.

tillganglighet@bolagsverket.se

25Läs villkoren för användning av detta material.