Tillgänglig inloggning med QR-kod

Kontakter med myndigheter, banker och företag kräver allt oftare inloggning med QR-kod. Antingen i kombination med BankID eller Freja eID. Det finns många övergripande problem med QR-koder, men jag vill här adressera hur de visas på ett sätt som gör det oerhört svårt för människor med olika grader av synnedsättning att nå viktiga tjänster.

I filmen visar jag problemen och en potentiell lösning. Den som bryr sig om tillgänglighet kan alltså börja förbättra inloggning med QR-kod redan idag. Digitaliseringsmyndigheten (DIGG) måste också ställa mycket högre krav på tillgänglig inloggning. Det spelar ingen roll om vi bygger tillgängliga tjänster när de ligger bakom otillgänglig inloggning.

Filmen är textad på svenska och engelska. Nedan finns också en transkribering av filmen.

Transkribering av filmen

Hej! Jag vill visa några tankar och idéer för hur inloggning med QR-kod bör ske för att inkludera så många människor som möjligt.

Jag börjar med att visa vad problemen är, och visar sedan en potentiell lösning på dessa problem.

Många av de här idéerna har växt fram i samtal med Daniel Göransson och Hampus Sethfors på Axesslab.

Och en central komponent i denna lösning är helt och hållet Daniels genidrag.

Först, låt oss titta på problemet.

Jag exemplifierar med en typisk inloggning med QR-kod som man ser på många webbplatser idag.

Det jag visar nu är en inloggningssida för en fiktiv tjänst hos den fiktiva organisationen Demoverket.

Det brukar finnas olika inloggningssätt, och jag visar här exempel på knappar för BankID och Freja eID.

Jag visar nu först hur det ofta går till idag med BankID på desktop, alltså på en dator som inte är en läsplatta eller mobil.

När jag klickar på BankID öppnas en ny sida med en särskild QR-kod som uppdateras och byter utseende varje sekund.

Under QR-koden finns instruktioner för hur man ska göra, alltså öppna sin mobilapp för BankID,

trycka på QR-symbolen i appen för BankID, rikta kameran mot QR-koden och följa instruktionerna i appen.

Ofta finns en tidsgräns för hur länge man har på sig. Och då avbryts allt innan man hinner skanna QR-koden.

Ibland är denna tidsgräns så kort som  30 sekunder.

Det kan vara svårt om man till exempel använder zoom-verktyg eller skärmläsare, eller om man har lässvårigheter

Problemen jag vill belysa nu har främst att göra med sådant som händer om man har nedsatt syn, men som vanligt kan många fler gynnas av förbättringar.

Jag backar tillbaka och visar hur det ser ut om man zoomar in på webbsidan och endast ser en liten del av den.

Det här är något som personer med nedsatt syn ofta gör, antingen med webbläsaren som här, eller med andra verktyg.

Nu klickar jag på BankID och även nästa sida, med QR-koden, blir inzoomad.

Förutom att en tidsgräns kan ställa till problem vill jag att du här lägger märke till vad som händer med QR-koden.

När sidan är inzoomad blir även QR-koden väldigt stor, och när jag då bläddrar i sidan döljs delar av QR-koden.

Försöker jag nu läsa av QR-koden så kommer det inte att gå, eftersom inte hela syns i bild.

För en person som ser bra är det uppenbart,  men om man ser sämre kanske man inte förstår vad som är problemet.

Jag backar igen till inloggningen och vill denna gång visa ett annat fenomen som är vanligt om man inte ser.

Om man använder skärmläsare som läser upp innehåll från webben, och tillåter navigering med till exempel tangentbordet, så spelar det ingen roll hur stort webbläsarfönstret är på datorn.

Det är alltså inte helt ovanligt att ett webbläsarfönster kan vara förminskat så att bara en liten, liten del är synlig.

För skärmläsaren spelar det ingen roll. Det går fortfarande precis lika bra att navigera i och läsa allt på webbsidan.

Men om vi nu vill logga in med QR-kod så blir problemet uppenbart.

När webbläsaren är förminskad så är QR-koden alldeles för stor för att få plats i fönstret.

Om inte hela QR-koden syns så blir den obrukbar. För den som inte ser,  men följer instruktionerna, händer ingenting.

Jo, det som händer är att man blir frustrerad, inte förstår, och inloggningen avbryts igen på grund av tidsgränsen.

Det jag vill visa nu är ett sätt att försöka lösa de här problemen.

