如何使这个JavaScript应用程序可访问？

时间：2011-05-24 12:55:25

标签： javascript accessibility web-applications

我正在制作一个FTP客户端，它将非常依赖于javascript。

浏览文件时，您可以使用箭头键进行导航。我在当前选择的文件名中添加了一个.selected类，但是如何将其清除到屏幕阅读器？如何让他们专注于当前的文件名？

最好的方法是将每个文件名设为锚点，当选择文件名时，它会获得焦点吗？而且，我在哪里可以找到关于Web应用程序可访问性的良好指南？我知道W3C有一个内容可访问性清单，但大多数要点都不适用于网络应用程序。

5 个答案:

答案 0 :(得分：1)

最简单的方法可能是拥有一系列复选框，每个复选框都有一个唯一的ID，并与标签配对：

<input id="chk01" type="checkbox"/><label for="chk01">File1.txt</label>

使用这种技术，输入正在为您公开选择的工作，而标签负责将其与名称相关联：当焦点转到复选框时，屏幕阅读器将自动读出相关标签文本。它都是纯HTML，没有什么特别要求。您可以自由添加选择着色 - 只要您将其与复选框状态保持同步。

可以用A标签做类似的事情;您可以使用WAI-ARIA属性在项目上设置role =“listitem”和aria-selected =“true”/“false”，并在父容器上使用role =“list”。然后，屏幕阅读器将这些作为列表项而不是链接读出。然而，这种技术更为复杂，并且确实需要使用实际的屏幕阅读器（例如JAWS或可自由使用的NVDA）进行测试，以确保其正常工作。

答案 1 :(得分：1)

我建议您使用javascript框架与WAI-ARIA一起帮助实现可访问性。有关可访问jQuery的示例，请参阅 https://github.com/fnagel/jQuery-Accessible-RIA/wiki以及使用WAI-ARIA进行可访问拖放的示例 http://dev.opera.com/articles/view/accessible-drag-and-drop/

答案 2 :(得分：1)

首先 - 确保涵盖您的基础知识。 Web内容可访问性指南（WCAG）不能很好地涵盖交互性，但其许多要点仍适用于Web应用程序。

下一步 - 了解可访问富Internet应用程序的ARIA标准。这将涵盖您正在尝试的许多交互性。

一些相关链接：

有很多关于辅助功能的书籍，这些书籍往往过时了。可悲的是，我不知道ARIA有任何书籍长度的讨论 - 它仍处于开发阶段。尝试阅读规格。

最后但并非最不重要 - 获取屏幕阅读器并学会使用它。正式遵守可访问性标准是很好的，但没有什么比真正的测试更好。 NVDA是一款免费且功能齐全的屏幕阅读器，对ARIA提供了不错的支持：http://nvda-project.org/

希望这有帮助。

答案 3 :(得分：1)

  

浏览文件时，您可以使用箭头键进行导航。

在忽略此功能的先前答案的基础上，将整个窗口小部件包装在一个带有role = application的div中。这将通知屏幕阅读器将使用JavaScript，并允许用户在使用屏幕阅读器时使用箭头键导航窗口小部件。下面的摘录详细说明了如何设计可访问的小部件。是的，这不是最简单的解决方案，但它是最完整的。随便挑选。

描述：一个小部件，允许用户从选项列表中选择一个或多个项目。 （listbox）。键盘交互：
  • 选项卡：当列表被选中时，如果尚未选择任何其他项，请选择第一项。第二个选项卡将使用户从窗口小部件进入页面上的下一个制表位。
  • 向上/向下箭头在列表中上下导航。
  • Shift +向上箭头和 Shift +向下箭头移动并扩展选择。
  • 键入字母或多个字母进行导航（同一个字母以每个项目开头，不同的字母转到以整个字符串开头的第一个项目）。
  • Shift + F10 ：如果当前项目具有关联的上下文菜单，则此组合键将启动该菜单。
  • 的选择                   
    • 复选框 - 空格切换复选框（如果列表项是可检查的）
    • 可选列表项                       
      • Space 充当切换选择和取消选择当前项目。如果已选择先前的项目，它还会取消选择它们并选择当前项目。
      • Shift + Space 从最后选择的项目中选择连续项目到当前项目。
      • Ctrl +箭头移动而不选择。
      • Ctrl + Space 选择不连续的项目，并将当前所选项目添加到之前选定的所有项目中。
      • Ctrl + A - 建议使用复选框，链接或其他方法来选择全部。 Ctrl + A 键可用于提供快捷键。
                          
                    
              当列表未聚焦时，建议开发人员使用不同的样式进行选择（提示：非活动选择通常以较浅的背景颜色显示）。

WAI-ARIA角色，状态和属性：
  • 列表框容器的角色为listbox。
  • 列表框中的每个条目都应包含角色option，应该是listbox的DOM子级。
  • 如果不是列表框的DOM子级，则应在列表框中引用aria-owns。
  • 如果列表框中的所有项目都不是列表框的DOM子项，请相应地设置aria-setsize和aria-posinset;否则，用户代理无法为上下文计算此信息。
  • 如果列表框不是另一个窗口小部件的一部分，则它应该在列表框中引用可见的aria-label aria-labelledby。
  • 每个选定的列表项都应该有aria-selected =“true”。

示例：

Single select listbox

Listbox in an iframe

有关示例和更多信息，请参阅authoring practices for accessible widgets。

答案 4 :(得分：0)

据我所知，YUI对ARIA有很多支持。

见：

http://developer.yahoo.com/yui/theater/video.php?v=kloots-yuiconf2009-a11y

确保您的解决方案符合ARIA：

http://www.w3.org/WAI/intro/aria.php

HTH

相关问题
最新问题