Testanvisningar
Med skärmläsare kan du redan under utvecklingsskedet kontrollera överträdelser mot WCAG-kriterierna, som både är vanliga och allvarliga för användarna. Sådana åtgärder är exempelvis:
- WCAG 1.3.1 Information och relationer
- WCAG 1.3.2 Meningsfull ordning
- WCAG 3.1.1–3.1.2 Sidans och delarnas språk
- WCAG 3.3.1 Identifiering av fel
- WCAG 4.1.2 Namn, roll, värde
- WCAG 4.1.3 Meddelanden om status
Skärmläsare är särskilt effektiva vid verifierandet av kriteriet 4.1.2 Namn, roll, värde. Detta ska kunna kontrolleras i all kod som ska publiceras redan i genomförandeskedet; testningen är okomplicerad efter lite invänjning. Det är enkelt och viktigt att även säkerställa läsordningen (kriterierna 1.3.2 och 2.4.3) när man skapar mer invecklade så kallade kompositelement (se modul 3/Dokument X) eller när komponenter kombineras till exempelvis en navigeringshelhet. Den tredje kriteriet som är enkelt att testa, men ändå viktigt, är WCAG 1.3.1, där man förutsätter att tjänstens formulärkontroller, såsom inmatningsfält, ska ges ett namn på ett specificerat sätt, som hjälpmedelprogrammen kan tolka när användaren riktar in kontrollen.
WCAG 4.1.2 Namn, roll, värde Testning
När användaren riktar in ett element på webbsidan med skärmläsaren, beskriver hjälpmedlet tre centrala uppgifter om elementet: Namn, roll och värde. Alla element har inte alla dessa egenskaper – eller åtminstone inte på ett sätt som skärmläsaren skulle behöva beskriva. Till exempel innehåller ett textstycke (<p>-tagg) på webbsidan enbart ett namn (styckets text), men det har inte särskilt värde. Det har en styckesroll, men detta berättas vanligtvis inte separat, eftersom beskrivning av den vid varje stycke skulle vara väldigt jobbigt för användaren. Däremot har anchor-taggen (a) förutom namnet (länktext) också en roll (länken) och eventuellt ett värde eller en status som är besökt eller icke besökt. Vid en länk berättar hjälpmedlet rollen, eftersom det är viktigt att användaren, som förmodligen inte kan utvärdera sidovyn visuellt, kan urskilja länken från brödtexten.
Det är viktigt att testa trion Namn, roll, värde, när man utvecklar skräddarsydda komponenter. Med andra ord, när man istället för <button>-taggen skapar en knapp av exempelvis <img>-taggen, ska hjälpmedlet kunna berätta att detta element som fungerar på ett avvikande sätt (från grundbilden) i själva verket är en knapp. Om det dessutom är fråga om en menyknapp (ännu mer precis roll), ska skärmläsaren även berätta om menyn är öppnad eller stängd (värde/status). Namnet är naturligtvis menyknappens text eller annan beskrivning avsedd för hjälpmedlet, som kan vara given som elementets attribut, när det inte finns någon synlig text eller den inte är tillräcklig. I WCAG avser namnet ett tillgängligt namn som är ett mer omfattande begrepp än sidans visuella textinnehåll. I materialet för utvecklare i modul 4 i Helsingfors tillgänglighetsmodell finns mer ingående information om att lägga till attributen namn, roll och värde.
Testning av WCAG 4.1.2 sker på så sätt att man riktar in varje skräddarsydd komponent med skärmläsaren och utvärderar om elementets namn förmedlas av den information som skärmläsaren producerar. Om till exempel dialogens stängningsknapp är ett kryss, ska skärmläsaren ändå beskriva ett namn för elementet, såsom ”stäng”.
Därefter utvärderar man om elementet förmedlar en roll. För stängningsknappen ovan skulle exempelvis rollen vara ”knapp”; annars kan användaren inte veta att det är ett objekt som fungerar som en knapp. Den tredje saken som utvärderas är om skärmläsaren på rätt sätt beskriver ett element eller en status som eventuellt tillhör elementet.
Den föregående knappen har inte ett sådant värde: Knappens status ändras inte. Men om knappen är en hjälpikon i ett formulär, där det hoppar upp ett så kallat pop-up-område om man klickar på den, har knappen förutom ett namn och en roll även en status: Öppnad/utvidgad eller stängd utifrån om pop-up-området är öppnat eller inte. På motsvarande sätt är kryssrutans värde eller status ”vald” eller ”inte vald”. Det beror alltså på elementet, vad det borde ha för roll och värde/status, eller om elementet överhuvudtaget har värde/status. Detta kräver att man vänjer sig att använda skärmläsaren, men den är ganska tydlig när man vänjer sig med att lyssna på elementen, i synnerhet om testaren har en grundläggande uppfattning om genomförandet av elementen som produceras på webbsidorna åtminstone på HTML-kodnivån.
Avslutningsvis aktiverar man elementet, det vill säga ”klickar” med skärmläsaren (väljer, väljer inte, eller öppnar, stänger o.s.v.) och samtidigt utvärderar man även om status eller värde förmedlas på rätt sätt.
Detta kan man träna på bland annat på tillgänglighetsmodellens demosida med kontrollerna på fliken ”Buttons”. Loggen vid sidan om dem visar hur testelementens attribut ändras.
WCAG 1.3.2 och 2.4.3
Hänvisning till utbildningsmaterialet. Referens nästa vecka.
WCAG 3.3.1 Identifiering av fel
Hänvisning till utbildningsmaterialet. Referens nästa vecka.
Testverktyg: Bläddring med tangentbord
En viktig del av tillgänglighetstestningen, vid sidan om användning av skärmläsare, är även användning av tjänsten med tangentbord utan mus och skärmläsare. Det är viktigt att observera att användningen av skärmläsare inte motsvarar tangentbordsanvändning, även om stationära datorers skärmläsare ofta styrs tangentbordet.
Med tangentbordsläsning avses en användningsmetod där man rör sig på webbsidan med hjälp av tabbtangenten (tabulator, TAB). Webbläsaren flyttar då inriktningen mellan sidans interaktiva element. Interaktiva element är alla länkar, knappar och formulärkontroller, samt element som separat markerats som interaktiva i koden. Webbläsaren riktar inte in, och ska inte heller rikta in, passiva textinnehåll eller bilder; skärmläsaren riktar däremot in allt innehåll på webbsidan som inte är separat dolt för hjälpmedel. Det är viktigt att vara medveten om denna skillnad när man testar tjänsten med tangentbordet.
Tangentbordet är inte ett hjälpmedel för webbläsaren. Det innebär att webbläsaren inte beaktar Wai-Aria-attribut avsedda för hjälpmedel när man inte använder en skärmläsare. Detta leder till att man vid testningstillfället inte automatiskt kan anta att även om en viss del av tjänsten fungerar med skärmläsare, att den också fungerar med tangentbordet. Så är det inte automatiskt. Till exempel skräddarsydda element som saknar tangentbordshanterare eller så kallad tabindexering kan nödvändigtvis inte aktiveras eller ens inriktas med enbart tangentbordet utan skärmläsare. Detta beror på att skärmläsaren skickar en click-event till elementet, varvid den kan aktivera samma element som musen/touch-användaren. Skärmläsarens inriktning beror inte heller på tabindex-värdena. Du kan läsa mer i materialet för utvecklare i modul 4.
Testning av tangentbordsläsning i praktiken
Tangentbordsläsning är i första hand kopplad till WCAG-kriterierna 2.1.1–2.1.2. De fastställer att alla funktioner på webbsidan ska vara tillgängliga även med enbart tangentbord utan mus, ifall det inte är fråga om en funktionalitet som på grund av sin karaktär endast kan fungera med en markör (till exempel vissa spelliknande funktioner eller ritande). Testaren ska således undersöka att varje interaktivt element på sidan riktas in i tur och ordning, när man går framåt på sidan. Om elementet kan aktiveras med musen (öppna/stänga, slå på/av o.s.v.), ska samma aktivering kunna utföras även med tangentbordet, exempelvis med tangenterna Enter och mellanslag.
Även andra kriterier är kopplade till tangentbordsläsning. WCAG 2.4.3 Fokusordning innebär att elementen på webbsidan inriktas i en logisk ordning – det vill säga när man rör sig på webbsidan med tabbtangenten, ”hoppar” inriktningen från ett element till ett annat på så sätt att den följer sidans logiska struktur. Till exempel om användaren har aktiverat menyknappen, som har öppnat den så kallade dropdown-menyn, ska inriktningen som nästa steg flyttas till menyns första objekt och inte fortsätta vidare på sidan under den. Om menyn är stängd, ska inriktningen istället fortsätta från menyknappen till nästa objekt, och inte exempelvis in i den stängda menyn.
Ofta följer inriktningsordningen sidans layout: Uppifrån ner och från vänster till höger, men den kan också motiverat avvika från detta. Mer information finns i materialet om tjänsteutformning i modul 3 och i materialet för utvecklare i modul 4.
Om läsordningen inte beaktas i genomförandet, kan rullgardinsmenyn i föregående situation återges till användaren först helt i slutet av sidan, eftersom läsordningen alltid följer DOM-ordningen, inte den visuella layouten. Allmänna problempunkter i tangentbordsläsningen är just formulär och modaler (se modul 4 / anvisningar för utvecklare). Man fäster särskild uppmärksamhet vid dessa innehållstyper vid testning av bläddring med tangentbord.
Bläddring med tangentbord är även kopplat till den visuella testningens WCAG-kriterium 2.4.7 Synligt fokus. Mer information och exempel:
Modul 3 / Allmänna anvisningar för planering av tjänster:
Ursprunglig version: Tero Pesonen/Siteimprove
Skapad: 3.4.2021.