How to enhance the accessibility of QR-codes on the web?

Question

How can blind people use QR codes on websites more easily?

1. describe what would happen when scanning the qr code

https://www.w3.org/TR/wai-aria-1.1/#aria-describedby

2. provide a shortcut to activate the action that would normally happen when scanning the qr code

https://www.w3.org/TR/wai-aria-1.1/#aria-keyshortcuts

Answer 1

QR Codes themselves cannot really be made more accessible.

What you should do is also have a link located directly above or below the QR code that links to the same page (or if it is a QR code for a vCard, download the vCard etc.)

You should then add an alt="" tag to the QR code or a aria-hidden="true" to make the screen reader ignore the item. (or potentially add an `alt="QR code to do....x,y,z")

Finally you just need to make sure you change any associated wording to make sense to both scenarios.

For example if it says 'scan the QR code below to enter the competition' - change it to 'Scan the QR code below or visit the competition signup page to enter the competition' (the or visit the competition signup page part making sense as a hyperlink and in context.)

One final option is that you could make the QR code itself a hyperlink and use visually hidden text to expose that link.

It all depends on the context.

Rough Example

<a href="your URL">
    <img class="yourQRcode" alt=""/>
    <span class="visually-hidden">Link Text that makes sense</span>
</a>

visually hidden class

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

Update

To answer OPs statement that he disagrees QR codes are not accessible and to answer the 2 points he has made in the question edit.

1. Describe what happens scanning the QR code.

This doesn't provide any benefit different to adding visually hidden text within a link.

If you want to describe an image (which a QR code is) the the alt attribute is the most appropriate as previously mentioned.

2. provide a shortcut to activate the action that would normally happen when scanning the qr code

This is not a good idea, because at this point you then need to tell them what the shortcut is and allow them the option to change the shortcut (as they may have changed the bindings on their screen reader).

A link or button below the QR code is the ideal option, wrapping the QR code as a link and using visually hidden text is the best alternative while still maintaining your current design.

Final thought

The way I have shown you is the best way I can think of to make a QR code more usable, with a preference (as stated) to having a separate link below the QR code (in case the QR code image doesn't load at all).

More importantly though... why are you attempting to make a QR code accessible to a screen reader at all? The whole point of a QR code is to scan it with another device, at which point the accessibility of a QR code becomes relevant only that they need to know where to point the camera on their device, you will struggle to explain where to point a phone on the screen to scan a QR code using a screen reader.

As I stated they are NOT accessible as you need a steady hand, to understand what they are and how they work (as many people still do not), they are very difficult to use if you have a vision impairment etc. The list goes on....

Perhaps detail WHY you want to use a QR code as I can't see the purpose of making it accessible to a screen reader at all and it may be better to just remove it.

If you are looking for a way to share information between devices maybe just have a shortened URL for people who can't use a QR code?