如何在键盘可访问性焦点上关闭汉堡菜单

Posted 2023-03-06

【中文标题】如何在键盘可访问性焦点上关闭汉堡菜单

【英文标题】：How to close hamburger menu on keyboard accessibility focus out

【发布时间】：2021-08-15 14:16:29

【问题描述】：

我正在尝试在我的一个网站中为盲人实现键盘可访问性。我的网站上有一个汉堡菜单。使用键盘上的“Tab”键导航时，焦点将移至此汉堡菜单项。单击“Enter”时，它会展开，再次按“Tab”键时，它会在打开的汉堡菜单元素中导航。一旦到达最后一个项目，它将专注于内容。

在这种情况下，一旦用户使用键盘“Tab”键按下，是否可以关闭汉堡菜单？

以https://www.impressivewebs.com/demo-files/hamburger-menu/ 为例。对焦后可以关闭侧边菜单吗？

【问题讨论】：

请在此处发布您的代码以供审核。我查看了您的网址，我可以看到出现的导航菜单有一个无序列表，但没有任何必需的角色，并且打开的导航不在导航元素中，它在 main 中，我认为这很令人困惑但不会失败我在上面运行的 SiteImprove chrome 扩展测试。有关更多信息，请参见此处：w3.org/WAI/tutorials/menus/application-menus。并添加跳转链接直接进入页面主要内容并跳转菜单：w3.org/TR/WCAG20-TECHS/G1

【参考方案1】：

简答

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

更长的答案

对于盲人来说，专注于做某事本质上意味着它会在没有通知的情况下发生。它可能难以理解，充其量只是混淆的来源。 在标签导航中连续到达的元素及其顺序不应在没有明确有意识的用户操作的情况下发生变化。

如果菜单出现和消失的方式不是对称的（在您的情况下，显式按下回车键而不是聚焦），那就更令人困惑了。 两者都应该是对称的。这意味着，是否：

同一个按钮可以打开和关闭菜单 离开链接时菜单显示在菜单之前（焦点进入），离开菜单的最后一项时消失（焦点离开）

实施第二个有几个重要的缺点：

选项卡并不是屏幕阅读器用户在页面上导航的唯一方式。这具体意味着菜单可能无缘无故无法访问，并且可能没有任何方法可以使其显示。 仅使用键盘且有视力的用户可能会对菜单的意外出现/消失感到惊讶 从技术上讲，它并不像看起来那么容易：您必须从两个方向（tab 和 shift+tab）考虑它

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

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

【讨论】：

如果切换按钮打开类似模式的菜单，您认为将菜单切换按钮与菜单项放在相同的选项卡/shift+选项卡循环中会更好还是焦点循环？从最后一个菜单项到第一个菜单项，用户应该只是猜测按 Esc 退出循环？当焦点位于菜单切换按钮中时，这将改变选项卡的位置，具体取决于按钮是否被按下。

事实上，最好的办法是两者兼而有之：对转义作出反应并在菜单中设置按钮，这样您就可以覆盖从新手到高级用户的整个范围。但是，如果你必须选择其中一个，逃避是很常见的，所以我会说两者都可以接受。请注意，当按下 Escape 时，焦点应该返回到切换按钮。