如何提高二维码在网络上的可访问性？

Question

盲人如何更轻松地在网站上使用二维码？

1. 描述扫描二维码时会发生什么

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

2. 提供一个快捷方式来激活扫描二维码时通常会发生的操作

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

Answer 1

不能真正使QR码更易于访问。

您还应该做的是在链接到同一页面的QR码的正上方或正下方有一个链接（或者，如果它是vCard的QR码，则下载vCard等）。

然后，您应该在QR码中添加alt=""标签或aria-hidden="true"以使屏幕阅读器忽略该项目。 （或可能添加`alt =“ QR代码来执行。...x，y，z”）

最后，您只需要确保更改任何关联的措辞就可以使这两种情况都有意义。

例如，如果显示“扫描下面的QR码以参加比赛”-将其更改为“扫描下面的QR码或访问比赛报名页面以参加比赛”（ 或访问比赛签发页面部分，超链接和上下文。）

最后一种选择是，您可以使QR码本身成为超链接，并使用视觉上隐藏的文本来显示该链接。

这完全取决于上下文。

粗略的例子

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

视觉隐藏类

.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 */
}

更新资料

要回答OP反对他不同意QR码的声明，并回答他在问题编辑中提出的2点。

1.描述扫描QR码会发生什么。

与在链接中添加视觉隐藏的文本相比，这没有任何其他好处。

如果要描述图像（QR码是图像），则如上所述， alt属性是最合适的。

2.提供快捷方式来激活在扫描二维码时通常会发生的操作

这不是一个好主意，因为此时您需要告诉他们快捷方式是什么，并允许他们选择更改快捷方式的选项（因为他们可能已经更改了屏幕阅读器上的绑定）。

QR代码下方的链接或按钮是理想的选择，将QR代码包装为链接，并使用可视化的隐藏文本是最好的选择，同时仍保持当前设计。

最后的想法

我向您展示的方式是我想出的使QR码更易使用的最佳方式，并且（如上所述）偏向于在QR码下方有一个单独的链接（以防QR码图片无法加载到所有）。

不过，更重要的是...您为什么要尝试让屏幕阅读器完全访问QR码？ QR码的全部目的是用另一台设备进行扫描，这时QR码的可访问性变得很重要，只是他们需要知道将相机对准其设备的位置，而您将很难解释将相机指向何处。屏幕上的手机以使用屏幕阅读器扫描QR码。

正如我说过的那样，由于您需要稳定的手，所以无法访问它们，以了解它们是什么以及它们如何工作（许多人仍然不知道），如果您有视力障碍等，则很难使用它们。 ....

也许会详细说明您为什么要使用QR码，因为我看不到让屏幕阅读器完全可以访问它的目的，最好删除它。

如果您正在寻找一种在设备之间共享信息的方法，那么对于不能使用QR码的人来说，URL可能只是缩短了？

Answer 2

二维码的用例是在另一个设备上继续交互，通常是智能手机。

二维码无法访问是由于没有安装二维码阅读器，或者用户对其工作缺乏了解。 它不仅限于屏幕阅读器用户。

我认为最好的做法是始终提供一个简单、易读的短 URL 和 QR 码。

在网站上提供带有代码的链接或快捷方式会适得其反，因为用户不会切换到其他设备。 说明可能是扫描智能手机上的代码或访问http://example.com/qr ，每个人都应该可以阅读。

一旦您提供了这些说明，就不需要代码本身的替代文本。

如果目标 URL 应该在二维码可见的设备上打开，它就不应该在那里，而应该使用链接。