Html 屏幕阅读器无法读取定位标记内的可见文本

我有一个angular应用程序，它有一个下拉菜单，如下所示

我使用NVDA reader读取屏幕。在这里，当我使用tab focus时，它只读取aria标签内的内容。我希望它也读取aria标签内容和锚定标记内的其他文本（“帐户”、“用户名、电子邮件”）

navigation.tpl.html

在您的示例中，您用

aria标签重写了“帐户、用户名、电子邮件”文本

aria label
用作“将此元素的内容说给屏幕阅读器”属性，覆盖其中的信息

如果您想添加其他信息，请查看

然而，我总是鼓励人们不要使用
aria标签
，而是使用视觉隐藏文本

这一切归结为支持没有完美的支持，而视觉隐藏文本将工作的所有方式回到IE6

另外，视觉隐藏文本在不支持CSS（纯文本浏览器）的浏览器上工作，这是一个不错的额外优势

我在下面创建了一个代码片段，向您展示如何做到这一点

关于语义的补充点
请注意，我还在代码片段中添加了第二个示例，我在其中更改了您的锚（
解释了
.sr only
类当前的问题


。视觉隐藏{
边界：0；
填充：0；
保证金：0；
位置：绝对！重要；
高度：1px；
宽度：1px；
溢出：隐藏；
剪辑：rect（1px 1px 1px）；/*IE6，IE7-0高度剪辑，位于可见的1px框的右下角*/
clip:rect（1px，1px，1px，1px）；/*可能不推荐使用，但我们需要支持传统浏览器*/
剪辑路径：插入（50%）；/*现代浏览器，剪辑路径从每个角向内工作*/
空白：nowrap；/*添加了一行，以防止单词被弄脏（因为它们被放在单独的行上，一些屏幕阅读器不将换行符理解为空白）*/
}




进一步改进的建议


开放式下拉列表
账户
{{：：用户名}}

aria标签
通常会取代元素的内联文本内容。将
.sr仅与该文本一起放置在锚定中可能更有效。或者，如果您为有视力的用户添加下拉图标，这将是为屏幕阅读器在语义上放置该文本的好地方。