Summary

Ensure that Quick Response (QR) codes follow image accessibility best practices and that alternative means of following their links are provided.

Techniques

Examples

Example 1 — Clickable QR code with activation details
<a href="https://publisher.example.com/promo">
   <img src="img/qr-promo.jpg" aria-details="qr-desc"/>
</a>
<details id="qr-desc">
   <summary>Details</summary>
   <p>Buy one get one book by the author until September 25, 2025.</p>
   <p>If you are reading this book on a device that cannot connect to the internet,
      use the camera on a phone or tablet to scan the QR code and open our site.
      Alternatively, you can access the promo by typing the following URL in a
      browser: <a 
      href="https://publisher.example.com/promo">publisher.example.com/promo</a>
   </p>
</details>

Frequently Asked Questions

What should I do with a QR code on the cover?

If a QR code is part of the front or back cover, make sure that users will be able to interact with the image long enough to scan it. Reading systems often only flash the front cover image while a book is loading, or show a thumbnail of it in the user's bookshelf.

Placing the QR code in its own document in the reading order will make it more accessible. It will be the only content on the page, for example, which will make scanning easier for all users. Alternatively, incorporate it into the related front or back matter.

If the QR code is kept as part of the cover, make sure that the cover image description indicates that there is a scannable code. Also, make sure that the cover image can be accessed long enough to scan it, typically by making it part of the linear reading order.

Explanation

Quick Response (QR) codes have become ubiquitous in print media as a simple means of directing people to web sites. Users do not have to remember URLs or manually retype them into their mobile device's browser. They can just point the camera on their smart phone or tablet at the QR code and a scanner will read the embedded URL and offer to open the web site or app for them.

QR codes are now commonly found in print books, especially on covers but also within the content. Some common uses include to direct users to:

Although these kinds of links are essential to get users from print to digital, QR codes are making a presence in ebooks, as well, as reading devices are not always connected to the web and may lack the ability to open web links. QR codes are an effective means of getting users from static reading systems when done accessibly.

Although QR codes offer some obvious benefits when a device is not connected to the internet, they also have some drawbacks, more so than with typical graphical images. In particular:

Accessibility considerations

To create accessible QR codes, the following issues need to be considered:

Contrast

Although QR codes are most commonly black and white, this is not a requirement. Any color can be used for the QR code. If the contrast between the foreground and background is not sufficient, it is possible that some users may not be able to make out that there is a QR code present. Meeting the contrast requirements in WCAG success criterion 1.4.11 is a minimum for any QR code.

Identification

If a user is not aware that an image represents a QR code, they will not know that they can interact with it. Ensure that the alt text for the image clearly indicates that it contains a QR code. For users with low vision, consider placing a border around the image to draw attention to it so it is not mistaken as decorative.

Size

The size of the QR code image can affect its usability. For one, if the image is too large or small, users may have trouble scanning it. The image may be blurry, or the code sequences might not be differentiable, if it is too small. Too large and users may have trouble fitting the code on screen to scan it, or a reading system might split the image to create a page break. The minimum recommended physical size for QR codes is often cited as 2cm by 2cm. For a digital code, this is roughly the equivalent of 76 pixels by 76 pixels. (This size will easily meet both the minimum and enhanced target size requirements in WCAG success criteria 2.5.5 and 2.5.8 if the code is clickable.)

Usage

Although QR codes have become more common, not everyone is familiar with how to use them. Users may get even more confused about what to do when they do not have a second device to scan the code with. This may require them to save the image to their local file system and open the image in a dedicated scanning application. While it is not expected that publishers can account for every scenario, some general instructions on how to use the QR code will help users unfamiliar with them.

Alternatives

Although QR codes can be effective for getting users from reading systems without internet connections, they are burdensome for users who are connected. Clicking a hyperlink is much simpler than scanning a code. This is especially true for users who cannot see the code or may have difficulties scanning it. Making the QR code clickable and/or providing a hyperlink in an extended description will help ensure that users can pick the most effective method for them. Ensuring that the URL contained in the code is the text of an alternative hyperlink also allows users to copy and paste it into a browser.

Related Links