Att designa för skärmläsare – mina 3 viktigaste lärdomar om tillgänglighet

Som UX-designer är vi experter på att designa interaktioner som är lätta att förstå och använda. Vi tillämpar kända interaktionsmönster och återanvänder olika element från våra designbibliotek. Vi ser också till att det blir en tydlig visuell hierarki, strukturerar och grupperar relaterade objekt. Det ska dessutom vara vilsamt för ögat utan för mycket “kladd”. Vi använder färg på ett genomtänkt sätt, till exempel för att framhäva extra viktig information. Allt det här har vi som UX-designers ofta en god känsla för.

I mitt uppdrag som UX-designer på Skånetrafiken – med ansvar för deras app – fick jag tänka om, eller åtminstone vidga min syn på vad “app-design” är. I och med att DOS-lagen (lagen om tillgänglighet till digital offentlig service) även omfattar appar från och med den 23 juni 2021, fick tillgänglighetsanpassningar högt fokus på Skånetrafiken. Appen skulle bland annat stödja skärmläsare. Det blev min uppgift att designa upplevelsen för synskadade eller helt blinda användare. Med hjälp av mobilens inbyggda skärmläsare skulle denna användargrupp kunna söka en resa och köpa sin biljett i Skånetrafikens app.

Jag vill här dela med mig av mina viktigaste lärdomar från uppdraget.

1: Allting är en “knapp”

Som användare av skärmläsare får man appens användargränssnitt uppläst, objekt för objekt. Om man fokuserar på en knapp som heter “Spara” kommer skärmläsaren att läsa upp: “Spara. Knapp. Tryck snabbt två gånger för att aktivera.” Det vill säga användaren får först höra vad objektet har för namn, sen vad det är för typ av objekt och till sist ett tips på hur objektet kan användas. För att trycka och aktivera knappen dubbeltrycker användaren på skärmen.

Designers är vana att välja och vraka bland knappar, reglage, länkar, tabbar, listor… men mobilens skärmläsare har inte denna rikedom i interaktionsspråket, utan allting är mer eller mindre knappar. Interaktionen är identisk. Dubbeltryck för att aktivera och komma vidare. Svep till höger eller vänster för att fokusera nästa objekt. Visuellt kan det vara ett listelement, en knapp, eller en länk. Det saknar betydelse. Dessutom kan skärmläsaren inte avgöra om man fokuserar på en primär eller sekundär knapp. En knapp är en knapp, oavsett hur den är designad rent visuellt.

Detta fick mig att inse att det är väldigt mycket i vårt designmaterial som är helt irrelevant för användare som är beroende av skärmläsaren. Om ett steg i interaktionen presenteras i en helskärm, en popup, en meny eller något annat spelar ingen som helst roll. Det som avgör användbarheten är helt och hållet struktur och språk. Saknar innehållet en logisk struktur och ett begripligt språk så blir appen oanvändbar.

2: Gör om, gör rätt

Mitt uppdrag var att “lägga på” stöd för skärmläsare i Skånetrafikens befintliga app. Utgångspunkten var att behålla appens befintliga utseende och interaktion för att både spara tid och resurser, men också för att inte ändra etablerade interaktioner för seende användare. Det sågs som en relativt enkel och avgränsad uppgift. Många delar av appen hade några år på nacken och hade aldrig designats utifrån detta tillgänglighetsperspektiv.

Vi gick igenom appen, skärm för skärm. Det var ett samarbete mellan design, test och utveckling. En stor del i arbetet var att bestämma vilka objekt som skulle grupperas och läsas upp i ett svep. Detta för att minska antalet interaktioner på varje skärm. Vi upptäckte flera ställen där strukturen inte var logisk när användargränssnittet lästes upp av skärmläsaren. I några fall var vi helt enkelt tvungna att ändra även för seende användare. Ett sådant exempel var när notiser användes för att förmedla att en biljett hade mottagits i appen. Som du vet har notiser egenskapen att tima ut, och skärmläsaren kan då inte få fokus på den informationen. Här blev det till slut en standard-popup för att lösa problemet. Faktum är att de designjusteringar som gjordes skapade en lugnare och robustare upplevelse för alla användare.

Att lägga på stöd för skärmläsare i efterhand är svårt, tar tid, kräver förståelse för vad tekniken tillåter och vad användaren förväntar sig. Det var inte “bara” att läsa upp användargränssnittet objekt för objekt.

3: Din syn är din värsta fiende!

Som UX-designer måste man såklart själv testa sin egen design och känna på upplevelsen. Så även för den här designuppgiften. Jag ägnade mycket tid åt att gå igenom interaktionen med skärmläsaren påslagen. För att inte fuska fick jag blunda eller hålla mobilen under skrivbordet. Men som designer vet man redan hur användargränssnittet är uppbyggt. Jag vet var objekten ligger på skärmen, att appen har fyra tabbar längst ner och en tillbaka-knapp längst upp till vänster. Jag kan omöjligt tänka bort detta! Och det är väldigt lätt att tjuvkika.

Målgruppstester ökar kunskapsnivån och förståelsen

Den enda vägen runt detta är, som alltid, att testa tjänsten på målgruppen. Det är extremt viktigt att se och lära sig av användaren som dagligdags interagerar med skärmläsare. Små saker som vi seende aldrig skulle reagerat på, blev tydliga hinder i användningen. Testerna med synskadade ledde till justerade texter och copy i appen, ändrad ordning på uppläsning av information i sökträffar, samt framtagande av nya designförslag för att undvika expanderbara menyer i appen.

Men den allra största behållningen av att genomföra testerna var att vi samtidigt byggde förståelse och empati för användaren. Jag delade små videoklipp från testerna med utvecklingsteamet och vi tog gemensamt fram ändringsförslag. Kunskapsnivån i teamet ökade, och att få ordning på upplevelsen för synskadade fick på så sätt fokus, både från produktägare och utvecklare.

Med DOS-lagen i ryggen kan man hoppas att nya appar och tjänster designas med stöd för skärmläsare redan från start. Jag ser bara fördelar med detta. Man säkerställer en tydligare och enklare struktur, begripligt språk, och en mer sammanhängande interaktion. Jag uppmanar dig som designer att omfamna kravet för skärmläsare! Det blir ett verktyg, eller en metodik, för att testa din design. Och, det kan aldrig sägas för många gånger: att designa för tillgänglighet gör upplevelsen bättre för alla!

Avslutningsvis, några tips för dig som ska designa en ny app:

Gör dig bekant med de hjälpmedelsfunktioner som tillhandahålls i mobilen.
Tänk på alternativa navigationer och hjälpmedel redan från start.
Testa, testa, testa, spela in och sprid kunskap i din organisation.

LÄS MER: