QR codes: quishing, accessibility and other things developers should keep in mind
Mansi Sheth-Parmar and Kandice Stern explain what developers should know about QR codes so everyone can get information safely and easily
QR codes can be convenient, but we need to also give people alternatives
Most of us are familiar with seeing QR codes and using our smartphones to scan them to download apps, visit websites, get information, book tickets, order from menus etc.
Here we share a few things developers need to keep in mind in order to make sure they create QR codes that comply with current standards and that everyone can get the information they link to, with or without using the codes.
As the Australian cyber.gov.au website explains, quishing (phishing attempts using QR codes) and other QR-code related scams are on the rise, and people are understandably increasingly cautious about following unknown links.
From a developer’s perspective, if you've developed software or a website or app and want people to use it, don’t rely on a QR code by itself. You’ll increase accessibility and maximise the likelihood of people getting your info when QR codes are accompanied by supporting information and alternative ways to get info, visit sites or download apps from verifiable sources.
What are QR codes and what are they used for?
Quick Response (QR) codes look a bit like the example shown below. The small square grid of dots are a kind of barcode that can be read by people using a smartphone camera or app. The QR code simply acts as a link that developers and designers can use to point people to information such as
QR codes are convenient because they don’t take up much room on websites or on signs and they enable all kinds of organisations to link people to their websites to check in, find information or order goods or services.
If the QR codes are set up as dynamic codes, the same code can be used indefinitely while the location it links to can be updated.
Image 1: The QR code anatomy: data (1), position markers (2), quiet zone (3) and optional logos (4). Scott Ruoti
How do you use a QR code?
When you point a smartphone camera at a QR code, most commonly you’ll be invited to open a linked website in a browser on your phone, shown an image or text, or taken to an App store on your smartphone in order to download an app.
Some people also use scanning apps on their phone to read QR codes.
Who finds QR codes useful?
QR codes are designed to give most people a quick way to use their smartphone to get to a website, download an app, view an image or read other information without having to type in a long web address. Their design ensures they can be scanned even if part of the code is damaged, which makes them ideal for use in areas where they get lots of wear and tear.
QR codes make information accessible for all kinds of people, including:
people with dyslexia and other reading disabilities who have trouble typing long URLs
people with limited vision or who are blind
people with memory disabilities who have trouble remembering passwords
people who have limited dexterity and find it hard to use their phone to type URLs
anyone who prefers to use a QR code to log into a website or verify their identity.
Who doesn’t find QR codes useful?
QR codes can be convenient for lots of people, but they aren’t always the best solution.
These are some reasons people might find it hard or impossible to locate or use a QR code:
they are blind or have low vision – how would they even know a QR code was there? And, even if they found it, it can be challenging to line up the QR codes for smartphone cameras to scan. Then, even if they successfully scanned the QR code, it’s possible (actually, probable, sad to say), the code will direct them to an inaccessible website or mobile app.
they don’t understand what QR codes are, or how to use them.
they don’t have a smartphone or don’t know how to use it to scan a QR code.
they have a smartphone but have limited access to the internet.
they have dexterity or mobility issues, or are carrying something, making it hard to operate their phone and focus it on a code.
the code is at the wrong height or angle to be easily scannedy.
they don’t trust the QR code because they don’t know where it’s going to lead – will it take them to a fake site or trigger the download of a virus?
How to make QR codes accessible for as many people as possible
Now we know why people do and don’t use QR codes, we can take steps to ensure they’re as usable as possible.
At Symbiote, we’re guided by the Web Content Accessibility Guidelines (WCAG) 2.1. We also test with a range of use case scenarios.
To make sure our QR codes are as useful as possible, we consider it best practice to:
Provide clear instructions explaining to people how to use the QR code
Write an easily-understood description as well as alt text to identify the QR code and its purpose to anyone using a screen reader or other assistive technology.
Create a link name that clearly indicates where the user will go if they follow it. The link pops up on screen when someone holds their smartphone camera over a QR code. We try to use a fairly short link to a website with a recognisable name rather than using something like Bitly to shorten links, because people can, and should, look at what’s in a link before following it to decide whether or not they’re being scammed.
Ensure there’s sufficient visual contrast between the QR code and its surrounds
Make the QR code an appropriate size – at least 2.5 x 2.5 cm on a digital device and a size that allows easy scanning if it’ll appear on a poster or billboard (see Fast Facts below). If you’re using it on a platform that supports zooming in, make sure the size of the QR code also increases as expected
Carefully consider the height and location of the QR code if it’s in a physical space – making sure it can be used by people of all heights, including people who use wheelchairs
Include audio and/or haptic feedback options so a person’s smartphone will vibrate when a QR code is detected and a link is followed, if they have these settings enabled on their phone
Give people other options in case they can’t, or don’t want to, use the QR code.
Alternatives to QR codes
Since we know that not everyone can or will use a QR code, it’s important to provide alternatives.
The easiest way to do this is to provide additional buttons, links or explanatory text along with the QR code.
Providing explanatory information has the added benefit of reassuring people contemplating using QR code links that they’re not potentially being redirected to a malicious or fake website or app that’s designed to get them to enter their identifying info and passwords, or to trigger a download of a virus to their device.
In our work with Myki, the travel payment card for Public Transport Victoria (PTV), we provided a QR code as well as an additional User Interface (UI) element of a key and a copy button to be able to copy the key.
Image 2 below shows the Myki UI. People using screen readers will hear the alt text identifying the QR code and then the alternative option to copy the key into their authenticator app.
Image 2: The PTV Myki authenticator setup page provides two options for people to add Myki to their authenticator app: a QR code and a key they can copy.
The Bureau of Internet Accessibility suggests including the following information along with QR codes, or using it as alternatives to QR codes:
for a QR code that serves as two-factor authentication: provide an additional alternative link for the user to verify their identity via email or another method.
for a printed QR code that redirects the user to a weblink, for example to a restaurant menu: provide the URL so that the user can manually type in the address.
for a QR code that redirects to an app store so you can download an app: include the name of the app and instructions for downloading it so they can manually locate and verify it before downloading.
Have you heard about NaviLens codes?
You might have seen the large multi-coloured NaviLens codes like the one show below on public transport, such as on Melbourne’s Yarra Trams.
Image 3: NaviLens Code
These codes play the role of navigation and information signage for people who are blind or who have low vision.
NaviCodes overcome issues with standard QR codes, which require a person to know the location of the QR code, line up their device and then wait until the code is read.
People use the NaviLens app on their phone by holding the smartphone in front of them as they move and, when their phone detects NaviLens codes up to 15 metres away within 160º of where their phone is pointing, they get audio information about their location. Here’s a YouTube video showing NaviLens in use.
A NaviLens code can be detected using the app:
12x times farther away than a QR code or barcode
within 1/30 seconds
within a wide angle up to 160º
in all light conditions
without focussing the device.
NaviCodes codes are particularly useful in public buildings and on public transport to provide signage and navigation information for people who are blind or who have low vision. They’re increasingly also used on packaging and people can print out customisable codes for use to identify objects at home or work.
There’s also an app for sighted people: the NaviLens Go app helps them find their way around public transport, providing them with in-station navigation, trip planning information, train arrivals and service status information, translating signs from other languages and pointing the way via arrows on their phone’s screen.
NaviLens codes can be used on their own, as shown above, or as a NaviLens Accessible QR Code, which is added as a frame around a standard QR code, as shown below in Image 4.
Image 4: A NaviLens Accessible QR Code with a QR code in the middle and a NaviLens Tag framing it
QR code info for developers
About QR codes
QR codes are black and white graphical images that can be scanned using a mobile device camera to retrieve the encoded text-based information. They can be used to store a large amount of data - 2953 bytes of data to be exact which can be easily accessed by scanning it. The data is stored in black/white dots representing off/on bits which are called modules.
A QR code is capable of encoding a maximum of 2953 bytes of data, 4296 alphanumeric characters, 7089 numeric characters, or 1817 Kanji characters (character set according to JIS X 0208).
Size
The size of a QR code varies based on the amount of data encoded starting from 27 X 27 modules. Larger amounts of data result in more complexity.
The minimum size of a QR code can be determined using the formula in Image 5.
Image 5: Formula to determine the size of a QR code (source: Scanova.io)
While this formula is primarily for print media, if you’re adapting it for screens you need to allow for a scanning distance of about 38 centimetres.
The optimal size of an effective QR code depends on how far away from it people will be when they use it. The further away, the larger the code. As a rule of thumb, the width of the code should be 1/10th the scanning distance at minimum. For example:
Leaflets, brochures, business cards: QR code size of 20 mm can be read at a distance of 20 cm
A3–A2 wall posters: QR code size of 30 mm can be read at a distance of 30 cm
Signage, A1+ posters: QR code size of 1000 mm can be read at a distance of 1 m
On-bus/on-train advertisement: QR code size of 2000 mm can be read at a distance of 2 m
Add a ‘quiet zone’ or buffer of empty space around the QR code
Include a quiet zone of at least four times the width of one of the black modules in the QR code.
Shape
As a general rule, we prefer to keep QR codes square. You can find sites that’ll create circles or other shapes, but these might create design issues of not leaving enough quiet space around the code, making the codes harder to recognise.
Colour and contrast
Use high contrast colours.
Dynamic Vs static QR codes
Set up your QR code as a dynamic code, so you can change where it links to at any time.
Consider adding a NaviLens Accessible QR Code around a standard QR code
As discussed earlier in this Insight, a NaviLens Accessible QR code can be added as a frame around a standard QR code, using a free code generator. This enables a person using the NaviLens app on their smartphone to detect the code when it’s within a 160 degree radius of their phone, without the phone needing to focus on it.
My take (Mansi) on NaviLens is that it’s a good tool to move users from physical modes to digital modes - e.g. catching a tram or scanning a menu in a restaurant.
But for digital to digital modes, it would work only for static QR codes. e.g. A QR code on a website to direct a user to download a mobile app.
For uses like Melbourne’s Myki transport card, the QR codes used to help users set-up an Authenticator App are dynamic. At the moment NaviLens Accessible QR codes aren’t able to support this.
