屏幕阅读器和Javascript

Question

我正在创建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的打印到＃现在扮演-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

我要告诉屏幕阅读器，该网页已更改，它需要再次阅读内容。

这是通过ARIA属性完成的。

我已将aria-live="polite"添加到我的html中。 “礼貌”设置告诉屏幕阅读器，它应该读取新内容，但不会中断当前正在说的内容。 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附加到文档的内容，但坏消息是流程存在更大的问题当然，这是我的错，

Answer 2

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

• 安装NVDA，这是一款适用于Windows的免费屏幕阅读器。
• 如果在Mac上打开VoiceOver。
• 如果在Ubuntu/Gnome上，请安装Orca
• 下载并运行JAWS的试用版。
• 如果在iOS上，请启用VoiceOver。
• 如果在Android上，请启用“话语提示”。
• 哎呀，试试在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>

既然你说你是“为盲人和视障人士提供阅读服务的网站”，那么你有责任了解这些工具以及如何与他们一起进行测试。

Answer 3

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

现代屏幕阅读器使用Accessibility API。他们不必知道任何关于Javascript，或关于真正的DOM和HTML （唯一例外的ChromeVox）。

因为这个原因，同样的屏幕阅读器将用于与您最喜欢的浏览器咨询互联网，用您最喜爱的程序（Thunderbird，Outlook，...）编写邮件或播放Flash Player游戏，只要因为这些程序向其Accessibility API提供了正确的信息。他们不直接解析HTML，而是解析文档的可访问树形视图。

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

现在，很明显，如果您的屏幕阅读器在被javascript修改之前读取内容，它将不会有任何关于javascript所做修改的线索。对于这个问题，你可以使用aria-live属性。

这是一个简短抽象的，而是下面的文章可以通过屏幕阅读器为您提供有关DOM的解析更多的信息： Why accessibility APIs matter