我正在创建 a website for a reading service for the blind and visually impaired我正在使用 JavaScript(带有 jQuery)在页面加载后将一些内容打印到某些页面。
屏幕阅读器是否会在页面加载后读取使用 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 未启用。
怎么办??
最佳答案
您无需了解屏幕阅读器如何解析 DOM 即可对此进行测试。我提供这个答案主要是因为您没有提供任何代码来测试(“某些页面的某些内容”不是要测试的代码)并且您的示例没有提供足够的上下文。
- 安装 NVDA ,适用于 Windows 的免费屏幕阅读器。
- 如果使用的是 Mac,请打开 VoiceOver。
- 如果在 Ubuntu/Gnome 上,安装 Orca
- 下载并运行 JAWS 的试用版.
- 如果在 iOS 上,请打开 VoiceOver。
- 如果在 Android 上,请打开 TalkBack。
- 哎呀,试试 Windows 上的“讲述人”吧。
有很多教程可以帮助您入门和运行。这里有一对:
然后,如果您发现您的脚本在屏幕阅读器已经解析后修改了 DOM,请探索 ARIA live regions然后看browser support .
最后,如果您使用 <noscript>
,上面关于检测脚本是否启用的示例实际上不需要脚本来工作元素:
<noscript>
<p>
Please enable JavaScript to receive this content.
</p>
</noscript>
如果浏览器启用了脚本,则不会呈现(这很好)。但是,这不会解决您要显示的脚本 block 由于其他原因(网络延迟、错误等)而失败的情况。 More on <noscript>
既然您说您正在“创建一个为盲人和视障人士提供阅读服务的网站”,那么学习这些工具以及如何使用这些工具进行测试确实是您的责任。
关于javascript - 屏幕阅读器和 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37442849/