测量单位需要 aria-label 吗？

Question

使用 NVDA（Windows 上的屏幕阅读器）， <p>The 36" product had this option.</p> 读作“36 报价产品是”

使用 VoiceOver（MacOS 上的屏幕阅读器），它显示为“36 英寸产品是”

为了满足基本的 WCAG 2.1 A 级要求，我应该使用 aria-label 或类似的方法让 NVDA 正确读取“英寸”，还是这是 NVDA 的问题？

查看 WCAG 文档时，我很难找到有关测量单位的细节。

Answer 1

当您在 CMS 中混合时，它可能会变得混乱。暂时忽略 CMS，当屏幕 reader 遇到标点符号时，可能会发生多种情况。

首先是用户可能设置了特定的详细级别。一些冗长级别宣布所有标点符号，包括句子中的逗号和句子末尾的句号。在浏览普通网站时，这通常不是理想的行为，但有时会派上用场，例如当您编写 javascript 代码并且需要听到所有标点符号时，因为它是语言的一部分。

另一个冗长程度是一些标点符号。逗号、句号、问号、感叹号等通常不会公布，但其他引号可能公布。至于将宣布哪些角色，因屏幕 reader 和屏幕 reader 而异。某些屏幕 reader 会让您准确选择要宣布的字符。

屏幕上还有另一个功能 reader 可以让您更改为特定角色宣布的内容。它本质上是一本发音词典。所以我可以将“宣布为“引号”或“英寸”。

另请注意，您可以使用不同的引号，例如。从技术上讲，我认为第一个称为“双引号”，第二个是真正的引号（如果您有一个“开引号”字符和一个“闭引号”字符，字符的角度看起来可能会有所不同不同），最后一个是“直引号”。

由于屏幕 reader 设置和实际标点字符的多样性，如果您希望以某种方式宣布某些内容，最好明确并自己指定。

我不推荐使用 aria-label 除非您在交互元素上指定 aria-label。如果您有纯文本，最好使用“sr-only”类型 class，为屏幕 reader 提供文本以进行通知，但文本不会明显显示在屏幕上。有关“sr-only”的更多信息，请参阅 What is sr-only in Bootstrap 3?。

所以你可以有这样的东西：

the 36<span aria-hidden="true">"</span><span class="sr-only">inch</span> product

除了“英寸”上的“sr-only”，我还在quote/inch符号上加了aria-hidden，这样屏幕reader就会忽略它。

最终结果是，有视力的用户会看到“36”产品，屏幕reader用户会听到 "36寸产品".

另请注意，盲文用户将阅读“36 英寸产品”。他们不会阅读引号，因为它对辅助技术是隐藏的。他们会读出实际的“英寸”一词。

Answer 2

差异很可能来自不同屏幕 reader 对相同输入的解释方式。虽然引述对于 VoiceOver 来说似乎是“显而易见的”，您的意思是“英寸”，但它并不那么明显。除了为 reader 提供提示以便它们都不需要解释任何内容之外，您对此无能为力。

一个快速的解决方案可能是

<p>The <span aria-label="36 inches">36"</span> product had this option. Bla bla bla.</p>

您在此处为 reader 出现“令人困惑”的内容插入提示。

另一种更极端的方法是为屏幕提供完全不同的内容 reader，根据正常内容的局限性进行定制：

<p aria-hidden="true">The 36" product had this option. Bla bla bla.</p>
<p class="screen-reader-only">The 36 inches product had this option. Bla bla bla.</p>

第一段是 visual-only，请注意指示 readers 忽略整个内容的 aria-hidden 属性。下一个是从第一个用正确的文本替换有问题的字符开始制作的。 class定义如下：

.screen-reader-only {
    position: absolute;
    height: 1px;
    width: 1px;
    clip: rect(1px 1px 1px 1px); // IE 6 and 7
    clip: rect(1px,1px,1px,1px);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    overflow: hidden !important;
}

这基本上隐藏了这段文字，但仍允许屏幕 reader 拾取并阅读它。

最后一个技巧的来源和完整解释：https://accessible360.com/accessible360-blog/use-aria-label-screen-reader-text/

另请阅读此处了解有关处理屏幕特殊符号的更多详细信息 readers：https://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/

Answer 3

不要做任何事情来解决这样的发音问题。与解决问题相比，您更有可能制造其他问题。

事实上，它与 NVDA 或 VoiceOver 无关，而是与实际使用的语音有关。每个声音对文本做出不同的解释，none 在所有情况下都是正确的。

记住

屏幕 readers 和语音合成不会进行高级语言处理，即使它们确实做了一些
因此，从语义上讲，他们始终无法正确猜出您真正的意思
你几乎无法控制如何改变解释或帮助它弄清楚。有发音词典在用户的控制下，但并不能解决所有问题。

我自己是屏幕 reader 用户，事实上，无论好坏，我们都已经习惯了这种发音或解释问题。这通常不是什么大问题，因为即使它没有完全按照您的想法阅读，我们也足够聪明，无论如何都能理解它的意思。有时我们甚至会取笑它。

您可以使用更专业的 unicode 字符来代替普通的双引号，例如 U+2033，但这也不理想：

许多屏幕 readers and/or 语音不支持此类字符，导致垃圾或根本没有发音
据我所知，这个U+2033也可以有多种解释：英寸、秒或双素数

您可以使用视觉隐藏/屏幕外文本 + aria-hidden 技术，如下所示：

Product X is 36<span class="sr_only"> inch</span><span aria-hidden="true">"</span> long.

但在这种特殊情况下，它的价值可能相当复杂。还想一想，当符号 " 表示“英寸”时，几乎所有地方都可以理解这一事实，而如果您的网站是多语言的，则必须翻译“英寸”一词本身。它经常被遗忘，但标签、替代文本和隐藏文本必须像所有其他文本一样进行翻译。

请注意，此解释问题并不限于像 " 这样可以被视为“引号”或“英寸”的字符。例如，有些语音会系统地将“厘米”说成“厘米”，而在某些情况下可能是不正确的。其他例子，“min”可以被解释和说成“minimum”或“minutes”。

缩写和符号的世界非常复杂，但请记住，尽管有很多类似的小瑕疵，但我们还是足够聪明地弄清楚了。不要试图寻找可能对某些人有帮助，但会使其他许多人的体验变得更糟的解决方法。

测量单位需要 aria-label 吗？

Is an aria-label needed for units of measurement?

accessibility

wai-aria

wcag2.0