JavaScript与无障碍性

Question

作为一名网络开发人员，我所从事的许多项目都属于政府范畴，因此受到508无障碍法的约束，有时还需要遵循W3C无障碍指南。在满足这些要求的同时，JavaScript可以使用到什么程度？

在这方面，现代无障碍软件（如JAWS、Orca等）是否支持JavaScript，特别是AJAX和使用jQuery等包来显示模态对话框、弹出窗口等操作？过去，规则大致是“如果Lynx无法使用，那么屏幕阅读器也无法使用”。这是否仍然正确，或者在这些领域是否已经取得更多进展？

编辑：共识似乎是只要有非JavaScript的备选方案，JavaScript就没问题，但对于屏幕阅读器软件对AJAX的支持仍然不确定。如果有人有具体经验，那将非常有帮助。

- cdeszaq

Answer 1

如果可访问性是您的首要关注点，请始终使用符合标准的（选择文档类型定义并遵循）HTML 开始网站。 如果是 Web 应用程序（表单提交等），请确保表单可以仅使用 HTTP GET 和 POST 正常工作。完成整个网站/应用程序后，您可以添加 CSS 和 JavaScript 的部分内容，只要站点仍然正常工作，即使没有其中一个或两者。

最重要的概念是渐进增强。 您正在使用 CSS/JavaScript 添加其他附加功能，但是您的网站/应用程序 不需要 这些才能正常运行。

测试508、WAI、关闭 CSS 和 JavaScript 的一个好工具是在 Firefox 中使用Web Developer插件。

- jakemcgraw

Answer 2

请参考以下链接：

• http://juicystudio.com/article/making-ajax-work-with-screen-readers.php
• http://juicystudio.com/article/improving-ajax-applications-for-jaws-users.php
• http://www.paciellogroup.com/blog/?p=15
• http://www-03.ibm.com/able/resources/ajaxaccessibility.html

同时，您也可以查看FlashAid，但它并不是完美的解决方案。如果您使用渐进增强，并且仅在Flash存在且用户未使用辅助功能API时使用AJAX，那么您可能会有一个合理的解决方案...适用于Windows系统。

从长远来看，WAI-ARIA是解决方案。它在JAWS 10（beta）和Firevox中得到了一定程度的支持，但对于今天的所有用户来说肯定还不够。

- Cugel

Answer 3

渐进增强肯定是一种方式，但对于 JavaScript 可访问性来说，不影响用户体验并不是全部。屏幕阅读器通常以浏览器为基础进行工作，因此这些浏览器支持 JavaScript，页面上的脚本仍将运行。这在 AJAX 中是一个特别的问题，因为单击页面的某一部分可能会更改屏幕阅读器不知道的另一部分。

然而，随着 AJAX 的发展，出现了使其可访问的方法。请查看 WAI-ARIA 以了解现代方法，以使 AJAX 可访问，并查看 Google 的 AxsJAX 以实现良好的方式。

- Phil

Answer 4

我认为关键在于你的架构方式。JQuery有不显眼的能力，因此易于使用。诀窍是要在你的AJAX调用周围设置冗余，以便没有JavaScript的浏览器仍然可以使用你的服务。换句话说，无论何时你有JavaScript响应、对话框等内容，你都需要有一个降级版本。

如果你考虑到可访问性，并且同时为两种情况（JavaScript vs.非JavaScript）进行适当的测试，那么你应该能够编写适合两个受众的应用程序。

示例（为了简洁明了省略了$(document).ready调用）：

<script>
  $("#hello").click(function(){
    alert("Hi");
  });
</script>
<a href="/say_hello.htm" id="hello">Say Hello</a>

这只是一个简单的示例，如果支持JavaScript，它将仅评估点击JavaScript事件。否则，它将像普通链接一样执行并转到say_hello.htm - 作为开发人员，您的工作是确保适当处理这两种情况。

希望这有所帮助！

- danpickett

---

你的观点是正确且表达得很清楚，但是这个示例脚本实际上会失败，因为它在元素存在之前尝试分配事件处理程序。 - Andrew Hedges

是的，我为了简洁起见省略了$(document).ready。不过你眼力真好！ - danpickett

Answer 5

JQuery具备无侵入性和可访问性。诀窍在于在您的AJAX调用周围具有冗余，这样没有JavaScript的浏览器仍然可以使用您的服务。换句话说，无论您在哪里使用JavaScript响应、对话框等，都需要具有退化等效。

其中一种重复使用代码的方法是，让您的“简单”页面调用一个“函数”（或者您用于服务器端逻辑的任何内容），该函数可以被自己调用，返回JSON或XML。

例如： /static/myform.asp（在服务器端，“包括”与/ajax/myform.asp相同的逻辑） 这样你就可以像Django的模板一样使用asp。

当然，使用功能齐全的框架会使这个过程更容易（想象一下在Django中为同一视图拥有html和xml“模板”），但是相同的思路适用。

完成此操作后，使用jQuery在文档准备就绪时遍历所有锚点，并使用锚点自己的链接添加onclick事件，替换/static/ajax/可以使您的生活更轻松。

有人能想到这是否会带来太大负担？想知道这个“设计思路”是否存在任何严重缺陷。

- voyager

Answer 6

我认为接受的答案虽然在当时还不错，但现在已经过时了。（写这个答案时已经过去十年了。WCAG 2.1几周前才最终确定...）

W3C WAI-Authoring Design Patterns Practices文档包括各种常见控件的示例，这些控件需要使用javaScript才能向辅助技术传达正确的语义、状态和角色。

只要你小心地为屏幕阅读器提供有关页面更新的相关语义线索，在用户激活它之前，AJAX就可以变得易于访问。你可能还需要在更新后通知屏幕阅读器实际发生了哪些变化，例如，一个aria-live区域可能会宣布“加载了20个新项目”或其他内容。这是通过javaScript实现的。

如果你的可访问性知识止步于“渐进增强”，并且你认为上面接受的答案是支持这种观点的理由，那么你可能需要进行更新。现在这些事情正在迅速发展。

- brennanyoung