屏幕读取器在Mac Chrome上正确阅读，但在Windows Chrome上没有读取

Question

我有一个场景，我添加了一个aria-label向父＆lt; div; gt;，其中包含一些文本。理想情况下，应先叙述给父＆lt; div＆gt; div; div; div＆gt;的aria-label应首先叙述，然后再叙述子文本组件。这在MacOS Chrome上与VoiceOver屏幕阅读器完全效果，但是在Windows Chrome上，nvda parent ＆lt; div＆gt; 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

Answer 1

屏幕读取器在非相互作用元素上解释aria-label方面都在地图上。

根据 David MacDonald的测试在静态元素上读取aria-label文本，但是除非静态内容（例如＆lt; div＆gt;）具有remo ='，否则jaws和nvda不会导航“，角色=“ search”，real =“ main”或real =“ img”。

根据设计，aria-label旨在覆盖元素的现有文本，因为它是大多数屏幕读取器将其解释为元素标签的方法。因此，您从配音中获得的行为不一定是标准行为。某些屏幕读取器（例如对话）会忽略＆lt; div＆gt;的内部文本，如果您使用aria-label，因为它可以解释aria-label < /代码>作为该元素的标签，忽略了元素中的任何其他文本。其他屏幕读取器（如Jaws）将读取 aria-label文本和＆lt; div; div＆gt; 的内部文本em>您将角色添加到静态元素之类的角色=“ navigation”。似乎NVDA 2018在静态元素上使用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> 

option

2 > content 属性隐藏了屏幕读取器要说的文本，如 so so 上的类似问题：

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

我用jaws和nvda测试了他的建议，它宣布了“这本文是隐藏的“文本以及＆lt; div＆gt;的内部文本。

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

参考：
澄清在没有角色＃756
的元素上使用aria-label
woe-aria： - 标签/ledby
Aria-labelledby，aria-label和aria-descred a aria-labelledby会发生什么情况在静态HTML元素上？
webaim：webaim：仅适用于屏幕阅读器用户的隐形

内容 使用CSS隐藏文本。