首页 > 解决方案 > 为什么在文本编辑器 div 中突出显示多行时 JAWS 屏幕阅读器重复行?

问题描述

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

他希望屏幕阅读器在每次突出显示新行时只会阅读新突出显示的文本。例如,如果“The quick brown fox jumped over the lazy dog”这行在“jumped”之后被分成两行,那么当他选择第一行时,他希望它变成“The quick brown fox jumped”,然后然后只有在他再次按下向下箭头以选择第二行时“over the lazy dog”。这就是它在 Microsoft Word 和他大量使用的其他程序中的工作方式。

经过一些研究,我发现 JAWS 正在按预期读取单个段落中的所有内容,但是当他选择包含空<p>标签或<p>只有<br>内部标签的行时似乎会出现问题(这在我们的应用程序中很常见) . 例如,以下是我们的文本编辑器的内容可能真实的样子:

<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 将再次阅读前两行,然后是第二段的第一行。有趣的是,如果他突出显示最后一行,它的行为与预期一样,并且只读取该行。

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

标签: accessibilityscreen-readersjaws-screen-reader

解决方案


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

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

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


推荐阅读