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

Question

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

问题领域：

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

我的期望：我希望屏幕阅读器根据动态注入 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>

我希望在更大的应用程序中实现上述行为。 先感谢您。

Answer 1

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

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

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