为什么在文本编辑器 div 中突出显示多行时 JAWS 屏幕 reader 重复行?

Why is JAWS screen reader repeating lines when highlighting multiple lines in a text editor div?

我正在开发一个具有文本编辑器组件的 JavaScript 网络应用程序。我们最活跃的用户之一是盲人,他使用 JAWS 屏幕 reader 来使用我们的应用程序。他经常从文本编辑器中突出显示多行文本,然后将它们复制并粘贴到另一个程序(Word、Outlook 等)中,并抱怨说当他 select 编辑多行时,屏幕 reader 正在重复文本线。他按下 shift 键和向下箭头到 select 行。

他希望屏幕 reader 每次他突出显示新行时只读取新突出显示的文本。例如,如果 "The quick brown fox jumped over the lazy dog" 行在单词 "jumped," 之后被分成两行,当他 select 编辑第一行时,他希望它读作 "The quick brown fox jumped" 然后仅"over the lazy dog" 当他再次按下向下箭头时 select 第二行。这就是它在 Microsoft Word 和他经常使用的其他程序中的工作方式。

经过一些研究,我发现 JAWS 正在阅读单个段落中的所有内容,但当他 select 包含空 <p> 标记的行时似乎会出现问题或内部只有 <br><p> 标签(这在我们的应用程序中很常见)。例如,下面是我们的文本编辑器的内容可能看起来像:

<p>This is a long line of text that will wrap
around after the first occurrence of the word "wrap"</p>
<p><br></p>
<p>And then there might be another long line of text
here that wraps around after the first occurrence of the word "text"</p>

如果他从顶部开始突出显示,JAWS 将正确读取第一行,然后在突出显示第二行后正确读取第二行。当他突出显示其中有换行符的段落时,JAWS 将再次阅读前两行。当他突出显示第二段的第一行时,JAWS 将再次阅读前两行,然后是第二段的第一行。有趣的是,如果他突出显示最后一行,它会按预期运行并且只读取该行。

任何人都可以帮助我了解导致屏幕 reader 在这种情况下重复行的文本编辑器内容结构有什么问题吗?任何指导将不胜感激。

没有实际例子很难回答,但我的理论如下: 当您不突出显示新文本内容时,jaws 会重复文本。所以它适用于 <p>&nbsp;</p> 因为牢不可破的 space 是一些文本内容,而 <p><br /></p> 不包含任何文本内容。

Jaws 之所以这样做,可能是因为它不知道要为已选择的新文本说些什么。没有什么不好是因为你不知道; "empty" 不正确,因为 <br /> 不为空;并且没有任何其他要说的,因为没有文本内容。 所以 Jaws 开发人员选择重复先前选择的文本或至少部分结尾部分作为最后的手段。 <p>&nbsp;</p> 不存在这个问题,因为在那种情况下 Jaws 可以安全正确地说 "space"。

这更像是一个 jaws-specific 问题而不是其他问题,所以遗憾的是没有什么可做的。最好的当然是避免在编辑器中使用无用的代码,例如 <p><br /></p> ,更常见的是在元素的开头或结尾使用 <br /> ,或者其他类似的奇怪的东西,但我知道它不容易。 不同的浏览器有不同的添加空段落的方式,这取决于你如何编辑、移动或放置光标,对于列表、标题、table 单元格等也是一样的。简而言之,很难过滤掉浏览器生成的错误代码。不过,您可以尝试使用最明显和最常见的方法。一个可能的方法是覆盖回车键的默认行为,这样你就可以插入你想要的而不是浏览器想要的,但在所有情况下都很难做到正确。