惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cloudbric
Cloudbric
T
Threat Research - Cisco Blogs
Simon Willison's Weblog
Simon Willison's Weblog
AWS News Blog
AWS News Blog
P
Privacy & Cybersecurity Law Blog
H
Help Net Security
云风的 BLOG
云风的 BLOG
G
GRAHAM CLULEY
Spread Privacy
Spread Privacy
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
A
Arctic Wolf
Project Zero
Project Zero
Engineering at Meta
Engineering at Meta
P
Privacy International News Feed
Blog — PlanetScale
Blog — PlanetScale
Stack Overflow Blog
Stack Overflow Blog
M
MIT News - Artificial intelligence
The Register - Security
The Register - Security
Recorded Future
Recorded Future
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
C
Cisco Blogs
PCI Perspectives
PCI Perspectives
Recent Announcements
Recent Announcements
Martin Fowler
Martin Fowler
A
About on SuperTechFans
W
WeLiveSecurity
GbyAI
GbyAI
V
Vulnerabilities – Threatpost
The GitHub Blog
The GitHub Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
Check Point Blog
Y
Y Combinator Blog
月光博客
月光博客
Scott Helme
Scott Helme
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google DeepMind News
Google DeepMind News
F
Fortinet All Blogs
U
Unit 42
G
Google Developers Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
T
Threatpost
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Google Online Security Blog
Google Online Security Blog
Recent Commits to openclaw:main
Recent Commits to openclaw:main
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Cisco Talos Blog
Cisco Talos Blog
博客园 - 三生石上(FineUI控件)
Hugging Face - Blog
Hugging Face - Blog
MongoDB | Blog
MongoDB | Blog
博客园 - 司徒正美

TetraLogical Blog

Designing for people with reading disabilities - TetraLogical Designing for people who are D/deaf - TetraLogical Designing accessible documents - TetraLogical Introduction to creating accessible documents - TetraLogical Inclusive user research: vulnerable people - TetraLogical Designing for people who are blind - TetraLogical Designing for people with low vision - TetraLogical Meet the team: Niamh Madden - TetraLogical Designing for people with anxiety - TetraLogical Designing for people with disabilities - TetraLogical Accessible building blocks for the web videos - TetraLogical Common accessibility misconceptions - TetraLogical Common misconceptions about testing accessibility - TetraLogical Common misconceptions about implementing accessibility - TetraLogical Common misconceptions about WCAG - TetraLogical Common misconceptions about disability - TetraLogical Meet the team: Grace Snow - TetraLogical Sustainable accessibility in complex organisations: strategic foundations - TetraLogical Sustainable accessibility in complex organisations: organisational realities - TetraLogical Sustainable accessibility in complex organisations: external factors - TetraLogical Common misconceptions about screen readers - TetraLogical Guide to the Inclusive Design Principles - TetraLogical Meet the team: Ian Lloyd - TetraLogical Annotating designs using common language - TetraLogical Meet the team: Catriona Morrison - TetraLogical Championing inclusive language - TetraLogical Press release: TetraLogical launches accessible self-led training courses to help digital teams build confidence in accessibility - TetraLogical Why inclusive products are green products - TetraLogical Accessible Recruitment - TetraLogical Accessibility and the agentic web - TetraLogical Meet the team: Craig Abbott - TetraLogical Foundations: types of assistive technology and adaptive strategies - TetraLogical European Accessibility Act (EAA) FAQ - TetraLogical Screen reader HTML support tables - TetraLogical Interview with Lola Odelola - TetraLogical Understanding EN 17161 Design for All - TetraLogical Inclusive user research: building rapport - TetraLogical Foundations: Keyboard accessibility - TetraLogical Can generative AI write contextual text descriptions? - TetraLogical Understanding the European Accessibility Act (EAA) - TetraLogical Meet Josh: a sportsman who has spinal muscular atrophy - TetraLogical Meet Jonathan: a photographer who has ADHD - TetraLogical Foundations: grouping forms with `<fieldset>` and `<legend>` - TetraLogical XR Accessibility: for people with moving disabilities - TetraLogical Meet Andre: a music producer and blind screen reader user - TetraLogical Foundations: types of disability - TetraLogical Meet Lauren: a film editor who has ADHD - TetraLogical Meet Steve: a photographer who is deaf and low vision - TetraLogical Foundations: form validation and error messages - TetraLogical Meet Hasmukh: a blind cricketer and screen reader user - TetraLogical XR Accessibility: for people with hearing disabilities - TetraLogical XR Accessibility: for people with thinking disabilities - TetraLogical XR Accessibility: for people with seeing disabilities - TetraLogical Introduction to XR Accessibility - TetraLogical Foundations: labelling text fields with input and label - TetraLogical Design patterns and WCAG - TetraLogical Does WCAG 2.2 apply to native apps - TetraLogical Why are my live regions not working? - TetraLogical Building a culture of accessibility - TetraLogical When to use tabindex= Accessibility foundations - TetraLogical Meet the team: Demelza Feltham - TetraLogical Can generative AI help write accessible code? - TetraLogical Meet the team: Steve Faulkner - TetraLogical Meet the team: Gez Lemon - TetraLogical Keyboard accessibility myths and WCAG - TetraLogical Amendment to the Public Sector Accessibility Regulations - TetraLogical What Considerations for TV user interface accessibility - TetraLogical Meet the team: Alistair Duggin - TetraLogical Sticky content: focus in view - TetraLogical The only accessibility specialist in the room - TetraLogical Meet the team: Ian Pouncey - TetraLogical Meet the team: Dean Holden - TetraLogical Meeting WCAG Level AAA - TetraLogical Foundations: accessible names and descriptions - TetraLogical Inclusive XR: accessible augmented reality experiences - TetraLogical Foundations: pointer gestures - TetraLogical Meet the team: Graeme Coleman - TetraLogical Adding sign language to videos - TetraLogical Foundations: introduction to WAI-ARIA - TetraLogical Meet the team: Joe Lamyman - TetraLogical Inclusive XR: accessible 3D experiences - TetraLogical Foundations: visible focus styles - TetraLogical Foundations: target sizes - TetraLogical Meet the team: Henny Swan - TetraLogical Meet the team: Ela Gorla - TetraLogical Foundations: native versus custom components - TetraLogical Foundations: HTML semantics - TetraLogical Accessibility and supporting Internet Explorer - TetraLogical Meet the team: Felicity Miners-Jones - TetraLogical Inclusive user research: recruiting participants - TetraLogical Research insight: accessibility of images - TetraLogical Meet the team: Léonie Watson - TetraLogical Android accessibility: roles and TalkBack - TetraLogical Accessible design systems - TetraLogical Meet the team: Patrick H. Lauke - TetraLogical Inclusive user research: analysing findings - TetraLogical How to write user stories for accessibility - TetraLogical Triaging WCAG 2.1 Level AAA - TetraLogical
Accessibility and QR codes - TetraLogical
2022-08-08 · via TetraLogical Blog

Posted on by Joe Lamyman in Design and development

Tags: Inclusive Design Principles

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.

A black and white square with randomly placed, black fragmented boxes of different sizes inside it with the outline of the BBC logo in the centre
A QR code that when scanned, redirects the user to the BBC's Research and Development page

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.

NaviLens code with a black background, containing a number of smaller blue, pink, and yellow squares.
Example of a NaviLens code

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 Usability Testing service.