控制屏幕阅读器 - 使屏幕阅读器在特定元素呈现时阅读

问题描述

我正在开发一个简单的应用程序，我希望它可以通过屏幕阅读器访问。

问题区域：

• 网页上的屏幕阅读器实际行为：我看到屏幕 阅读器等待页面完全加载（不包括 动态生成的元素），然后从顶部开始读取 到底部

我的期望：我希望屏幕阅读器在动态注入 div 后根据条件开始阅读。

我尝试了多种方法来使用 aria-live、aria-busy、focus() 方法使内容可访问。

我的代码如下：

<div><h1>NVDA TEST</h1></div>
<iframe src="http://localhost:3000" title="iframe" style="height: 500px; width: 100%;"></iframe>
<footer>
    <span>Hello Company</span>
    <span style="float: right">Terms and conditions Apply</span>
</footer>

我希望在更大的应用程序中实现上述行为。 提前致谢。

解决方法

如果您想控制可访问性树中的内容（或者更确切地说，是排除的内容），您应该使用的属性是 aria-hidden。

您是否尝试过用 aria-hidden="true" 包裹要隐藏的内容，然后在要显示内容的那一刻移除该​​属性？

在某些时候会有一个名为 inert 的 html 属性，它在某些时候将成为此类事情的最佳实践。它尚未完全标准化，但您可以将其与 polyfill 一起使用。 （请检查链接文档中提到的第一个用例 - 我认为它非常接近您的需要）。