屏幕阅读器和Javascript

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

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

从this page开始 – “通常,[屏幕阅读器]访问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(a recent survey shows,99％的屏幕阅读器用户启用了JavaScript),那么问题就无法解决而且更糟糕,因为现在屏幕阅读器用户会认为JavaScript不是启用.

该怎么办？？

解决方法

您可以在不需要知道屏幕阅读器如何解析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>

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

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

屏幕阅读器和Javascript

解决方法

相关文章