QR codes and accessibility

Posted on

Introduction

This is a guideline for printing QR codes. These guidelines are part technical, but there is a strong people-part to QR codes as well. QR codes are computer-readable and very much opaque for people. Not knowing what something is and/or does, adds a fear for many people. That fear can be a barrier for people.

Definition

A printed QR code (quick-response code) is a square two-dimensional barcode used for, in this case, representing a URL.

Checklist

  1. Text - Always show the URL in plain text and add enticing microcopy that clarifies what to expect from the URL. Remove uncertainty and fear where possible.

  2. Placement -

    1. Preferred. When there is space next to the url, place a QR code with the text "QR code" in the center. This text clarifies there is a QR code present for scanning tools and for people who do not recognize QR codes.
    2. Alternative. When horizontal space is not enough but vertical is plenty, place a QR code with the URL in the center.
    3. When space is limited, print no QR code (but do print a URL).

  3. Size - Width/height at least 2cm, and preferably around 1/10th of the scanning distance. – The technical minimum is around 1cm. Complex/long URLS (more data), error correction, sub-optimal printing and variation in user devices add a lot of uncertainty and variance. This makes double the minimum reasonable. https://www.qrcode.com/en/howto/code.html

  4. Printing - Print on non-reflective and flat surfaces where possible. Reflections can optically break the pattern, and non-flat surfaces deform it.

  5. URLs - Create the shortest human-readable URL possible (IE: domain.ext/text) without external shorteners. - External shorteners lessen trust. Longer URLs require more data and increase complexity of the QR Code. This makes them harder to scan and recognize. https://www.qrcode.com/en/about/version.html

  6. Position - Place QR codes consistently and at the end of a message. - A QR code is used for exceptional URLs and acts like a call to action.

  7. Target - The URL must be a website that works on all resolutions as QR codes are often scanned with phones. - (Shouldn’t be an issue in theory, as this is part of WCAG-conformance)

  8. Test - Test the QR code before sending it out. - As the code can't be understood by looking at it, issues creep in easily.

  9. Format - Use a black and white QR code with squares when possible. Set error correction to H (high) when possible. A different bright background is possible but impacts both scanability and recognizability. - This is the most conventional shape of a QR code. It is closest to following the standard (ISO/IEC18004). It is the easiest to scan because of contrast and formatting, but it's also the easiest to recognize. The error correction allows for damage and distortion (and removing the center).

  10. Spec - Include an outline with the same color as the background, with a width of at least 4 blocks. – This is also called a quiet zone, as mentioned in the standard (ISO/IEC18004).

  11. Spacing – Avoid multiple QR codes on the same page or surface. Multiple QR codes can confuse devices.