Tillgänglighetsgranskning Arbetsförmedlingen
Arbetsförmedlingen arbetar aktivt för att säkerställa att deras digitala tjänster är tillgängliga för alla användare, oavsett digital funktionsförmåga. Inför varje ny release av en ny tjänst behöver utvecklingsteamet publicera en tillgänglighetsredogörelse. Som UX-designer i teamet genomförde jag en tillgänglighetsgranskning av Kompetensprofilen – en tjänst som hjälper asylsökande att dela sitt CV med arbetsgivare. Granskningen låg till grund för tillgänglighetsredogörelsen
Mitt arbete bestod av att analysera tjänsten utifrån Arbetsförmedlingens tillgänglighetsriktlinjer, identifiera förbättringsområden och ta fram lösningsförslag. Genom nära samarbete med utvecklare, produktägare och tillgänglighetsexperter bidrog jag till att stärka tillgängligheten och användarupplevelsen i tjänsten.
Scope
Produkt: Kompetensprofilen
Tid: 2 Sprintar (4 veckor)
Verktyg: Arbetsförmedlingens tillgänglighetslista, Wave, Headingsmap, Google Lighthouse
Innehåll
- TBA
Målgrupp för Kompetensprofilen
Kompetensprofilen riktar sig till asylsökande som vill dela sitt CV med arbetsgivare. Tjänsten finns på sju olika språk. För många i målgruppen innebär delning av personuppgifter, såsom namn, personnummer eller bostadsort, en säkerhetsrisk. Det begränsar vilken information som kan samlas in från användarna.
Utmaningar för mig som designer
Att designa för skärmläsare
Det här var första gången jag genomförde en tillgänglighetsgranskning. Den största utmaningen var att bedöma tillgänglighet för skärmläsare, men med stöd av en erfaren tillgänglighetsexpert och nära samarbete med en frontendutvecklare fick jag snabbt en djupare förståelse för tillgänglig kod och design för skärmläsare.
Att argumentera för designförbättringar
En annan utmaning var att motivera och prioritera de designförbättringar jag föreslog. Tillsammans med produktägaren och teamet balanserade vi vad som var nödvändigt att genomföra kontra ”nice to have”, samtidigt som vi tog hänsyn till andra prioriterade uppgifter i backloggen.
- - Tillgänglighetsredogörelsen
- printscreens
Tillvägagångssätt & arbetsprocess
Arbetsförmedlingens tillgänglighetslista är ett öppet verktyg för alla. Använd den för att lära dig mer om tillgänglighet, eller för att granska din hemsida
https://designsystem.arbetsformedlingen.se/tillganglighet-och-design/tillganglighet-checklista
Tillgänglighetslista
Original dashboard
Ny
Itereringar jag gjort:
-
All text är större
-
All text och text storlek används kontinuerligt
-
Alla bilder och grafer är större
-
Visuella detaljer är ändrade och tillagda för att stödja förståelse av designen
-
Mer whitespace och utrymme mellan objekt
-
Frame-size kompatibel med desktop - Går att se i helskärm
-
Ord som är missvisande är ändrade
-
Alla informationsrutor och grafer har fått mouse-over funktion för att ge mer information.
-
Påbörjat iterering av grafer som är svåra att förstå
Leadership interactions graf
Syftet med Leadership interactions är att visa hur interaktioner mellan ledarna i organisationen sker. Detta för att få syn på exkluderingar av olika grupper inom olika ledarskikt.
Original
Ny
User stories
som designen uppfyller:
Som användare vill jag:
-
Se hur mycket män och kvinnor kommunicerar mellan varandra och inom grupperna
-
Se hur många män och kvinnor som finns på den avdelning eller del av företaget jag fokuserar på.
-
Kunna filtrera på olika skikt av ledare, toppchefer, mellanchefer och firstline chefer)
-
Kunna filtrera på olika avdelningar av organisationen
-
Kunna jämföra olika mätpunkter
-
Få lösningsförslag baserad på risker som analysen hittar
Differences graf
Syftet med Differences grafen är att visa skillnader i jämställdhet, inkludering och inflytande mellan olika grupper i en organisation. Användaren ska förstå vilka skillnader som finns och huruvida det finns en risk eller inte.
I nedanstående exempel används män och kvinnor som grupp som jämförs.
Original
Ny
Itereringar jag gjort
-
Ett stapeldiagram som tydligare visar skillnaden mellan män och kvinnor
-
Tydligare relation till 0-100 skalan på vänstersidan.
-
0-100 skalan har fått en grön-röd indikator på när en graf börjar närma sig risknivå.
-
Alla grafer och de fyra sakerna som mäts har fått mouse over-funktion med mer information när man hovrar över dem.
Itereringar jag gjort
-
"Inclusion score" och "findings" är kvar, med mindre justeringar.
-
Mer fokus på Trender, risker och insikter, där användaren ska få en tydligare röd tråd mellan dessa
-
Möjlighet att klicka sig vidare via länkar till andra sidor
-
Möjlighet att lägga till "Action Suggestions"
-
Nytt Inclusion score Trends diagram
Nya sidor
1. Ny dashboard - overview
2. My DEI project - Ger användaren möjlighet att skapa projekt genom att sätta mål och koppla metrics till sina mål, för att lättare uppnå dem Användaren får även lösningsförslag vid risker som analysen hittar.
3. Reports - Här ska all data och insikter visas på ett strukturerat sätt. (Ej klart)
4. Definitions - ordlista kopplad till DEI* arbete.
DEI = Diversity, Equality & Inclusion
Lessons learned
flytta längst ner
Utöver checklistan använde jag:
HTML Codesniffer och Google Lighthouse för att analysera den semantiska strukturen, ARIA-attributen och hierarkin i koden.
Granskning av tangentbordsnavigering och fokusflöde för att säkerställa att alla interaktiva element var åtkomliga och fungerade logiskt utan musinteraktion.
Kontextuell analys av skärmläsarstöd för att identifiera problem i hur innehållet presenterades och tolkades av hjälpmedel.
Samarbete
Tillgänglighetsarbetet var ett tvärfunktionellt samarbete där jag arbetade nära:
Frontendutvecklare för att granska kodens semantik och diskutera förbättringar.
Produktägaren för att prioritera vilka tillgänglighetsåtgärder som skulle implementeras.
Tillgänglighetsexperten för att säkerställa att riktlinjerna tolkades korrekt och applicerades effektivt.
Designsystemteamet för att hantera en komponent som saknade stöd för tangentbordsnavigering, vilket gjorde att essentiella funktioner inte kunde nås via tabbning eller fokus. Diskussionerna ledde till förbättringar i komponentens underliggande kod och interaktionsmönster.
Iterativa förbättringar
Utifrån granskningen och testerna identifierades flera förbättringsområden som successivt åtgärdades. Ett viktigt fokus var att optimera interaktiva komponenter så att de fungerade bättre för både skärmläsare och tangentbordsanvändare. Samarbetet med designsystemteamet resulterade i att en kritisk komponent omarbetades för att säkerställa korrekt tabbflöde och fokusindikering.
Vidare förbättrades information och validering i tjänsten för att göra det tydligare för användarna när något behövde korrigeras. Genom att justera hur felmeddelanden presenterades och säkerställa att de kunde uppfattas av skärmläsare blev tjänsten mer tillgänglig och användarvänlig.
Leverans
ta bort denna del