使用 role=option 时，让屏幕阅读器读出前缀文本和 DOM 内容

Question

我有一个role="listbox"的外部 div 和一些role="option"的内部 div。 当我使用上下键盘在内部 div 的元素内移动焦点时，它会将它们读出为“1 of 5, Element 1”、“2 of 5, Element 2”、“3 of 5, Element 3”和很快..

我希望它在读出元素之前读取前缀文本，例如“前缀文本”，因此它显示为“前缀文本，5 个中的 1 个，元素 1”，“前缀文本，5 个中的 2 个，元素 2” “ 等等..

我试过向外部 div 添加aria-label="prefix text"但它没有帮助。

我这里有一个显示 DOM 结构的 codesandbox - https://codesandbox.io/s/narrator-option-example-eb8ghh?file=/index.html

Answer 1

首先澄清问题，当你说你使用上下箭头键时，是在运行还是不运行屏幕阅读器的情况下？ 因为在屏幕阅读器运行时 up-down 会将屏幕阅读器焦点移动到下一个 DOM 元素，但是在没有屏幕阅读器的情况下 up-down 将滚动页面，除非您陷入该键盘事件。

我问是因为您的代码示例似乎无法处理键盘事件，所以如果没有运行屏幕阅读器，我无法导航到列表框项目。

但是，话虽如此，您可以使用 CSS content属性欺骗屏幕阅读器说出前缀文本而不显示前缀文本。

在您的演示代码中，添加以下内容：

<style>
  div[role=option]::before {content: "prefix text";font-size: 0px;}  
</style>

将字体大小设置为 0 使其不可见，但屏幕阅读器仍会宣布它。 它适用于 NVDA、JAWS 和 Voiceover。