让屏幕阅读器阅读使用 JavaScript 添加的新内容 [英] Getting screen reader to read new content added with JavaScript
问题描述
加载网页时，屏幕阅读器(如 OS X 附带的或 Windows 上的 JAWS)将阅读整个页面的内容.但是假设您的页面是动态的，并且随着用户执行操作，新内容会添加到页面中.为简单起见，假设您在 的某处显示一条消息.如何让屏幕阅读器阅读新消息?
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 属性.它有 off、polite、assertive 和 rude 模式.自信程度越高，就越有可能打断屏幕阅读器当前正在讲的内容.
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.
以下已在 Firefox 3 和 Firefox 4.0b9 下使用 NVDA 进行了测试:
The following has been tested with NVDA under Firefox 3 and Firefox 4.0b9:
<!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 完成href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions" rel="noreferrer">角色 role="status" 和 role="警报".我收到了不兼容的报告，但无法重现.
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屋！
