让屏幕阅读器阅读使用JavaScript添加的新内容 [英] Getting screen reader to read new content added with JavaScript
问题描述
加载网页时，屏幕阅读器（如OS X附带的，或Windows上的JAWS）将读取整个页面的内容。但是请说您的页面是动态的，并且当用户执行操作时，新内容会添加到页面中。为简单起见，假设您在< span> 中的某处显示消息。如何让屏幕阅读器阅读新消息？
When a web page is loaded, screen readers (like the one that comes with OS X, or JAWS on Windows) will read the content of the whole page. But say your page is dynamic, and as users performing an action, new content gets added to the page. For the sake of simplicity, say you display a message somewhere in a <span>. How can you get the screen reader to read that new message?
推荐答案
WAI-ARIA 规范定义了屏幕阅读器可以观察DOM元素的几种方式。最好的支持方法是 aria-live 属性。它的模式关闭，礼貌，断言和粗鲁。自信程度越高，就越有可能打断屏幕阅读器当前正在说的内容。
The WAI-ARIA specification defines several ways by which screen readers can "watch" a DOM element. The best supported method is the aria-live attribute. It has modes off, polite,assertive and rude. The higher the level of assertiveness, the more likely it is to interrupt what is currently being spoken by the screen reader.
以下内容已经过 NVDA ：
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<button onclick="$('#statusbar').html(new Date().toString())">Update</button>
<div id="statusbar" aria-live="assertive"></div>
</body>
同样的事情可以是已完成与WAI-ARIA 角色 role =status和 role =alert 。我有关于不兼容的报告，但无法重现它们。
The same thing can be accomplished with WAI-ARIA roles role="status" and role="alert". I have had reports of incompatibility, but have not been able to reproduce them.
<div id="statusbar" role="status">...</div>
这篇关于让屏幕阅读器阅读使用JavaScript添加的新内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
