QR codes are powerful tools because they combine the simple design of QR codes with the prevalence of smartphones. Instead of typing out a potentially long and complicated URL, users can scan the code with their phone's camera. This saves time and effort and reduces the chance of errors that can sometimes occur when manually entering web addresses.
Using QR codes involves some technical considerations. One is security. QR codes can be tricky because some link to fake websites designed to steal personal information through phishing. Additionally, QR codes rely on users having a smartphone with a camera and internet access. Not everyone has access to a smartphone with a camera and a stable internet connection.
And what about the accessibility of QR codes? While providing a handy way to access information, QR codes can create accessibility barriers for some users. Their dependence on sight and physical dexterity excludes people with visual impairments, motor limitations, and other disabilities.
For individuals with vision issues, locating the QR code itself can be a challenge, even with the help of a QR reader app. Similarly, those with motor difficulties, shaky hands, or limited mobility may find it challenging to hold their device steady enough to scan the code, mainly if it's on the smaller side. Finally, even with clear instructions, blind users cannot position their phones correctly to scan the code.
In addition, if the QR code leads to a website or app that's not accessible, it can be extremely frustrating.
Improve the Experience, Add Accessibility
Here are a few ways to create QR codes that are more accessible and usable for everyone. Let’s start by addressing the low-hanging fruit for QR code design:
- Size—
- The correct QR code size for a website or email is approximately 150×150 pixels, equal to about 4×4 centimeters and 1.5×1.5 inches.
- The proper QR code size for YouTube and other video content is about 4×4 centimeters (1.6×1.6 inches), which is nearly 113×113 pixels.
~ "What Is the Best QR Code Size for Your Needs: A Comprehensive Size Guide"
- Color—WCAG 1.4.11 Non-text contrast - To scan the graphic, people will need to visually recognize that it is a QR code. The colors used for the squares of the QR code must have a color contrast ratio of at least 3:1 against any adjacent colors or background colors. Black and white is the common choice.
- Placement—QR codes should be centered within the content. For example,
- ALT text—WCAG 1.1.1 Non-text content - When the QR code is used as a link, it's crucial to provide a text alternative, such as ALT text, that clearly describes the link's purpose.
- No Text in QR code—WCAG 1.4.5 Images of text - It's essential to leave text out of the design of a QR code.
- Phishing / security issues—Ensure any QR codes you create link to secure websites.
Now let’s examine some more advanced techniques for creating accessible QR codes:
- QR codes in login scenarios—WCAG 2.2.1 Time Adjustable - Login scenarios often have time limits for security reasons. Some people with disabilities may need more time to complete activities like login scenarios. Give users the ability to turn off, adjust, or extend time limits.
- 2-way authentication QR code—When creating a QR code to set up two-factor authentication (2FA) for accounts using an authenticator app, use clear, easy-to-understand instructions in clear language and a large, easy-to-read font. Be sure to detail what the user will experience and where they can expect to land once they scan the QR code with their device. In addition, an alternative method, such as a link to a website for verifying the user’s identity via email or another communication mode, should be provided.
- Screen readers—For QR codes that require additional instructions for screen reader users (such as temporarily turning off specific features), consider hiding those instructions from sighted users. They can scan the code directly without needing those details.
By incorporating these simple steps into your QR code design process, you can ensure your QR codes are more accessible to everyone. Remember, a small change in design can make a big difference in user experience!
