Question

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

举个例子：

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

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

单击组件2中的按钮将隐藏组件2并显示组件1.

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

Please see this Gist on GitHub to check using NVDA

Answer 1

将这两个街区填入ARIA live region。

您需要了解一些live region properties才能使其正常运行。如果您希望它们在更改后立即公布，无论用户在做什么，它都将是assertive。如果您希望它等到用户完成交互，那么它将是polite。还有corresponding live region roles，我将在下面展示。

我认为您的示例代码中不需要其他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>

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

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

这也将解决除NVDA之外的屏幕阅读器。

这是example of an offline alert。这是一个方便的slideshare that goes into more detail。现在还有很多东西你知道要搜索什么。

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

1 个答案: