如何关闭汉堡菜单键盘上的可访问性重点出来



我正试图在我的一个盲人网站中实现键盘可访问性。我的网站上有汉堡包菜单。当使用";选项卡";按键盘上的键,焦点移动到此汉堡菜单项。在点击";输入";,它将膨胀,同时按下";选项卡";再次关键,它是在打开的汉堡包菜单元素中导航。一旦到达最后一个项目,它将专注于内容。

在这种情况下,是否可以在用户使用键盘"将注意力集中在汉堡菜单上;选项卡";按键?

此处为示例https://www.impressivewebs.com/demo-files/hamburger-menu/.对焦后是否可以关闭侧菜单?

简短回答

这是可能的,但这不是一个好主意。你最好用一个经典的切换按钮。

更长的答案

对于盲人来说,专注地做一些事情本质上意味着它在没有通知的情况下发生。这可能很难理解,充其量只是一个混乱的来源。选项卡导航中连续到达的元素及其顺序不应该在没有明确意识的用户操作的情况下发生更改。

如果菜单的显示和消失方式不是对称的,那就更令人困惑了(在你的情况下,显式按回车键和焦点向外键(。两者都应该是对称的。这意味着,无论:

  • 相同的按钮可打开和关闭菜单
  • 菜单在离开菜单前的链接时显示(聚焦(,在离开菜单的最后一项时消失(聚焦(

在实现第二个方面有几个重要的缺点:

  • 选项卡并不是屏幕阅读器用户在页面上导航的唯一方式。这具体意味着,菜单可能没有明显的原因而无法访问,也可能没有任何方法使其出现
  • 只有键盘的视觉用户可能会对菜单的意外出现/消失感到惊讶
  • 从技术上讲,这并不像看上去那么容易:你必须从两个方向来思考(tab和shift+tab(

切换按钮没有这些问题。正确实现,它总是可访问的,由用户显式触发,并具有可预测的行为。此外,它的实现要简单得多。

总之,经典的切换按钮是迄今为止最简单、最安全的解决方案,无论是对您还是各种用户来说。

最新更新