让屏幕阅读器阅读使用JavaScript添加的新内容

ave*_*net 29 javascript accessibility screen-readers

加载网页时,屏幕阅读器(如OS X附带的,或Windows上的JAWS)将读取整个页面的内容.但是请说您的页面是动态的,并且当用户执行操作时,新内容会添加到页面中.为简单起见,假设您在某处显示消息<span>.如何让屏幕阅读器阅读新消息?

Cou*_*sen 31

WAI-ARIA规范定义了几种方法,使屏幕阅读器可以"看" DOM元素.支持的最佳方法是aria-live属性.它有模式off,polite,assertiverude.自信程度越高,就越有可能中断屏幕阅读器当前所说的内容.

以下内容已经在Firefox 3和Firefox 4.0b9下使用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>
Run Code Online (Sandbox Code Playgroud)

同样的事情可以完成与WAI-ARIA 角色 role="status"role="alert".我有不兼容的报告,但无法重现它们.

<div id="statusbar" role="status">...</div>
Run Code Online (Sandbox Code Playgroud)

  • 需要明确的是,"aria-live"的唯一有效值是"off","polite"和"assertive".如果有人对与活动区域相关的角色的默认值感到好奇,或者甚至只是想看看他们做了什么,我写了一个小游乐场,显示了实际的活动区域:http://schne324.github.io/live-region-playground / (5认同)
  • WAI标准具有3个州(关闭,礼貌,有主见)https://www.w3.org/TR/wai-aria/states_and_properties#aria-live Microsoft添加了非标准的“粗鲁”,它看起来与标准相匹配“断言的” (3认同)