2010-10-15 60 views
7

有没有办法在网站上构建键盘可访问的下拉菜单?我们目前的网络应用程序有标准的悬停菜单,但这实际上减慢了我们的数据录入员(习惯于桌面应用程序,其中有键盘可访问的菜单并且不需要使用鼠标)。键盘可访问的网页下拉菜单?

我们想出了如何使用键盘快捷键显示菜单,但我不确定如何选择其中一个条目(例如通过使用菜单条目的第一个字母,就像在大多数桌面应用程序中一样)。

编辑 - 一个链接到一个网站,这样做,或一些其他类型的实例,将是非常有益的

回答

7

您可以使用锚标记accesskey属性:

<a href="something.html" accesskey="s">[S]omething</a> 

但键盘快捷键来使用这个不同在所有浏览器:

  • IE键:Alt + ACCESSKEY,输入
  • 火狐:ALT + SHIFT + ACCE sskey
  • 歌剧:Shift + Esc键+ ACCESSKEY
  • 键:Alt + ACCESSKEY
-2

简单的答案是肯定的 - 的JavaScript和jQuery事件燃煤基于给定按键大概会最好的工作。

+0

是的,我意识到这将需要JavaScript的工作(因此为什么我标记它的JavaScript)。你有一个这样的网站的例子吗? – 2010-10-15 19:42:03

0

你需要监听按键,而菜单是开放的,有你的代码移动选定的位置。

8 = backspace,13 = return,27 = esc,40 = down,38 = up等。这些只是按键的ASCII值。

+0

谢谢 - 你见过任何有无障碍菜单的网站吗?我很想看到一些行动中的事情(甚至更好,已有的插件或便携式代码) – 2010-10-15 19:43:26

+0

是的,我已经写了一个自动完成程序来完成此操作。这并不困难。对不起,我不能给你的代码:( – 2010-10-15 19:55:19

1

最简单的方法是将accesskeys添加到菜单链接。这是专为该功能设计的功能。

1

给这个菜单脚本一试,一个是我为我们在明尼苏达州的门户。它可以通过键盘访问(在所有级别中导航的Tab键),显示您正在穿越的路径结构,并且最多支持五个级别(包括顶级级别)。

Top Menu: keyboard-accessible jquery menu

它目前仅限于顶级横向导航,但未来版本将使其可扩展到垂直或水平导向菜单。

它也具有有限的触摸支持(与iPhone/iPad的一个小错误),但我正在努力,以及得到更广泛的支持。

+0

很酷,谢谢,我会检查出来! – 2012-08-30 01:02:48