What is a QR code?
“QR” stands for “Quick Response”, and you’ve 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 access audio/video versions of the text, like in this “Blipsay” example by Susanna Cederquist. (PDF)
- Restaurants linking to a digital menu or the restaurant’s app from a physical menu.
- Physical mail containing links where a QR code saves you from manually typing the URL 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 into their camera apps, so users don’t even need 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 example, two-factor authentication QR codes look exactly like other QR codes but shouldn’t be scanned using the normal scanning app or the built in camera scanner – users might need to use a specific identification app to scan these codes. It’s not alway obvious to users when to use which app or why there’s a difference at all, 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’s 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) which the QR code represents in plain text alongside with the code itself. Not only does this enable the user to manually type it if needed, it also hints at 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 short time limits mean that some users won’t 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 require a lot more time than other users would need. The same goes for many users with cognitive disabilities like dyslexia or ADHD.
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. Users 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 they’re running out of time. 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 are 30 seconds left. Give the users an easy way of extending the session, such as pressing a button or just pressing space on the keyboard. When you notify the user it’s important to use simple language and short copy, such as a message like “30 seconds left for login” along with a button labeled “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 shows 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 two-factor authentication. There are such solutions that don’t require scanning a QR code. Here in Sweden we have 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 arise from assuming that users are 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 getting cut off when I’d accidentally made my browser window smaller. Tiny browser windows are quite common among our friends who use screen readers, because most of them don’t need it 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 add additional cognitive load in an already stressful scenario, 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 better solved by letting users activate the QR code by clicking or pressing it as well as activating it using the space or enter keys, and letting that trigger fullscreen mode using the Fullscreen API in the browser. Check out my CodePen demo or the demo with code to see how. That way the whole QR code will be visible, no matter which 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 in view, but they’re unaware of this issue due to visual impairments.
This actually happens a lot while reading list instructions or navigating on 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’s OK that some content gets hidden 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 partially 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 visually hidden since non-screenreader users don’t need these.
Example of hidden screen reader instructions:
- Scan with your camera about 30 centimeters, or an arm’s 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 under their 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 browse websites using browsers’ built in zoom of 200% or more. QR codes easily get cut off when zoomed in, as shown 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 be unaware of its position. This can result in the obstructed QR code losing its functionality.
You can solve this by hiding the pointer after three seconds if it’s 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 try hovering over the QR code and holding 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 the 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 the 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!