我们如何改善单页应用程序菜单的可访问性

使用React路由器为React PWA建立可访问的主菜单提出了意外的挑战。本文详细介绍了我们创建键盘和鼠标友好型菜单的旅程，重点是克服单页应用程序（SPA）中的常见可访问性陷阱。

我们的目标是通过键盘和鼠标导航的菜单，允许用户通过顶级和子菜单项目（在悬停/焦点上显示），并具有清晰的焦点指示器。

使用CSS visibility显示/隐藏子菜单的初步尝试对键盘用户失败，因为具有visibility: hidden仍然是无形的。我们切换到操纵position属性：

.menu-item {
  位置：相对；
}

.sub-menu {
  位置：绝对；
  左：-100000px; / *屏幕外定位 */
}

.menu-item：悬停.sub-menu，
.menu-item：焦点.sub-menu，
.menu-item：focus-within .sub-menu {
  左：0;
}

这改进了键盘导航，但引入了一个新问题：选择后菜单保持打开状态（单击或选项卡）。这是因为选定的项目保留了焦点，并且温泉不会触发整页重新加载以清除焦点。此外，菜单交互后，通过键盘无法访问“跳转到内容”链接。

我们第一次尝试使用document.activeElement.blur()在React Router的onClick Link中解决此问题：

const clearfocus =（）=> {
  document.activeElement.blur（）;
};

当单击后关闭菜单时，它并未解决键盘导航问题或维护预期的“跳转到内容”链接行为。

为了解决这个问题，我们通过编程性将重点强加于DOM中的“跳转到内容”链接上方的隐形，非相互作用的锚点元素：

const app =（）=> {
  const focusEtref = react.useref（）;
  // ...其他代码...
  返回 （

      <a aria-hidden="true" href="https://www.php.cn/link/7c127e0c66f06e58c7c7310a7c6fa488" ref="{focusResetRef}" tabindex="-1" style="{{" position: top:>重点重置</a>
      <a classname="jump-to-content-a11y-styles" href="https://www.php.cn/link/3292c5c2ca71351a9406a9614e147ad3">跳到内容</a>
      <menu onselectmenuitem="{handleResetFocus}"></menu>
      {/ * ... App的其余部分 */}
    &gt;
  ）；
};

这确保了菜单选择后，下一个选项卡停止是“跳转到内容”链接。除程序化焦点外， aria-hidden ， tabIndex和样式确保了该元素仍然是无形的和非相互作用的。

为了进一步增强用户体验，尤其是对于大型菜单，我们添加了一个clearHover状态和一个超时，以在选择后立即清除悬停状态，以确保菜单始终如一地关闭，无论输入方法如何。

我们的最终实现使用了React上下文，以更轻松地管理组件。尽管我们缺乏现实世界的用户数据，但我们的解决方案为我们的水疗中心中的键盘和鼠标用户提供了一致且可访问的体验，从而模仿了整页重新加载的行为。我们欢迎对这种方法的反馈。

以上是我们如何改善单页应用程序菜单的可访问性的详细内容。更多信息请关注PHP中文网其他相关文章！