Question

有没有办法在网站上构建键盘可访问的下拉菜单？我们当前的Web应用程序具有标准的悬停菜单，但这确实减慢了我们的数据录入员（他们习惯于桌面应用程序，其中有键盘可访问的菜单，不需要使用鼠标）。

我们想出了如何使用键盘快捷键显示菜单，但我不知道如何选择其中一个条目（例如使用菜单条目的第一个字母，就像在大多数桌面应用程序中一样）。

修改 - 指向执行此操作的网站或其他类型示例的链接非常有帮助

Answer 1

您可以将accesskey属性用于锚标记：

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

但使用它的键盘快捷键在所有浏览器中都有所不同：

Answer 2

最简单的方法是在菜单链接中添加accesskeys。它是专为此功能而设计的功能。

Answer 3

尝试使用此菜单脚本，我为明尼苏达州的州门户网站创建了一个脚本。它是键盘可访问的（用于浏览所有级别的Tab键），显示您正在遍历的路径结构，并且最多支持五个级别（包括顶级）。

目前仅限于顶级横向风格导航，但未来版本将使其可以扩展为垂直或水平方向的菜单。

它还具有有限的触控支持（iPhone / iPad有点小问题），但我正在努力获得更广泛的支持。

Answer 4

您需要在菜单打开时聆听按键，让您的代码移动所选位置。

8 =退格，13 =返回，27 = esc，40 =向下，38 =向上等。这些只是按键的ASCII值。

Answer 5

后者使用：focus伪元素。我用文章中描述的方法遇到了一些警告，但它确实有效。

前者（集）是不言自明的。

Answer 6

@ dev-null-dweller给出的公认的accesskey答案对于生产力和普通键盘用户来说似乎还可以。

但是，如果您真正关心的是可访问性，也就是说，使您的应用程序尽可能具有包容性，至少您需要实现：

语音用户将可以关闭单键快捷键，从而避免一次意外触发它们。这样，语音用户就可以充分利用为键盘用户提供单键快捷键的程序。

我认为，很难实现真正可访问的悬停和展开下拉菜单。如果可能的话，我们应避免使用此模式，而应尝试其他设计，例如目录。有关详细信息，请检查我的blog article。

Answer 7

简短的回答是肯定的 - 基于给定按键触发的javascript和jquery事件可能效果最好。