如何让屏幕阅读器响应在动态Web应用程序中显示和隐藏内容？

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.

我想创建一个可访问的网页，其中包含许多组件，可以在用户与页面交互时隐藏和显示这些组件。当显示组件时，我期望屏幕阅读器（在这种情况下为NVDA）读取组件的内容。

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.

在上面的示例中，单击组件1中的按钮将隐藏组件1并显示组件2。

Clicking a button within component 2 will hide component 2 and show component 1.

单击组件2中的按钮将隐藏组件2并显示组件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?

但是，当在组件之间切换时，NVDA似乎不会读取组件的内容。有没有办法实现这一目标？

Please see this Gist on GitHub to check using NVDA

请在GitHub上查看此Gist以查看使用NVDA

1 个解决方案

#1

Stuff those two blocks into an ARIA live region.

将这两个街区填入ARIA直播区域。

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:

我认为您的示例代码中不需要其他ARIA位或tabindex，但我不知道页面的范围。这是一个不同的例子：

<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).

此外，aria-atomic属性将告诉屏幕阅读器它是否应该宣告整个事物（这对于警报消息是好的）或者只是更改的部分（这可能更适合于计时器）。

Avoid having more than one ARIA live region on a page.

避免在页面上放置多个ARIA实时区域。

This will also address screen readers besides NVDA.

这也将解决除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.

以下是脱机警报的示例。这是一个方便的幻灯片，更详细。现在还有很多东西你知道要搜索什么。

#1