Accessibility and QR codes
Posted on by Joe Lamyman in Design and development
Quick Response (QR) codes are graphics that can be scanned to direct people online to complete an action or find content. This blog post explores considerations and provides guidance for creating accessible experiences with QR codes.
Introduction to QR codes
QR codes are barcode-like graphics, comprised of machine-readable information that, when scanned, can be translated into a website URL. They are used for tracking in augmented reality, for joining a wi-fi network, signing into a platform, opening a web page, and other use cases.
Number of people using QR codes
A study from VocalEyes (based in the UK) found that 39% of their blind or visually impaired respondents knew what a QR code is, but had not used one, 26% of the respondents had used them aided and 34% had used them independently.
QR code requirements
Multiple sources (both QR Code Generator and Sprout QR) report that the minimum size required for a QR code is 2cm by 2cm. QR codes can be made as large as needed, as long as the pixels do not become blurred and there are no artefacts interrupting the display of the image.
As a rough estimate, guides recommend using a ratio of 10:1 for the scanning distance to the size of the QR code. For example, if a code is 10cm by 10cm, expect that the furthest distance a user would be able to scan it from would be 100cm (both Scanova and Sprout QR recommend this).
The ability to scan a QR code is also dependent on the version of QR code used. There are 40 different versions of QR code, with the earlier versions being easier to scan due to them storing less information, whereas version 40 can contain up to 3391 characters, but as a result is particularly difficult to scan given the densely packed information and 31329 squares present in the graphic.
Locating QR codes
A key aspect of QR codes is knowing they are there and where to locate them.
Of the 38 respondents who identified as blind or visually impaired in the VocalEyes study, 60% found it difficult to use a QR code independently. This included 17% finding it very difficult and 43% finding it difficult versus 18% who found it easy to use QR codes independently. 9% found it very easy, and another 9% easy.
A stand-out positive comment relating to the use of QR codes by a participant was:
“The NHS Covid app has been a necessity recently so you just do it however inconvenient it is. Once I understood what to do it was not difficult”.
The participant identifies that there may be inconvenience in learning how to interact with the QR code, but for repeated use, once the interaction is learnt it becomes less difficult.
This aligns with another comment from a participant:
“No problem using QR codes, problem is finding them in the first place. A consistent standard for location is needed eg head height, circa 2m, to left of article to which it relates”.
For infrequent use, locating the QR code seems to be a barrier to people who cannot see the location of the code.
For users who have their device mounted to their wheelchair due to mobility disabilities, pointing their device at a target or holding their device may not be possible or be very difficult to complete. The Web Content Accessibility Guidelines (WCAG) success criterion 1.3.4: Orientation requires that content is not displayed in a way that would mean that users would have to change the orientation of their device for this reason.
An alternative suggested by a participant is NaviLens. Similar to QR codes, NaviLens tags are simple graphics formed of squares, using bright colours to stand out and can be scanned to provide users with information. The benefits of using NaviLens’ tags is that they can be scanned from much further distances than QR codes due to the simplicity of their designs (NaviLens state that their tags can be read 12 times further away than a QR code). The drawback with using these tags is that it requires that users download a specific application for people to scan them.
Downloading additional applications may prove a barrier in itself, as one participant stated:
“I was not 100% happy downloading the app [for security reasons]”,
and another:
“If it was using the QR code reader in the camera app rather than a separate app then probably yes”.
Impact of QR code usage on people with disabilities
Listed below are the different ways that interacting with QR codes may impact people with disabilities, both positively and negatively. People will have differing types of disability and may also have multiple and different combinations of disabilities. Note also that using QR codes assumes people have a mobile device with the capability to process QR codes
People on the autistic spectrum
- May benefit by not having to copy out large website URLs into their device’s browser or remember sign in details
People who use screen readers
- May benefit by not having to copy out large website URLs into their device’s browser or remember sign in details
- May not be aware that a QR code is present
- May not be able to locate the QR code independently
People with low vision
- May benefit by not having to copy out large website URLs into their device’s browser or remember sign in details
- May not be aware that a QR code is present
- May not be able to locate the QR code independently
People with dyslexia
- May benefit by not having to copy out large website URLs into their device’s browser or remember sign in details
People with physical or motor disabilities
- May benefit those who use alternative input devices as they do not have to write out the URL or sign in details themselves
- Scanning smaller QR codes, which requires the user to hold their device in precise positions, may be a barrier for some people
- May not be able to position their device to scan a QR code due to their device being mounted, due to them not being able to hold their device, having shaky hands, or due to physical barriers, such as the positioning of the QR code being out of reach or not directed towards the user
People with anxiety
- May not be able to interact with QR codes due to concerns about where they will be redirected or the interaction that will take place, if a lack of information is present
Older people
- May benefit by not having to copy out large website URLs into their device’s browser or remember sign in details
- May not be aware what a QR code is
- May lave limited vision and/or dexterity
WCAG considerations when using graphical codes
When using QR codes and conforming to the Web Content Accessibility Guidelines (WCAG) 2.1 level AA, the following should be taken into account:
- For 1.1.1 Non-text content: if the QR code is being used as a link, then a text alternative (such as alt text) must be present to describe the purpose of the link.
- For 1.4.5 Images of text: do not include text in the image of the QR code, ensure that this text is created as text and not an image.
- For 1.4.11 Non-text contrast: as people will need to visually recognise that the graphic is a QR code in order to scan it, ensure that the colours used for the squares of the QR code have a colour contrast ratio of at least 3:1 against any adjacent colours or background colours.
- For 2.4.4 Link purpose (in context): if using the QR code as a link, make sure that there is a text alternative that describes the purpose of the link so that the user can understand where they will be redirected to.
Designing accessible QR code experiences
Using the Inclusive Design Principles as a framework, we can create more usable interactions with QR codes for people with disabilities using the following considerations:
- Provide comparable experience
- Ensure that text alternatives are present for QR codes that accurately describe the purpose of the code and where it will redirect people
- When in the process if using a QR code, use haptic feedback on a mobile device to indicate that the action is in progress or complete
- Consider situation
- Don’t presume that people will understand how to interact with QR codes, provide instructions for use
- Ensure that contrast against the rest of the content is good, so that people can recognise the code and interact with it
- Consider people may be interacting with QR codes that may have bright sunshine obscuring their display, so an alternative way of accessing the information must be provided
- For QR codes in a physical space, consider the height and location so that people in wheelchairs or of restricted growth can reach them
- Be consistent
- Ensure that usage and positioning of QR codes is consistent
- Use consistent, plan language, to inform users about how to use QR codes
- Give control
- On platforms that support zooming in, ensure that the QR codes size will increase as expected
- Offer choice
- For people who cannot, or do not want to, use the QR code, ensure there is always another accessible way to access information such as by providing a URL that the user can enter themselves, or by providing an interactive link, or log in form
- Prioritise content
- Ensure the QR code is positioned at a large enough size to be scanned from a distance, or wherever the user will be interacting with it from
- Keep instructions short and focused
- Add value
- When designing access points for content (such as forms, sign-in), consider adding value with the addition of QR codes so that people can quickly navigate to the content on different devices
Conclusion
It may be suitable to use QR codes if they:
- are being used multiple times in a journey, so that people can learn how to interact with them and the time spent learning is worthwhile
- are used consistently, so that users do not have to relearn how to use them
- can be appropriately sized or can be zoomed in on, or a user will be scanning them from a close distance
If people cannot scan the QR code, ensure there is always another accessible way to access the information so that they are not excluded.
Next steps
Read more about browsing with a mobile screen reader and how we can support you with our agile user experience testing service.