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

Question

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

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

"GJBQTCXU"是由一串字母组成的代码; 然而，屏幕阅读器试图将其发音为单个单词。 我该如何阻止它们尝试发音这个无意义的单词，而是让它们逐个字母地读出来：“G J B Q T C X U”。

作为澄清，我正在构建此页面以使屏幕阅读器自动执行正确操作。 我知道用户可以选择让他们的阅读器逐个字母发音，但我不希望我的用户需要采取任何额外步骤。

- Nosrettap

---

不要这样做。我曾经走过这条路，并与真实用户进行测试。你可能认为你在帮助，但实际上并没有。特别是当用户想快速浏览页面时，只需了解字母，而你却通过强制逐字发音来减慢了用户的速度。 - aardrian

有一个 CSS 的 speak-as 属性（还有 speak）在浏览器支持方面非常糟糕。 - jlh

Answer 1

尝试使用CSS的letter-spacing属性 -

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

div {
    letter-spacing:-1.9px;
}

example: http://codepen.io/stevef/pen/grZGBP

- Steve Faulkner

---

对于 OP：是的，在 JAWS 和 NVDA 中测试后（它们不是唯一的屏幕阅读器，但它们提供了一些见解），在不同的浏览器中看起来会将其作为单独的字母阅读。与使用多个块元素标记和 CSS 内联它们相比，这似乎是最简单的解决方案。然而，使用方向键逐个字母阅读的用户确实会读取空格。所以，就像 Adam 提到的那样，在失焦或提交时删除输入中的空格可能是一个好主意。 - Nick Goodrum

除了破坏游标导航外，这还意味着如果你复制文本，你会得到所有的空格。 - OrangeDog

Answer 2

有许多屏幕阅读器，由于可访问性API的差异，这些阅读器在浏览器之间也可能不一致。

说了这么多，以下是从WebAIM http://webaim.org/techniques/screenreader/总结出的一个好的功能描述。

他们指出，默认情况下，某些屏幕阅读器不会读取标点符号（如句点、分号等），而是在它们之间暂停。你可以尝试使用 visually hidden 版本。如果打开了更详细的设置，可能会读取它们。

另一个提到的阅读方面是，某些屏幕阅读器会在段落结尾处暂停。因此，如果将每个字母都包裹在一个 p 标签中，然后使它们内联显示，就可能会有暂停。

由于浏览器之间的细微差别并没有得到充分记录，很难说哪个方法适用于您的实例。

既然用户可以使用左/右箭头键来逐个字母地阅读，那么对于常规屏幕阅读器用户来说，阅读单词缓慢并不需要花费太多时间。

我认为如果 verbosity 设置较高，标点符号会更加危险。因此，首先尝试使用段落标记方法。由于用户也可以使用屏幕阅读器在段落标记之间跳转，可能会有些混乱，但这似乎是两者中较小的问题。

- Nick Goodrum

Answer 3

我觉得真正的答案是：

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

- uRockNinja

---

aria-label 不应该在没有 role 的 div 上使用。参考链接 - Danylo Mysak

这尝试优化文本转语音的音频输出，但在使用屏幕阅读器的盲文输出设备时过于冗长。盲文设备的尺寸有限，通常只能显示一行。空格意味着每个字母都被视为一个单词，这可能导致它换到新的一行，并且用户可能会错过代码的一部分。没有空格，整个代码将被视为一个单词，盲文设备将尝试避免跨多行断开。 - andrewmacpherson