屏幕阅读器和Javascript

Question

我正在为盲人和视障人士的阅读服务创建一个网站 ，我正在使用JavaScript（使用jQuery）在页面加载后将一些内容打印到某些页面。

屏幕阅读器是否会在页面加载后读取使用jquery打印到页面的内容？

从这个页面 - “通常，[屏幕阅读器]访问DOM（文档对象模型），他们使用浏览器API（应用程序编程接口）来获取他们需要的信息。”

我们知道jQuery是一个DOM操作库。

所以问题变成..屏幕阅读器是否会获取整个DOM的副本，然后解析并阅读它？ 或者他们是否读取了与jQuery相同的DOM？

这是我使用JavaScript的其中一个页面的示例。 它使用一种功能来确定我们在空中播放的节目，然后打印节目的名称和听取它的链接。

<div id="now-playing-div"></div>

<script>

// invoke the audio-reader javascript library
$( document ).ready( function() {
  var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
  var selector = '#now-playing-div';
  makeAudioReaderPage(callback, selector);
});

</script>

正如您所看到的，如果屏幕阅读器没有读取javascript / jquery打印到＃now-playing-div的内容，那么它将不会读取任何内容。 然后，我们开始收到一些混乱的听众的电子邮件，想知道正在播放链接发生了什么。

所以今天早上我添加了这个：

<div id='no-js'>Please enable JavaScript to receive this content.</div>

<script>
$( document ).ready( function() {
  $('#no-js').toggle();
});

</script>

但如果问题不在于需要启用JavaScript（ 最近的一项调查显示 99％的屏幕阅读器用户启用了JavaScript），那么问题就无法解决，甚至更糟，因为现在屏幕阅读器用户会认为JavaScript未启用。

该怎么办？？

Answer 1

您可以在不需要知道屏幕阅读器如何解析DOM的情况下对此进行测试。 我提供这个答案主要是因为你没有提供任何代码来测试（“某些页面的某些东西”不是要测试的代码）而你的例子没有提供足够的上下文。

• 安装NVDA ，一个用于Windows的免费屏幕阅读器。
• 如果在Mac上，请启用VoiceOver。
• 如果在Ubuntu / Gnome上，请安装Orca
• 下载并运行JAWS试用版。
• 如果在iOS上，请启用VoiceOver。
• 如果在Android上，请启用TalkBack。
• 哎呀，试试Windows上的讲述者。

有很多教程可以帮助您启动和运行。 这是一对夫妇：

• NVDA的视频概述 。
• 获取许多屏幕阅读器的键盘快捷键列表。

然后，如果您发现您的脚本在屏幕阅读器已经解析后修改了DOM，请浏览ARIA实时区域 ，然后查看浏览器支持 。

最后，如果您使用<noscript>元素，上面关于检测脚本是否已启用的示例实际上并不需要脚本才能工作：

<noscript>
 <p>
 Please enable JavaScript to receive this content.
 </p>
</noscript>

如果浏览器启用了脚本，则不会呈现（这很好）。 但是，这不会解决您希望显示的脚本块因其他原因（网络延迟，错误等）而失败的情况。 更多关于<noscript>

既然你说你“正在为盲人和视障人士创建一个阅读服务网站”，你就有责任学习工具以及如何用它们进行测试。

Answer 2

“通常，[屏幕阅读器]访问DOM（文档对象模型），他们使用浏览器API（应用程序编程接口）来获取他们需要的信息。”

现代屏幕阅读器使用Accessibility API。 他们不必了解任何有关Javascript ，或真正的DOM和HTML （ChromeVox除外） 。

出于这个原因，相同的屏幕阅读器将用于使用您喜欢的浏览器查询Internet，使用您喜欢的程序（Thunderbird，Outlook，...）编写邮件或玩Flash播放器游戏，只要这些程序提供正确的他们的Accessibility API的信息。 它们不直接解析HTML，而是解析文档的可访问树视图。

这意味着如果您的浏览器了解javascript，您的屏幕阅读器将会。 这是因为，您的屏幕阅读器不会直接在页面加载中访问DOM，而是会与浏览器提供的Accessibility API进行交互。

现在，显然，如果您的屏幕阅读器在javascript修改之前读取内容，它将不会对javascript所做的修改有任何线索。 就此而言，您可以使用aria-live属性。

这是一个简短的摘要，但是下面的文章可以为您提供有关屏幕阅读器解析DOM的更多信息： 为什么可访问性API很重要

Answer 3

我需要告诉屏幕阅读器页面已经更改，并且需要再次阅读内容。

这是通过ARIA属性完成的。

我在我的html中添加了aria-live="polite" 。 “礼貌”设置告诉屏幕阅读器它应该读取新内容但不会中断当前正在说的内容。 IIRC其他设置是off和assertive 。

<div id="now-playing-div" aria-live="polite"></div>

<script>

// invoke the audio-reader javascript library
$( document ).ready( function() {
  var callback = nowPlaying; // catalog, schedule, podcasts, archive or nowPlaying
  var selector = '#now-playing-div';
  makeAudioReaderPage(callback, selector); // the callback will append HTML to the element via jquery with the selector as the query term
});

</script>

现在我有一个人看不到任何测试网站的东西，他曾经能够看到并且他在他失去视力之前学会了使用计算机。 不幸的是，他在网站上遇到了困难。 问题是，当他到达页面听音频时，他使用键盘快捷键搜索播放按钮，但没有播放按钮，因为播放按钮（jplayer）位于弹出窗口中，单击后弹出一条链接。 他感到沮丧，电话结束了:(

所以好消息是他能够通过jquery读取附加到文档中的内容，但坏消息是网站的流量和他的期望存在更大的问题。 这当然是我的错。