屏幕阅读器和 Javascript [英] Screen readers and Javascript

问题描述

我正在创建一个为盲人和视障人士提供阅读服务的网站，我正在使用 JavaScript(使用 jQuery)在页面加载后将一些内容打印到某些页面.

I'm creating a website for a reading service for the blind and visually impaired and I'm using JavaScript (with jQuery) to print some stuff to some of the pages after the page has loaded.

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

Will the screen reader read the content that is printed to the page with jquery after the page has been loaded?

来自 此页面 - 通常，[屏幕阅读器] 访问 DOM (文档对象模型)，他们使用浏览器 API(应用程序编程接口)来获取所需的信息."

From 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 操作库.

and we know that jQuery is a DOM manipulation library.

所以问题变成了..屏幕阅读器是否获取整个 DOM 的副本，然后解析并读取它?或者他们是否阅读 DOM，与 jQuery 工作的 DOM 相同?

So the question becomes.. do screen readers take a copy of the whole DOM and then parse it and read it? Or do they read the DOM, the same one that jQuery works on?

这是我在其中使用 JavaScript 的页面之一的示例.它使用一个函数来确定我们正在播放哪些节目，然后打印节目名称和收听链接.

Here's an example of one of the pages that I use JavaScript on. It uses a function that determines what program we have playing over the air and then prints the name of the program and a link to listen to it.

<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 的内容，那么它什么也不会读取.然后，我们开始收到一些困惑的听众的电子邮件，他们想知道正在播放"链接发生了什么.

So as you can see, if the screen reader doesn't read what the javascript/jquery prints to the #now-playing-div then it will read nothing. Then, we started getting a few emails of confused listeners wondering what happened to the Now Playing link.

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

So this morning I added this:

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

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

</script>

但如果问题不在于需要启用 JavaScript(最近的一项调查显示，99% 的屏幕阅读器用户启用了 JavaScript)，那么问题并没有得到解决，甚至变得更糟，因为现在屏幕阅读器用户会认为 JavaScript 没有启用.

But if the problem isn't that JavaScript needs to be enabled (a recent survey shows that 99% of screen-reader users have JavaScript enabled) then the problem is not solved and is made even worse because now the screen reader user would think that JavaScript is not enabled.

怎么办??

推荐答案

我需要告诉屏幕阅读器页面已更改，需要再次阅读内容.

I needed to tell the screen reader that the page has changed and that it needs to read the content again.

这是通过 ARIA 属性完成的.

我已将 aria-live="polite" 添加到我的 html 中.polite"设置告诉屏幕阅读器它应该阅读新内容，但不要打断当前所说的内容.IIRC 其他设置是 off 和 assertive.

I've added the aria-live="polite" to my html. The "polite" setting tells the screen reader that it should read the new content but not interrupt what is currently being said. IIRC the other settings are off and 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)在一个弹出窗口中，点击后弹出一条链接.他很沮丧，电话结束了:(

Right now I'm having a guy who can't see anything test out the website, he used to be able to see and he learned to use computers before he lost his eye sight. He's having a hard time with the website unfortunately. The problem is that when he gets to the page to listen to the audio, he uses his keyboard shortcuts to search for the play button but there is no play button because the play button (jplayer) is in a popup window that pops up after clicking a link. He gets frustrated and the phone call is over :(

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

So the good news is that he is able to read the content that is appended to the document via jquery, but the bad news is that there is bigger problems with the flow of the website and his expectations. This is my fault of course.

这篇关于屏幕阅读器和 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！