屏幕阅读器和 Javascript

Question

我正在创建 a website for a reading service for the blind and visually impaired 并使用 JavaScript（使用 jQuery）在页面加载后将一些内容打印到某些页面。

页面加载后，屏幕reader会读取打印到jquery页面的内容吗？

从 this page - "Generally, [screen readers] access the DOM (Document Object Model), and they use browser APIs (Application Programming Interfaces) to get the information they need."

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

所以问题就变成了.. screen readers 是否复制整个 DOM 然后解析并读取它？还是他们阅读 DOM，jQuery 正在阅读的那本？

这是我使用 JavaScript 的其中一个页面的示例。它使用一个函数来确定我们在空中播放什么节目，然后打印节目的名称和一个 link 来收听它。

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

如您所见，如果屏幕 reader 没有读取 javascript/jquery 打印到 #now-playing-div 的内容，那么它什么也不会读取。然后，我们开始收到一些困惑的听众的电子邮件，想知道“正在播放”link 发生了什么。

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

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

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

</script>

但如果问题不是需要启用 JavaScript（a recent survey shows 99% 的屏幕-reader 用户已启用 JavaScript），那么问题没有解决，而且变得更糟，因为现在屏幕 reader 用户会认为 JavaScript 未启用。

怎么办？？

Answer 1

您无需了解屏幕 reader 是如何解析 DOM 就可以对其进行测试。我提供这个答案主要是因为您没有提供任何代码来测试（"some stuff to some of the pages" 不是要测试的代码）并且您的示例没有提供足够的上下文。

安装 NVDA，Windows 的免费屏幕 reader。
如果在 Mac 上，请打开 VoiceOver。
如果在 Ubuntu / Gnome 上，安装 Orca
下载并运行试用 JAWS。
如果打开 iOS，请打开 VoiceOver。
如果开启 Android，开启 TalkBack。
哎呀，试试 Windows 上的讲述人。

有很多教程可以帮助您起床和运行宁。这里有一对：

一个video overview of NVDA.
获取 keyboard shortcuts for many screen readers 的列表。

然后，如果您发现您的脚本在屏幕 reader 已经解析后修改了 DOM，请探索 ARIA live regions and then look at browser support。

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

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

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

既然你说你是 "creating a website for a reading service for the blind and visually impaired"，学习这些工具以及如何使用它们进行测试的责任就落在你身上了。

Answer 2

"Generally, [screen readers] access the DOM (Document Object Model), and they use browser APIs (Application Programming Interfaces) to get the information they need."

现代屏幕 reader 使用辅助功能 API。他们不必知道任何有关 Javascript 或真正的 DOM 和 HTML （ChromeVox 除外）.

因此，同一个屏幕reader 将用于使用您最喜欢的浏览器访问 Internet，使用您最喜欢的程序（Thunderbird、Outlook 等）写邮件或播放 flash player 游戏，只要这些程序为其辅助功能提供正确的信息 API。他们不直接解析 HTML，而是解析文档的可访问树视图。

这意味着如果您的浏览器理解 javascript，您的屏幕reader 就会理解。那是因为，您的屏幕 reader 不会在页面加载时直接访问 DOM，但会与浏览器提供的辅助功能 API 交互。

现在，显然，如果您的屏幕reader 读取的是 javascript 修改之前的内容，它不会有任何关于 javascript 修改的线索。为此，您可以使用 aria-live 属性。

这是一个简短的摘要，但是下面的文章可以为您提供更多关于 reader 屏幕解析 DOM 的信息： Why accessibility APIs matter

Answer 3

我需要告诉屏幕reader页面已更改，需要重新读取内容。

这是通过 ARIA 属性完成的。

我已将 aria-live="polite" 添加到我的 html。 "polite" 设置告诉屏幕 reader 它应该阅读新内容但不打断当前正在说的内容。 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) 在弹出窗口中 window单击 link 后弹出。他很沮丧，phone 通话结束了:(

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

屏幕阅读器和 Javascript

Screen readers and Javascript

javascript

jquery

accessibility

screen-readers

jaws-screen-reader