在 web 应用程序中，什么键盘快捷键适合将焦点移动到页面菜单按钮

Question

我想为使用鼠标有内在困难的我的网站用户提供支持。 这包括有视觉或运动缺陷的人。

我没有保留占据每个页面顶部的 1980 年代风格的菜单栏，而是将该信息移动到一个下拉菜单中，该菜单通过选择具有汉堡包常见外观的页面菜单按钮来激活。 如您所知，汉堡包图标是由 Norm Cox 为世界上第一个图形用户界面 Xerox Star 设计的。 我搜索了一长串常用键盘快捷键，但找不到任何推荐用于在 web 应用程序中选择此类按钮的快捷键。 请注意，这不是浏览器工具栏中浏览器的汉堡包按钮，它是显示的 web 页面的一部分。

    <button id="menuButton" class="left"
        title="Main Page Menu" aria-hidden="true"
        aria-haspopup="menu"
        aria-label="Open the menu" aria-expanded="false">
      <div class="menuicon"></div>
      <div class="menuicon"></div>
      <div class="menuicon"></div>
    </button>

menuicon 的 CSS 是：

div.menuicon {
            width: 35px;
            height: 5px;
            background-color: black;
            margin: 6px 0;
            border-radius: 2.5px;
            }

要查看这是什么样子，请尝试https://www.jamescobban.net/FamilyTree/nominalIndex.php 。

对于无法使用鼠标访问此按钮的人，我能看到的唯一方法是从具有初始焦点的表单元素 [Shift-]tab 直到到达页面菜单按钮。 这似乎不必要地麻烦。 显然，我必须避免使用那些具有标准含义的键盘快捷键。 例如，我不能使用 Home 或 Alt-Home。 但理想情况下，它应该是我的客户已经知道的键盘快捷键，因为它被其他工具使用。

Answer 1

如果你真的想改善这些用户的体验，我建议首先不要隐藏主菜单项。

通过隐藏网站的主导航，可发现性几乎减少了一半。 此外，任务时间更长，任务难度增加。

尼尔森诺曼集团，2016

这将使您有机会使菜单项也变大，从而提高运动障碍的可用性。

捷径

ARIA 标准有一长节是关于键盘快捷键的。

在 HTML 中， accesskey属性允许定义单个字母，并将修改键的处理留给浏览器和操作系统。

<button aria-label="Menu" accesskey="m">
<!-- OR -->
…
<a href="/" accesskey="h"><u>H</u>ome</a> 

这在理论上很棒，但在实践中存在一些问题。

我仍然会选择 go，因为这是我们目前拥有的最佳选择。 您不想在代码中处理平台约定。

您甚至可以使用accessKeyLabel属性检索浏览器最终分配的组合键，但浏览器支持不是很好。

button.title += ` [${button.accessKeyLabel || button.accessKey}]`;

如果您使用单字符快捷方式，则需要提供一种机制来更改这些快捷方式，以防止它们干扰其他 AT 快捷方式：

了解成功标准 2.1.4：字符快捷键

渲染菜单项足够大

在访问链接页面时，我注意到实际的菜单项只有 17 像素高，并且它们之间几乎没有空间。

拥有足够大的点击和触摸目标对于有运动障碍的用户尤为重要。

根据WCAG 标准 2.5.5 目标大小要求，目标应至少为 44×44 px 。 您会在Android 的指南和Apple 的人机界面指南中找到几乎相同的建议。