What is a QR code?
QR code stands for Quick Response code and you have probably seen the square pattern being used in “read more” parts of paper ads like this:
Or in online bank login screens like this:
And there are many other uses for them:
- Scanning a QR code on a new dishwasher to open up an installation guide video.
- QR codes in books to help people with dyslexia with audio/video versions of the text as in this “Blipsay” example by Susanna Cederquist. (PDF)
- Restaurants linking to a digital menu or the restaurants app from a physical menu.
- Physical mail containing links where a QR code saves you from writing the URL manually into a browser.
- Smart TV interactions like login and payments using QR codes on screen.
Advantages of QR codes
A QR code can bridge the gap between the physical world and the digital world, and it can save a lot of time and hassle for many users.
Most modern phones have QR code scanning functionality built in to their camera apps so users don’t even have to download an app.
General problems with QR codes
Instructions and help
QR codes are still fairly new and far from everyone knows what they are and how to use them!
And even if users know how to scan a QR code with their camera app, that doesn’t always work! For two way authentication QR codes, even if they look exactly like other QR codes – they should not be scanned with the normal scanning app, or the built in camera scanner. Users might need to use a specific identification app to scan that QR code. And it’s not alway obvious for users why, and when to use which. So instructions are vital!
The solution is to write instructions of the steps that the user needs to complete in order to login with a QR code.
Here is a good example of instructions for a two factor identification app in Sweden:
- Open the BankID app on your phone or tablet.
- Press “scan QR code” in the app.
- Point your phone or tablet at the QR code on the screen.
- Follow instructions in the app.
You can also give some extra instructions for screen reader and other assistive technologies users, which we’ll go through later.
When you use QR codes in printed media or in other devices such as TV-apps or gaming consoles it helps to put the link (URL) that the QR code represents in clear text alongside with the code itself. This not only helps the user to type it manually if needed, but also hints of what the QR code will do – take them to another page.
Time limit
QR codes used in login scenarios often have time limits for security reasons. But having short time limits means some users will not have time to read the instructions or start the app and scan the QR code before timing out. These time limits are often set based on the assumption that the user is a strong reader, with perfect eyesight. But following written instructions when using assistive technologies like a screen reader can take a lot more time than for other users. Same goes for users with reading impairments.
According to the WCAG (Web Content Accessibility Guidelines) users need to be able to extend any time limits in digital interfaces at least 10 times. The user also needs to be notified at least 20 seconds before the time limit ends. So if you, like many others, use a 30 second time limit you need to notify the user after 10 seconds that “the time limit is about to be reached”. That is, if you want to conform to the WCAG, which may be required by law.
If getting interrupted once every 10 seconds with a warning prompt sounds annoying – you should try to increase the default time limit to be as long as possible.
We recommend having at least 3-5 minutes as a time limit. You still need to give users the ability to extend the timer and we recommend notifying the user when there is 30 seconds left. Let the users extend in a simple way such as pressing a button or by just pressing space on the keyboard. When you notify the user, it is important to use simple language and short copy in the button such as:
“30 seconds left for login. Extend.”
Alternative ways to sign in
If you have limited motor skills or have a mobile device mounted on a wheelchair it could be hard or even impossible to pick up the phone and use the camera to scan the QR code.
We made this video with Jessica, who highlights how QR codes can be problematic for users with motor impairments, and showing her “techy workaround”. It’s in Swedish but with English subtitles.
To manage these issues, you should offer alternative ways to sign in. For instance using username and password with 2 factor authentication. There are such solutions that does not require scanning a QR code. Here in Sweden we have a software called “BankID on file” for this purpose.
Problems for screen reader users
As a person with a severe visual impairment I often use a screen reader to convey text and other information on my screen. With QR codes being very much a visual thing, many accessibility issues come from relying too much on users being able to see what’s on the screen.
Position of QR codes
Not all users will know where on the screen the QR code is located.
You can help us by making the QR code centered on screen as that’s where most users will likely attempt to find it first.
Obscured or cut-off QR codes
Not all users will know if the full QR code is visible in their browser window or not. Here we see a QR code being cut of when I had accidentally made my browser window smaller. Tiny browser windows are quite common amongst our friends who use screen readers, because most of them don’t need the browser window to be a specific size to access the content of the page.
Cut off QR codes can also be caused by being zoomed in using browser zoom settings, but more on that under “Problems for magnification”
A common (but bad) solution to this is adding help text with shortcut commands to increase window size. One big drawback when implementing this solution is that you need to have system specific shortcut commands, for all operating systems and browsers. There are also usability and accessibility problems with this approach:
- Long instructions of this type adds additional cognitive load in a scenario that is already stressful, especially if time limits are in place.
- Users who need to increase the window size might not be able to use a keyboard as instructed due to motor impairments (try pressing “ctrl” and “+” at the same time with only one arm)
This can be solved better by making it able to press the QR code (which of course includes being possible to activate using space or enter keys). Then use the Fullscreen API in the browser to trigger fullscreen mode. Check out my CodePen demo or the demo with code to see how. That way the whole QR code will be visible, no matter what window size the browser was opened in.
QR code outside of view
Imagine this: The user has scrolled down on the page and the QR code is no longer displayed. But they are not aware of this issue due to visual impairments.
This actually happens a lot while reading list instructions or navigating the QR code page, the screen reader might scroll down and the QR code is then outside of view or cut off.
How to solve it? Make the QR code sticky so it can’t get out of view! It is OK that some content becomes placed behind the QR code when scrolling, if the QR code is the main actionable content on the page as in my examples. However, if possible you should make the instructions at least partly visible when scrolling. Again you can test my CodePen demo and try to zoom in and scroll.
There’s no need to make the QR code huge, so set a maximum width and height if it helps ensure that instructions remain visible. zoom in on my CodePen demo to see how it can stay small even if you use ctrl or cmd + to zoom in the page.
Instructions and help
This is one of those situations where it makes sense to give additional instructions for how to scan the QR code to users who use a screen reader. But they can be hidden visually since non-screenreader users do not need these.
Example of hidden screen reader instructions:
- Scan with your camera about 30 centimeters, or an arms length distance from the screen.
- Make sure your screen shade or screen curtain is off
- JAWS: JAWS-KEY + SPACEBAR + F11
- NVDA: NVDA + CONTROL + ESCAPE
- VoiceOver: VO + SHIFT + F11
- Ensure your browser window is large enough or maximized. Press the QR code button or maximize here (button to activate).
- Ensure your screen/monitor is turned on.
This conveys in simple language how to manage the phone and the screen while scanning a QR code. It gives a guide for turning off the screen curtain (dark screen) on different variants of screen readers. It also hints at maximizing the browser window and preferably gives a quick button that does it for them. And it states, perhaps obvious but easy to forget, to turn the screen on. Remember that many screen reader users do not need the screen to be on for them to browse the internet.
It helps screen reader users if you put these specific instructions in its own heading. This makes it easier to find and navigate to the instructions.
Problems for magnification
Cut-off QR codes
Users with reduced vision sometimes browser websites using browsers built in zoom of 200% or more. QR codes easily get cut off when being zoomed in, as seen in this image where 250% zoom is used:
The solution again is to make the QR code sticky or clickable – or both. Here’s a 43 second demo of that in action on a Swedish insurance and banking site:
This also works great in my CodePen QR code demo.
Mouse pointer obstructing QR code
Users might have a larger mouse pointer or not being aware of the position of the mouse pointer. This might result in obstructed QR code loosing its functionality.
You can solve this by hiding the pointer after three seconds if on top of the QR code, like the YouTube player does when watching a video. Just set the ‘cursor’ css to ‘none’ after 3 seconds, and make sure to change it back when moving the mouse again. Did I mention that I have a CodePen demo? Well I do, and you can test to hover the QR code and hold still to see what I mean.
Great resources
- Länsförsäkringar bank have implemented a lot of the feedback and ideas from my talk. You can test it by selecting option “Mobilt BankID”.
- WCAG 2.2.1 Timing adjustable – Success Criterion
- CodePen demo by Daniel Göransson
- Recording of my Swedish talk about QR codes from 2022 at T12t Meetup. English subtitles are available. I’ve embedded the talk here below.
In summary
- Craft great instructions on how to use QR codes
- Make the QR codes centered
- Make the QR codes sticky
- Allow users to open the QR code in full screen
- Write extra instructions for screen reader users
- Hide mouse cursor after 3 seconds
- Allow for longer timout limits (3-5 minutes)
Thanks for making the web better!
I’m happy you read this far! It means you care about making the web a better place for all users. Spread the knowledge and keep being awesome!