屏幕阅读器在Mac上正确阅读，而在Windows上没有反应

Question

我有一个场景，其中我向父aria-label添加了一个<div>，其中包含了一些文本。理想情况下，应该首先讲述提供给父aria-label的<div>，然后再讲述子文本组件。这在MacOS Chrome和VoiceOver屏幕阅读器上工作得很好，但在Windows上，与NVDA的母公司<div> aria-label完全不被读取。

附加代码片段以供参考：

<div aria-label="Parent div accessibility">
     <Text> Some Text </Text> 
</div>

MacOS Chrome上的语音输出与VoiceOver：

Narrator - Parent div accessibility
Narrator - Some Text

使用NVDA在Windows Chrome上的语音输出：

Narrator - Some Text

Answer 1

屏幕阅读器在地图上到处都是关于对非交互元素解释aria-label的内容。

据戴维·麦克唐纳试验称，VoiceOver和TalkBack将读取静态元素上的aria-label文本，但JAWS和NVDA不会，除非静态内容(如<div>)具有role="navigation"、role="search"、role="main"或role="img"。

通过设计，aria-label可以覆盖元素的现有文本，因为大多数屏幕阅读器都会将其解释为元素的标签。因此，您从VoiceOver获得的行为不一定是标准行为。一些屏幕阅读器(如TalkBack)将忽略<div>的内部文本(如果使用aria-label )，因为它将aria-label解释为该元素的标签，而忽略元素中的任何其他文本。其他屏幕阅读器(如JAWS )将同时读取aria-label文本和<div>的内部文本，如果在静态元素中添加像role="navigation"这样的角色。看起来2018年NVDA确实支持在静态元素上使用aria-label，但后来它被删除了，因为还没有就aria-label的争论达成共识。

备选案文1

故障安全选项是使用CSS明显隐藏的文本。所有浏览器/屏幕阅读器组合都完全支持这一点。

下面是示例由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属性隐藏屏幕读取器想要说的文本，就像一个类似的问题中的斜杠建议的那样。

<style>
    div::before {content: "This text is hidden"; font-size: 0px;}  
</style>

我用JAWS和NVDA测试了他的建议，它宣布了“这个文本是隐藏的”文本以及<div>的内部文本。

但是，正如QuentinC在注释中指出的那样，CSS content属性目前并不是所有浏览器/屏幕阅读器组合所支持的。

供参考：

澄清在没有角色#756的元素上使用aria-标签

悲哀-阿里亚:令人惊讶但却极其复杂的咏叹调/分类/分类

静态HTML元素上的aria、aria-label和aria-describedby是如何处理的？

WebAIM:仅供屏幕阅读器用户使用的不可见内容

更新

我编辑了我最初的答案，包括QuentinC关于使用CSS隐藏文本的建议。