Per Axbom smiling, in a lilac shirt, in front of a lake under a dramatic blue sky.

Designing for the web since 1996

Per Axbom

Senior UX designer and digital strategist, with expertise in interaction design, accessibility and visual storytelling.

Filter the portfolio

Showing all 126 cards

Everything since 1996: projects, templates and tools, talks, publications and awards. Open the filter to see only what is relevant to you.

Template

Accessible login with QR codes

Organization
Own initiative
Years
2022
View larger: Still from the film against a pink background: the heading “Inloggning med QR-kod” (Login with QR code) and Per Axbom in a grey hoodie in the corner, with the text “Per Axbom – Arbetar med digital etik och tillgänglighet” (Works with digital ethics and accessibility).
  • View larger: The problem: a typical login: The fictional service Demoverket with the heading Inloggning (Login) and buttons for BankID and Freja eID. Per Axbom is visible in the corner of the film.
  • View larger: The QR code appears at once: The QR-kod page: a QR code that changes every second, with numbered instructions below and a Cancel button – the time limit has already started.
  • View larger: Zoomed in: the QR code ends up off screen: The page is zoomed in so that the QR code fills the screen and its lower part disappears out of view. Below, only the start of the instruction “Öppna appen för BankID” (Open the BankID app) is visible.
  • View larger: Small window: the code doesn’t fit: A shrunken browser window, as a screen reader user might have without knowing it. The QR code is too big for the window and only part of it is visible.
  • View larger: The solution: instructions first: The page BankID på en annan enhet (BankID on another device): the instructions to read in peace, a note that you have 30 seconds once you choose to show the QR code, and a Visa QR-kod (Show QR code) button. No QR code and no time limit yet.
  • View larger: Zoomed in: the code always fits: The same zoom as before, but now in the solution: the QR code sits in a box on top of the page and is large, yet the whole code fits within the visible area.
  • View larger: Tiny window: the code shrinks along: A very small browser window where the QR code has shrunk with the window and is still fully visible, so it can be scanned.
Watch on video.axbom.se

Captions: Swedish and English

My own initiative: a solution for making QR-code login (BankID, Freja eID) work for people with visual impairments. In a film I show the problems and a possible solution, with a clickable demo – the idea can be put to use today. After this, many variations of the solution started being implemented across many sites.

Read more
  • The problems: when you zoom in, parts of the QR code end up off screen, a screen reader user with a small browser window can’t know that the code doesn’t fit, and time limits can be as short as 30 seconds.
  • The solution: no QR code until you’ve read the instructions in peace, and no time limit before then. Plus extra instructions for screen readers, such as how to hold the camera and at what distance.
  • The QR code is sized with vw/vh and can never be larger than 95 percent of the visible area – it shrinks with the window and never ends up out of view.
  • The resizing QR code was Daniel Göransson’s idea, and many of the thoughts grew out of conversations with Daniel and Hampus Sethfors at Axesslab. I showed how it can be applied in practice, in a solution for 1177.
  • And a demand on the Agency for Digital Government (DIGG): “It doesn’t matter if we build accessible services when they sit behind inaccessible login.”

Back to all work

Work