草庐IT

javascript - 屏幕阅读器和 Javascript

coder 2024-05-14 原文

我正在创建 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 未启用。

怎么办？？

最佳答案

您无需了解屏幕阅读器如何解析 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/

阅读器javascriptnoreferrernoopenerjqueryaccessibilityscreen-readersjaws-screen-reader

有关javascript - 屏幕阅读器和 Javascript的更多相关文章

  1. ruby - 寻找通过阅读代码确定编程语言的ruby gem？ - 2

    几个月前，我读了一篇关于ruby​​gem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：

  2. 屏幕录制为什么没声音？检查这2项，轻松解决 - 2

    相信很多人在录制视频的时候都会遇到各种各样的问题，比如录制的视频没有声音。屏幕录制为什么没声音？今天小编就和大家分享一下如何录制音画同步视频的具体操作方法。如果你有录制的视频没有声音，你可以试试这个方法。 一、检查是否打开电脑系统声音相信很多小伙伴在录制视频后会发现录制的视频没有声音，屏幕录制为什么没声音？如果当时没有打开音频录制，则录制好的视频是没有声音的。因此，建议在录制前进行检查。屏幕上没有声音，很可能是因为你的电脑系统的声音被禁止了。您只需打开电脑系统的声音，即可录制音频和图画同步视频。操作方法：步骤1：点击电脑屏幕右下侧的“小喇叭”图案，在上方的选项中，选择“声音”。 步骤2：在“声

  3. UE4 源码阅读：从引擎启动到Receive Begin Play - 2

    一、引擎主循环UE版本：4.27一、引擎主循环的位置：Launch.cpp:GuardedMain函数二、、GuardedMain函数执行逻辑：1、EnginePreInit：加载大多数模块int32ErrorLevel=EnginePreInit(CmdLine);PreInit模块加载顺序：模块加载过程：（1）注册模块中定义的UObject，同时为每个类构造一个类默认对象（CDO，记录类的默认状态，作为模板用于子类实例创建）（2）调用模块的StartUpModule方法2、FEngineLoop::Init()1、检查Engine的配置文件找出使用了哪一个GameEngine类（UGame

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby-on-rails - 在 irb 中阅读文档 - 2

    我怀念ipython的一件事是它有一个?为特定功能挖掘文档的运算符。我知道ruby​​有一个类似的命令行工具，但是我在irb中调用它非常不方便。ruby/irb有类似的东西吗？ 最佳答案 Pry是IPython的Ruby版本，它支持?命令来查找有关方法的文档，但语法略有不同:pry(main)>?File.dirnameFrom:file.cinRubyCore(CMethod):Numberoflines:6visibility:publicsignature:dirname()Returnsallcomponentsofthef

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  9. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  10. ruby - 如何将 Vim 中的 "expand"文本转换成一种易于阅读的方式？ - 2

    我经常使用嵌套数据结构，很多时候我必须从控制台手动分析它们。问题是它们全部打印在一行中。是否有一种简单的方法可以根据{,[,],}和逗号重新构造数据结构的显示，使其看起来像Ruby的pretty_print输出？ 最佳答案 :%s/\([{,]\)/\1\r/gggVG=:setft=ruby呜呜呜 关于ruby-如何将Vim中的"expand"文本转换成一种易于阅读的方式？，我们在StackOverflow上找到一个类似的问题： https://stacko

随机推荐