Javascript和辅助功能

时间:2008-11-05 21:30:03

标签: javascript jquery ajax accessibility screen-readers

作为一名网络开发人员,我工作的一些项目属于政府保护伞,因此需遵守508 Accessibility法律,有时还需遵守W3C accessibility指南。在满足这些要求的同时,JavaScript可以在多大程度上使用?

沿着这些方向,JavaScript在多大程度上,特别是AJAX和使用像jQuery这样的包来做诸如JAWS,Orca等现代可访问性软件支持的显示模式对话,弹出窗口等等?在过去,规则类似于“如果它在Lynx中不起作用,它将不适用于屏幕阅读器。”这仍然是正确的,还是在这些领域取得了更多进展?

编辑:只要有非javascript回退,javascript就好了,但是在屏幕阅读器软件中对AJAX的支持似乎仍然不确定。如果有人对此有特定的经验,那将是最有帮助的。

6 个答案:

答案 0 :(得分:14)

如果主要关注可访问性,请始终使用符合标准(选择文档类型定义并坚持使用)HTML来启动网站。如果它是一个Web应用程序(表单提交等),请确保表单只使用HTTP GET和POST。一旦你有一个完整的网站/应用程序,你可以添加一些CSS和JavaScript,只要该网站仍在运行,其中一个或两个都关闭。

这里最重要的概念是Progressive Enhancement。您正在使用CSS / JavaScript添加额外的铃声和口哨声,但您的网站/应用程序将完全正常运行,无需

一个很好的工具,用于测试508WAI,CSS off,JavaScript off,尝试使用Firefox的Web Developer插件。

答案 1 :(得分:2)

我认为答案实际上就是你如何设计事物。 JQuery具有不显眼且易于访问的能力。诀窍是围绕AJAX调用实现冗余,因此没有JavaScript的浏览器仍然可以使用您的服务。换句话说,无论您何时拥有JavaScript响应,对话框等,都需要具有降级的等效项。

如果您有可访问性并且正在测试这两个用例(JavaScript与非JavaScript),那么您应该能够编写满足这两个受众的应用程序。

示例(为了清楚和简洁,省略了$(document).ready调用:

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

一个简单的示例,但基本上只有在支持JavaScript时才会评估Click JavaScript事件。否则,它将像普通链接一样执行并转到say_hello.htm - 您作为开发人员的工作是确保两个结果都得到适当处理。

希望有所帮助!

答案 2 :(得分:2)

渐进式增强肯定是一种途径,但不引人注目并不是所有JavaScript的可访问性,因为屏幕阅读器倾向于使用浏览器作为其工作的基础。由于这些浏览器支持JavaScript,因此页面上的脚本仍会运行。这是AJAX的一个特殊问题,因为单击页面的某个部分可能会更改屏幕阅读器不知道的页面的另一部分。

然而,随着AJAX的成熟,使其易于访问的方法正在出现。查看WAI-ARIA了解可以访问AJAX的现代方法,并Google's AxsJAX了解实现它的好方法。


答案 3 :(得分:2)

您可能还会看一下FlashAid,尽管它远非完美的解决方案。 (但是,如果您使用了渐进增强功能,并且只在Flash存在且用户未使用辅助功能API时才使用AJAX,那么您可能会有一个合理的解决方案......适用于Windows。)

从长远来看,WAI-ARIA就是解决方案。它在JAWS 10(测试版)和Firevox中得到了一定程度的支持,但对于今天的所有用户来说,它肯定是不够的。

答案 4 :(得分:0)

  

JQuery具有不显眼且易于访问的能力。诀窍是围绕AJAX调用实现冗余,因此没有JavaScript的浏览器仍然可以使用您的服务。换句话说,只要你有JavaScript响应,对话框等,你就需要有一个降级的等价物。

重用代码的一种方法是让你的“简单”页面调用一个“函数”(或者你用于服务器端逻辑的任何东西),它可以自己调用,返回JSON或XML。

例如: /static/myform.asp(在服务器端,'包含'与/ajax/myform.asp相同的逻辑) 这样你就可以使用asp作为django的模板了。

当然,使用功能齐全的铃声和口哨框架,你可以让它变得更容易(想想在django中使用相同视图的html和xml'模板'),但同样的想法适用。

完成此操作后,使用jQuery迭代文档就绪的所有锚点,并使用锚点自己的链接添加onclick事件,重新启动/ static / ajax /可以让您的生活更轻松。

任何人都可以认为这会造成太多负担吗?想知道这个“设计理念”是否存在严重缺陷。

答案 5 :(得分:0)

我认为,虽然可以接受,但现在已经过时了。 (在撰写此答案时,它实际上已经十岁了。WCAG2.1已于几周前完成定稿...)

W3C WAI-Authoring Design Patterns Practices文档包括需要 javaScript以便将正确的语义,状态和角色传达给辅助技术的常见小部件的各种示例。

只要您谨慎地向屏幕阅读器提供有关页面内更新在用户激活之前的含义的语义提示,就可以使AJAX变得可访问。您可能还需要将随后实际更改的内容通知屏幕阅读器,例如咏叹调活跃的地区可能会宣布“已加载20个新商品”或其他内容。这是通过javaScript实现的。

如果您的可访问性知识停止在“渐进式增强”上,并且您认为上面接受的答案是该职位的依据,那么您很可能需要更新。这些天事情发展很快。