屏幕 Reader 在 Mac chrome 上正确阅读，但在 Windows Chrome 上阅读不正确 React
Screen Reader reading properly on Mac chrome but not on Windows Chrome React
我有一个场景，我向包含一些文本的父 <div> 添加了一个 aria-label。理想情况下，应首先叙述提供给父 <div> 的 aria-label，然后是子文本组件。这在带有 VoiceOver 屏幕 reader 的 MacOS Chrome 上完全正常，但在带有 NVDA 的 Windows Chrome 上，父级 <div> aria-label 不在全部阅读。
附上代码片段以供参考：
<div aria-label="Parent div accessibility">
<Text> Some Text </Text>
</div>
MacOS 上的语音输出 Chrome 使用 VoiceOver：
Narrator - Parent div accessibility
Narrator - Some Text
在 Windows Chrome 上使用 NVDA 的语音输出：
Narrator - Some Text
关于 non-interactive 元素的 aria-label 解释，屏幕 reader 无处不在。
根据 David MacDonald's tests，VoiceOver 和 TalkBack 将读取静态元素上的 aria-label 文本，但 JAWS 和 NVDA 不会，除非静态内容（如 <div>）具有role="navigation"、role="search"、role="main" 或 role="img"。
根据设计，aria-label 旨在覆盖元素的现有文本，因为大多数屏幕 reader 会将其解释为元素的标签。因此，您从 VoiceOver 获得的行为不一定是标准行为。如果您使用 aria-label，某些屏幕 readers（如 TalkBack）将忽略您的 <div> 的内部文本，因为它会将 aria-label 解释为该元素的标签并忽略元素中的任何其他文本。像 JAWS 这样的其他屏幕 readers 将读取 both aria-label 文本和 <div> if[=71] 的内部文本=] 你添加一个像 role="navigation" 这样的角色到你的静态元素。似乎 NVDA 2018 确实支持在静态元素上使用 aria-label，但后来被删除了，因为尚未就 aria-label 辩论达成共识。
选项 1
fail-safe 选项将使用被 CSS 明显隐藏的文本。所有 browser/screen reader 组合都完全支持这一点。
这里是例子suggested by WebAIM:
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<div class="sr-only">This text is hidden.</div>
选项 2
另一种选择是使用 CSS content 属性 隐藏您希望屏幕说出的文本 reader，如 slugolicious 在 a similar question on SO:
<style>
div::before {content: "This text is hidden"; font-size: 0px;}
</style>
我用 JAWS 和 NVDA 测试了他的建议，它宣布了“This text is hidden”文本以及 <div> 的内部文本。
然而，正如 QuentinC 在评论中指出的那样，CSS content 属性 当前并非所有 browser/screen reader 组合都支持。
供参考：
Clarify use of aria-label on elements with no role #756
Woe-ARIA: The Surprisingly but Ridiculously Complicated World of aria-label/ledby
What happens with aria-labelledby, aria-label and aria-describedby on static HTML elements?
WebAIM: Invisible Content Just for Screen Reader Users
更新
我编辑了我的原始答案以包含 QuentinC 关于使用 CSS 隐藏文本的建议。
我有一个场景，我向包含一些文本的父 <div> 添加了一个 aria-label。理想情况下，应首先叙述提供给父 <div> 的 aria-label，然后是子文本组件。这在带有 VoiceOver 屏幕 reader 的 MacOS Chrome 上完全正常，但在带有 NVDA 的 Windows Chrome 上，父级 <div> aria-label 不在全部阅读。
附上代码片段以供参考：
<div aria-label="Parent div accessibility">
<Text> Some Text </Text>
</div>
MacOS 上的语音输出 Chrome 使用 VoiceOver：
Narrator - Parent div accessibility
Narrator - Some Text
在 Windows Chrome 上使用 NVDA 的语音输出：
Narrator - Some Text
关于 non-interactive 元素的 aria-label 解释，屏幕 reader 无处不在。
根据 David MacDonald's tests，VoiceOver 和 TalkBack 将读取静态元素上的 aria-label 文本，但 JAWS 和 NVDA 不会，除非静态内容（如 <div>）具有role="navigation"、role="search"、role="main" 或 role="img"。
根据设计，aria-label 旨在覆盖元素的现有文本，因为大多数屏幕 reader 会将其解释为元素的标签。因此，您从 VoiceOver 获得的行为不一定是标准行为。如果您使用 aria-label，某些屏幕 readers（如 TalkBack）将忽略您的 <div> 的内部文本，因为它会将 aria-label 解释为该元素的标签并忽略元素中的任何其他文本。像 JAWS 这样的其他屏幕 readers 将读取 both aria-label 文本和 <div> if[=71] 的内部文本=] 你添加一个像 role="navigation" 这样的角色到你的静态元素。似乎 NVDA 2018 确实支持在静态元素上使用 aria-label，但后来被删除了，因为尚未就 aria-label 辩论达成共识。
选项 1
fail-safe 选项将使用被 CSS 明显隐藏的文本。所有 browser/screen reader 组合都完全支持这一点。
这里是例子suggested by WebAIM:
<style>
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
</style>
<div class="sr-only">This text is hidden.</div>
选项 2
另一种选择是使用 CSS content 属性 隐藏您希望屏幕说出的文本 reader，如 slugolicious 在 a similar question on SO:
<style>
div::before {content: "This text is hidden"; font-size: 0px;}
</style>
我用 JAWS 和 NVDA 测试了他的建议，它宣布了“This text is hidden”文本以及 <div> 的内部文本。
然而，正如 QuentinC 在评论中指出的那样，CSS content 属性 当前并非所有 browser/screen reader 组合都支持。
供参考：
Clarify use of aria-label on elements with no role #756
Woe-ARIA: The Surprisingly but Ridiculously Complicated World of aria-label/ledby
What happens with aria-labelledby, aria-label and aria-describedby on static HTML elements?
WebAIM: Invisible Content Just for Screen Reader Users
更新
我编辑了我的原始答案以包含 QuentinC 关于使用 CSS 隐藏文本的建议。