javascript - 屏幕阅读器和 Javascript

Question

我正在创建 a website for a reading service for the blind and visually impaired我正在使用 JavaScript(带有 jQ​​uery)在页面加载后将一些内容打印到某些页面。

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

来自 this page - “一般来说，[屏幕阅读器] 访问 DOM(文档对象模型)，并且他们使用浏览器 API(应用程序编程接口(interface))来获取他们需要的信息。”

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

所以问题就变成了.. 屏幕阅读器会获取整个 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(a recent survey shows 99% 的屏幕阅读器用户都启用了 JavaScript)，那么问题就没有解决，而且变得更糟，因为现在屏幕阅读器用户会认为 JavaScript 未启用。

怎么办？？

Answer 1

您无需了解屏幕阅读器如何解析 DOM 即可对此进行测试。我提供这个答案主要是因为您没有提供任何代码来测试(“某些页面的某些内容”不是要测试的代码)并且您的示例没有提供足够的上下文。

• 安装 NVDA ，适用于 Windows 的免费屏幕阅读器。
• 如果使用的是 Mac，请打开 VoiceOver。
• 如果在 Ubuntu/Gnome 上，安装 Orca
• 下载并运行 JAWS 的试用版.
• 如果在 iOS 上，请打开 VoiceOver。
• 如果在 Android 上，请打开 TalkBack。
• 哎呀，试试 Windows 上的“讲述人”吧。

有很多教程可以帮助您入门和运行。这里有一对:

• A video overview of NVDA .
• 获取 keyboard shortcuts for many screen readers 的列表.

然后，如果您发现您的脚本在屏幕阅读器已经解析后修改了 DOM，请探索 ARIA live regions然后看browser support .

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

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

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

既然您说您正在“创建一个为盲人和视障人士提供阅读服务的网站”，那么学习这些工具以及如何使用这些工具进行测试确实是您的责任。