如何让屏幕阅读器响应在动态Web应用程序中显示和隐藏内容？ [英] How can I make screen readers respond to showing and hiding content in a dynamic web application?
问题描述
我想创建一个可访问的网页，其中包含许多可在用户与页面交互时隐藏和显示的组件。当显示一个组件时，我希望屏幕阅读器（在这种情况下是NVDA）读取组件的内容。
举个例子：
< html>< body> < div id =comp1style =display：none; role =regiontabindex = - 1aria-expanded =false> < div>这是组件1< / div> < button type =buttononclick =ShowComponent（comp2）>显示2< / button> < / DIV> < div id =comp2style =display：none; role =regiontabindex = - 1aria-expanded =false> < div>这是组件2< / div> < button type =buttononclick =ShowComponent（comp1）>显示1< / button> < / DIV> < script type =text / javascript>函数HideAll（）{//隐藏这两个组件var comp1 = document.getElementById（comp1）; comp1.style.display =none; comp1.setAttribute（aria-expanded，false）; var comp2 = document.getElementById（comp2）; comp2.style.display =none; comp2.setAttribute（aria-expanded，false）; }函数ShowComponent（comp）{HideAll（）; //显示此组件comp.style.display =block; comp.setAttribute（aria-expanded，true）; comp.focus（）; } ShowComponent（的document.getElementById（ COMP1））; < / script>< / html>
在上面的例子中，单击组件1中的一个按钮将隐藏组件1并显示组件2.
单击组件2中的按钮将隐藏组件2并显示组件1 。
然而NVDA在组件之间切换时似乎没有读取组件的内容。有没有一种方法可以实现这一点？
请参阅GitHub上的Gist来检查使用NVDA 两个区块放入 ARIA直播区域。
有一些直播区域属性你需要知道让它工作。如果您希望在更改后立即宣布它们，则无论用户在做什么，它都会是 assertive 。如果您希望它等到用户完成交互，那么它将是 polite 。还有相应的直播区域角色，我将在下面展示。
我不认为在你的代码中你需要其他的ARIA位，也不需要 tabindex ，但是我没有知道页面的范围。这是一个不同的例子：
< div role =alertaria-live =assertive>
此处的任何内容将在其更改后立即公布。
< / div>
< div role =statusaria-live =polite>
此处的任何内容都会在更改时发布，但仅在用户停止与页面进行交互之后才会公布。
< / div>
此外， aria-atomic 属性会告诉屏幕阅读器是否应该宣布整个事情这对于提醒信息是很好的）或者只是改变了的部分（这可能更适合定时器）。
避免在ARIA上有多个活动区域一个页面。
除了NVDA以外，它还可以解决屏幕阅读器的问题。
这是一个脱机警报示例。这是一个方便的 slideshare，可以更详细地了解。现在有更多的东西可以让你知道要搜索什么。
I would like to create an accessible web page which contains a number of components that can be hidden and shown as the user interacts with the page. When a component is shown I expect a screen reader (in this case NVDA) to read the contents of the component.
As an example:
<html>
<body>
<div id="comp1" style="display:none;" role="region" tabindex="-1" aria-expanded="false">
<div>This is component 1</div>
<button type="button" onclick="ShowComponent(comp2)">Show 2</button>
</div>
<div id="comp2" style="display:none;" role="region" tabindex="-1" aria-expanded="false">
<div>This is component 2</div>
<button type="button" onclick="ShowComponent(comp1)">Show 1</button>
</div>
<script type="text/javascript">
function HideAll() {
// hide both components
var comp1 = document.getElementById("comp1");
comp1.style.display = "none";
comp1.setAttribute("aria-expanded", "false");
var comp2 = document.getElementById("comp2");
comp2.style.display = "none";
comp2.setAttribute("aria-expanded", "false");
}
function ShowComponent(comp) {
HideAll();
// show this component
comp.style.display = "block";
comp.setAttribute("aria-expanded", "true");
comp.focus();
}
ShowComponent(document.getElementById("comp1"));
</script>
</body>
</html>
In the above example clicking a button within component 1 will hide component 1 and show component 2.
Clicking a button within component 2 will hide component 2 and show component 1.
However NVDA does not seem to read the contents of the components when toggling between the components. Is there a way that this can be achieved?
Please see this Gist on GitHub to check using NVDA
Stuff those two blocks into an ARIA live region.
There are some live region properties you need to know to make it work. If you want them to be announced as soon as they change, no matter what the user is doing, then it will be assertive. If you want it to wait until the user finishes an interaction, then it will be polite. There are corresponding live region roles as well, which I show below.
I do not think you need the other ARIA bits nor tabindex in your example code, but I do not know the scope of the page. Here is a different example instead:
<div role="alert" aria-live="assertive">
Anything in here will be announced as soon as it changes.
</div>
<div role="status" aria-live="polite">
Anything in here will be announced when it changes but only after the user has stopped interacting with the page..
</div>
Further, the aria-atomic property will tell the screen reader whether it should announce the entire thing (which is good for an alert message) or just the parts that changed (which might be a better fit for a timer).
Avoid having more than one ARIA live region on a page.
This will also address screen readers besides NVDA.
Here is an example of an offline alert. Here is a handy slideshare that goes into more detail. There is a lot more out there now that you know what to search.
这篇关于如何让屏幕阅读器响应在动态Web应用程序中显示和隐藏内容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
