[英]Control the screen reader - Make screen reader to read when a particular element has rendered
I'm working on a simple application and I want it to make it accessible through screen readers.我正在开发一个简单的应用程序,我希望它可以通过屏幕阅读器访问。
Problem Area :问题领域:
What I expect : I want the screen reader to start reading based on a condition say after a div gets injected dynamically.我的期望:我希望屏幕阅读器根据动态注入 div 后的条件开始阅读。
I have tried a multiple ways to make the content accessible using aria-live, aria-busy, focus() methods.我尝试了多种方法来使用 aria-live、aria-busy、focus() 方法使内容可访问。
My code is as below:我的代码如下:
<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>
I want the above behavior to be implemented in a bigger application.我希望在更大的应用程序中实现上述行为。 Thank you in advance.先感谢您。
The attribute you are supposed to use if you want to control what ends up in (or rather, what is excluded from) the accessibility tree is aria-hidden
.如果您想控制可访问性树中最终的内容(或者更确切地说,排除的内容),您应该使用的属性是aria-hidden
。
Have you tried wrapping the content you want to hide with aria-hidden="true"
, and then remove the attribute at the moment you want to reveal the content?您是否尝试过使用aria-hidden="true"
包装您想要隐藏的内容,然后在您想要显示内容的那一刻删除该属性?
At some point there's going to be an html attribute called inert
which will be best practice for this kind of thing at some point.在某些时候会有一个名为inert
的 html 属性,这在某些时候将是此类事情的最佳实践。 It's not fully standardised yet, but you can use it with a polyfill .它还没有完全标准化,但你可以将它与polyfill一起使用。 (Please inspect the first of the use cases mentioned in the linked document - I think it is very close to what you need). (请检查链接文档中提到的第一个用例 - 我认为它非常接近您的需要)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.