Jag visar nu en prototyp av en inloggning som på samma sätt erbjuder olika inloggningssätt.

Jag klickar på BankID och här är den första skillnaden. Ingen QR-kod visas på en gång.

I stället ger vi användaren tid att i lugn och ro läsa igenom instruktionen innan någon tidsgräns aktiveras.

Jag behöver inte välja att se QR-koden förrän jag läst och känner mig trygg med att jag förstått instruktionerna.

Det här ger också möjlighet att visa särskilda instruktioner till skärmläsare. Innehåll som kan läsas upp för den som inte ser.

Det kan till exempel handla om hur man ska hålla kameran, på vilket avstånd från skärmen, och andra tips.

Särskilda instruktioner för skärmläsare kan vara till stor hjälp när det ställs särskilda krav på tid och fysiska rörelser.

Så, nu klickar jag på knappen Visa QR-kod och på samma sätt som tidigare ser vi en QR-kod och instruktioner.

Här är instruktionerna en upprepning av det man sett tidigare och alltså inte helt nödvändiga.

Men de kan ge viss trygghet för den som känner sig osäker.

Även om den här rutan ser väldigt lik ut den tidigare rutan som jag visade så särskiljer den sig.

Om jag förstorar den här ytan så förstoras även QR-koden, men aldrig så att den hamnar utanför skärmen.

I det här fallet har jag byggt sidan så att QR-koden inte kan hamna utanför webbläsarens synliga yta.

Om jag återställer till ursprunglig storlek så kan jag också visa vad som händer när webbläsaren görs liten.

När jag minskar webbläsaren så att den på skärmen blir jätteliten så följer QR-koden med och minskar i storlek också.

Återigen, QR-koden kan alltså inte göras osynlig. Även om den blir liten så ska den fortfarande gå att läsa av.

Det här innebär nu att de två problem vi såg tidigare nu är lösta:

Om jag råkat förminska webbläsaren och inte själv är medveten om det så hamnar QR-koden fortfarande i bild.

Om jag använder zoom-verktyg så blir QR-koden heller aldrig större än den synliga ytan.

Om man tolkar regler för tillgänglighet bokstavligt kan man kanske tycka det är konstigt att man inte kan förstora mer.

Vi måste då komma ihåg syftet med QR-kod vid inloggning. Om den inte kan läsas blir den obrukbar.

Här vill jag ge all cred till Daniel Göransson som kom på idén med QR-koden som ändrar storlek med fönstret.

Jag fick se en prototyp som Daniel byggt med en QR-kod som minskade i storlek några veckor innan jag själv provade.

I det här fallet ville jag ta Daniels idé och visa hur den kan tillämpas praktiskt i en företagslösning jag arbetar med.

För den som är nyfiken på hur så kan jag nämna att det finns olika sätt att ange storlekar på webben.

Vanligt är till exempel att säga att en ruta ska vara 200x200 pixlar stor.

I det här fallet anges storleken på QR-kodens behållare i stället med enheterna vh och vw.

Detta står för viewport height och viewport width. Viewport är ett ord som avser den synliga ytan i webbläsaren.

Jag talar alltså om för webbläsaren att QR-koden aldrig får bli större än 95% av den synliga ytans bredd och höjd.

Och webbläsaren lyder.

Den som var uppmärksam noterade säkert att jag fick göra några kompromisser.

Till exempel visar jag inte längre instruktionerna när viewport kommer under en viss storlek.

QR-koden öppnas också i en modal, en ovanpåliggande ruta, vilket ställer krav på att styra fokus för skärmläsare.

Det ligger utanför denna demo att förklara den bästa hanteringen av rutor som ligger ovanpå varandra.

Men ett skäl till att vilja använda en modal är att bibehålla känslan av att man är på rätt plats.

Logotypen och webbplatsens ramverk syns fortfarande i bakgrunden för den som ser, vilket ger trygghet.

Jag är inte helt klar med den här lösningen och kommer behöva  vrida och vända ytterligare några varv.

Det jag hoppas nu är förstås att det här kommer leda till ytterligare goda idéer och inspel.

Men framför allt hoppas jag förstås att fler företag och organisationer ser och förstår.

Det går att göra säker inloggning bättre och mer tillgänglig för fler redan idag.

Jag hoppas vi alla som jobbar med webb är beredda att lägga tid och energi på att det blir så.

Tack för att du tittar och stort tack till Daniel och Hampus för era alltid så värdefulla insikter.

Du kan själv kolla på demon på qrdemo.uxa.se