有没有办法在网站上构建键盘可访问的下拉菜单?我们目前的网络应用程序有标准的悬停菜单,但这实际上减慢了我们的数据录入员(习惯于桌面应用程序,其中有键盘可访问的菜单并且不需要使用鼠标)。键盘可访问的网页下拉菜单?
我们想出了如何使用键盘快捷键显示菜单,但我不确定如何选择其中一个条目(例如通过使用菜单条目的第一个字母,就像在大多数桌面应用程序中一样)。
编辑 - 一个链接到一个网站,这样做,或一些其他类型的实例,将是非常有益的
有没有办法在网站上构建键盘可访问的下拉菜单?我们目前的网络应用程序有标准的悬停菜单,但这实际上减慢了我们的数据录入员(习惯于桌面应用程序,其中有键盘可访问的菜单并且不需要使用鼠标)。键盘可访问的网页下拉菜单?
我们想出了如何使用键盘快捷键显示菜单,但我不确定如何选择其中一个条目(例如通过使用菜单条目的第一个字母,就像在大多数桌面应用程序中一样)。
编辑 - 一个链接到一个网站,这样做,或一些其他类型的实例,将是非常有益的
您可以使用锚标记accesskey
属性:
<a href="something.html" accesskey="s">[S]omething</a>
但键盘快捷键来使用这个不同在所有浏览器:
简单的答案是肯定的 - 的JavaScript和jQuery事件燃煤基于给定按键大概会最好的工作。
你需要监听按键,而菜单是开放的,有你的代码移动选定的位置。
8 = backspace,13 = return,27 = esc,40 = down,38 = up等。这些只是按键的ASCII值。
谢谢 - 你见过任何有无障碍菜单的网站吗?我很想看到一些行动中的事情(甚至更好,已有的插件或便携式代码) – 2010-10-15 19:43:26
是的,我已经写了一个自动完成程序来完成此操作。这并不困难。对不起,我不能给你的代码:( – 2010-10-15 19:55:19
最简单的方法是将accesskeys添加到菜单链接。这是专为该功能设计的功能。
关键事件:
http://api.jquery.com/keypress/
http://api.jquery.com/keydown/
http://api.jquery.com/keyup/
CSS菜单,选项卡访问:
http://carroll.org.uk/sandbox/suckerfish/bones2.html
后者的工作原理是利用:重点伪元素。我遇到了文章中描述的方法的一些警告,但它的工作原理。
前者(set)是不言自明的。
给这个菜单脚本一试,一个是我为我们在明尼苏达州的门户。它可以通过键盘访问(在所有级别中导航的Tab键),显示您正在穿越的路径结构,并且最多支持五个级别(包括顶级级别)。
Top Menu: keyboard-accessible jquery menu。
它目前仅限于顶级横向导航,但未来版本将使其可扩展到垂直或水平导向菜单。
它也具有有限的触摸支持(与iPhone/iPad的一个小错误),但我正在努力,以及得到更广泛的支持。
很酷,谢谢,我会检查出来! – 2012-08-30 01:02:48
是的,我意识到这将需要JavaScript的工作(因此为什么我标记它的JavaScript)。你有一个这样的网站的例子吗? – 2010-10-15 19:42:03