Accessible QR Codes – The Ultimate Guide

You may think QR codes are great for securing your login, or letting users read more online about a product marketed in a newspaper ad. But there’s a high risk of creating barriers for people with disabilities unless you use QR codes correctly. This article is your ultimate guide to accessible QR codes!

Hands holding a smart phone scanning a QR code. The QR code has a green pattern and Axess Lab's logo in the center. Illustration.

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:

Advertisment with a QR-code and a text beside it saying "Contact us for a good deal or read more here".

Or in online bank login screens like this:

QR code for logging in to a bank using two way authentication

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:

  1. Open the BankID app on your phone or tablet.
  2. Press “scan QR code” in the app.
  3. Point your phone or tablet at the QR code on the screen.
  4. 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 code disappeared with message saying it's only valid one minute.

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.

QR code is not in view when window is scrolled down.

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:

Zoomed in to banking login page using browser zoom setting

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.

QR code example with large mouse pointer obscuring part of the code.

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

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!

Get notified when we write new stuff

About once a month we write an article about accessibility or usability, that's just as awesome as this one! #HumbleBrag

Simply drop your email below.

We work world wide, if you need help send us an email!
hello@axesslab.com