强制屏幕阅读器一次阅读一个字母而不是整个单词答案

【问题标题】：Force screen reader to read one letter at a time rather than the entire word强制屏幕阅读器一次阅读一个字母而不是整个单词
【发布时间】：2016-05-04 21:21:58
【问题描述】：

我正在构建一个包含以下内容的 HTML 网页：

为了继续，请输入此代码：GJBQTCXU

“GJBQTCXU”是由一串字母组成的代码；但是，屏幕阅读器会尝试将其发音为一个单词。我怎样才能阻止他们尝试发音这个无意义的单词，而是让它一次读一个字母：“G J B Q T C X U”。

作为澄清，我正在构建此页面，以便屏幕阅读器自动执行正确的操作。我知道用户可以选择让他们的读者一次读出每个字母，但我不希望我的用户必须采取任何额外的步骤。

【问题讨论】：

不要。我一直在走这条路，并用真实的用户对其进行了测试。你可能认为你在帮助，但你真的不是。特别是当用户只想让读者在知道字母的情况下快速浏览页面，而您通过强制逐字母发音来减慢该用户的速度。
有一个 CSS speak-as（还有 speak）属性对浏览器的支持很糟糕。

标签： html accessibility screen-readers

【解决方案1】：

尝试使用 CSS 字母间距属性 -

<div>G J B Q T C X U</div>

div {
    letter-spacing:-1.9px;
}

示例： http://codepen.io/stevef/pen/grZGBP

【讨论】：

对于 OP：是的，在 JAWS 和 NVDA（不是唯一的屏幕阅读器，但它们提供了一些见解）中测试之后，这看起来在不同的浏览器中被读取为单个字母。与使用 CSS 内联的多个块元素标签相比，这似乎是最简单的解决方案。但是，使用方向键一次读取一个字母的用户会读取空格。因此，就像 Adam 提到的那样，在输入模糊或提交时删除空格可能会很好。
除了破坏光标导航外，这还意味着如果您复制文本，您将获得所有空格。

【解决方案2】：

有很多屏幕阅读器，而且由于无障碍 API 的差异，这些阅读器在浏览器之间也可能不一致。

话虽如此，这里对 WebAIM http://webaim.org/techniques/screenreader/ 的功能进行了很好的概括

他们注意到，默认情况下，某些屏幕阅读器不会阅读句点、分号等标点符号，而是会在它们之间暂停。您可以尝试这些视觉隐藏版本。现在，如果他们打开了更详细的设置，它可能会读取这些设置。

提到的另一个阅读方面是一些屏幕阅读器会在段落末尾暂停。因此，如果您将每个字母包装在 p 标签中，然后让它们内联显示，则可能会出现暂停。

由于浏览器之间的屏幕阅读器之间的细微差别没有得到很好的记录，因此很难说两者都适用于您的实例。

由于用户可以只使用左/右箭头键来阅读单个字母，因此普通屏幕阅读器用户可以慢慢阅读单词。

我想说，如果将标点的详细设置设置得很高，则标点符号会更危险。所以先试试段落标签的方法。由于用户也可以使用屏幕阅读器在段落标签之间跳转，因此可能会产生一些混淆，但似乎两者中较小的一个。

【讨论】：

【解决方案3】：

我觉得这个问题的真正答案是：

<div aria-label="G J B Q T C X U">GJBQTCXU</div>

【讨论】：

aria-label 在divs 上是not to be used，没有role。
这试图优化文本到语音的audio输出，但是当使用带有屏幕阅读器的盲文输出设备时，它会变得不必要地冗长。盲文设备的尺寸有限，通常一次只能显示一行。空格意味着每个字母都被视为一个单词，这可能会导致它换行，并且用户可能会错过部分代码。没有空格，整个代码将被视为一个单词，盲文设备将尽量避免超出多行。