注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

关于支持WAI-ARIA  

2013-10-10 18:40:35|  分类: Web |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
WAI-ARIA, the Accessible Rich Internet Applications Suite, 可帮助访问Web内容和Web应用有困难的用户进行访问的方法(比如用静态的(screen-reading technologies)浏览器浏览用Ajax技术制作的动态网页)。它尤其帮助动态内容和用Ajax, HTML, JavaScript和相关技术开发的高级用户接口控件。
关于WAI-ARIA更详细内容:http://www.w3.org/WAI/intro/aria.php

关于如何支持WAI-ARIA,可以参看文档 http://www.w3.org/TR/wai-aria-practices/
文档中定义了规范和具体控件的行为:http://www.w3.org/TR/wai-aria-practices/#aria_ex
For these widgets and structures, this document describes the keyboard interaction and identifies the relevant WAI-ARIA roles, states, and properties.

关于以上组件规范的实现,Dojo做的最好,以至于其中很多例子,都是以Dojo为范例,YUI则提供了插件上的支持,不是很规范,支持也不完善。

我们以tabpanel为例, 看一下它关于键盘行为的定义:

  • Tab - only the active tab is in the tab order. The user reaches the tabbed panel component by pressing the tab key until the active tab title receives focus.
  • Left Arrow - with focus on a tab, pressing the left arrow will move focus to the previous tab in the tab list and activate that tab. Pressing the left arrow when the focus is on the first tab in the tab list will move focus and activate the last tab in the list.
  • Right Arrow - with focus on a tab, pressing the right arrow will move focus to the next tab in the tab list and activate that tab. Pressing the right arrow when the focus is on the last tab in the tab list will move focus to and activate the first tab in the list.
  • Up arrow - behaves the same as left arrow in order to support vertical tabs
  • Down arrow - behaves the same as right arrow in order to support vertical tabs
  • Control+Up Arrow - with focus anywhere within the tab panel, pressing Control+Up Arrow will move focus to the tab for that panel. This is not standard behavior - is this something we want to implement? Is it necessary if we provide a mechanism to change the active tab? Similar toControl+PageUp/Control+PageDown in Firefox to switch tabs?
  • Alt+Delete - When deletion is allowed, with focus anywhere within the tab panel, pressing Alt+Delete will delete the current tab and tab panel from the tabbed interface control. If additional tabs remain in the tabbed interface, focus goes to the next tab in the tab list. An alternative to providing a keystroke to close a tab is to provide a context menu that is associated with the tab title. When focus is on the tab, pressing Shift+F10 or pressing the right mouse button will open a context menu with the close choice
  • Control+PageUp - When focus is inside of a tab panel, pressing Control+PageUp moves focus to the tab of the previous tab in the tab list and activates that tab. When focus is in the first tab panel in the tab list, pressing Control+PageUp will move focus to the last tab in the tab list and activate that tab.
  • Control+PageDown When focus is inside of a tab panel, pressing Control+PageDown moves focus to the tab of the next tab in the tab list and activates that tab. When focus is in the last tab panel in the tab list, pressing Control+PageUpwill move focus to the first tab in the tab list and activate that tab. 

实际例子中:

OpenAjax: http://www.oaa-accessibility.org/examplep/tabpanel1/

Dojo:http://dojotoolkit.org/reference-guide/1.9/dijit/layout/TabContainer.html#dijit-layout-tabcontainer

YUI2:http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplugin_clean.html

从上面的例子中可以看出Dojo支持的最好,所以当你的web application 一开始就必须支持WAI-ARIA,最好是选择Dojo,其他框架的话,就只有自己去实现啦!


参考资料:

http://www.w3.org/TR/wai-aria-practices/#aria_ex

  评论这张
 
阅读(268)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017