ARIA 角色="menuitem" 用于 <a> 或 <li>

Question

我找到了两个可能的解决方案：

1. 为 <li> 标签应用角色="menuitem"：

   <li role="menuitem"><a ...>some menuitem</a></li>

2. 为 <a> 标签应用角色="menuitem"：

   <li role="presentation"><a role="menuitem" ...>some menuitem</a></li>

我认为第二种解决方案是合乎逻辑的，但我不确定。而且我不能在更复杂的情况下使用它，只有 2 个，因为子菜单项不是 <a> 标签的子项：

<li role="menuitem"><a ...>some menuitem</a></li>
<li role="menuitem" aria-haspopup="true">
  <a ...>some menuitem with children </a>
  <div><ul>
    <li role="menuitem"><a ...>submenuitem</a></li>
    ...
  </ul></div>
</li>

是否正确？是否还有其他可能的改进？

HTML 结构由我使用的框架定义，我无法更改它。

Answer 1

所问问题的答案

如果您真正将操作系统风格的菜单应用到应用程序，那么您想将 role 放在 <a> 上。这是执行菜单项功能的项目（链接到另一个视图或页面或状态）。

所以你的第二个建议是正确的：

<li role="presentation"><a role="menuitem" ...>some menuitem</a></li>

曲线球

话虽如此，我怀疑您并不是真的想要一个操作系统风格的菜单。要了解期望的内容，请查看 WAI-ARIA Authoring Practices item 2.14 Menu or Menu bar.

通过调用这种菜单，您是在告诉屏幕的熟练用户 reader 它的行为就像操作系统菜单一样，这意味着您需要遵守下面的键盘命令（因此您必须对它们全部进行编码，ARIA 不只是让浏览器尊重它们）。

相反，考虑仅使用 <nav> 元素来保存您的列表（它将在 reader 屏幕上显示并作为页内导航的地标），保持列表语义到位（IOW，不要使用 role=presentation，因为您希望屏幕 reader 的用户知道有多少项目），并将其设置为您认为合适的视觉效果。

这样一来，您就不会在努力帮助 reader 屏幕用户（或满足清单项目）的过程中为他们创造 更糟糕的 体验。

ARIA 菜单键盘交互

• When a menu opens, or when a menubar receives focus, keyboard focus is placed on the first item. All items are focusable as described in 4.6 Keyboard Navigation Inside Components.
• Enter:
  • When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.
  • Otherwise, activates the item and closes the menu.
• Space:
  • When focus is on a menuitemcheckbox, changes the state without closing the menu.
  • When focus is on a menuitemradio that is not checked, without closing the menu, checks the focused menuitemradio and unchecks any other checked menuitemradio element in the same group.
  • (Optional): When focus is on a menuitem that has a submenu, opens the submenu and places focus on its first item.
  • (Optional): When focus is on a menuitem that does not have a submenu, activates the menuitem and closes the menu.
• Down Arrow:
  • When focus is on a menuitem in a menubar, opens its submenu and places focus on the first item in the submenu.
  • When focus is in a menu, moves focus to the next item, optionally wrapping from the last to the first.
• Up Arrow:
  • When focus is in a menu, moves focus to the previous item, optionally wrapping from the first to the last.
  • When focus is in a menubar, does nothing.
• Right Arrow:
  • When focus is in a menubar, moves focus to the next item, optionally wrapping from the last to the first.
  • When focus is in a menu and on a menuitem that has a submenu, opens the submenu and places focus on its first item.
  • When focus is in a menu and on an item that does not have a submenu, performs the following 3 actions:
    1. Closes the submenu and any parent menus.
    2. Moves focus to the next menuitem in the menubar.
    3. Either: (Recommended) opens the submenu of that menuitem without moving focus into the submenu, or opens the submenu of that menuitem and places focus on the first item in the submenu.
    Note that if the menubar were not present, e.g., the menus were opened from a menubutton, Right Arrow would not do anything when focus is on an item that does not have a submenu.
• Left Arrow:
  • When focus is in a menubar, moves focus to the previous item, optionally wrapping from the last to the first.
  • When focus is in a submenu of an item in a menu, closes the submenu and returns focus to the parent menuitem.
  • When focus is in a submenu of an item in a menubar, performs the following 3 actions:
    1. Closes the submenu.
    2. Moves focus to the previous menuitem in the menubar.
    3. Either: (Recommended) opens the submenu of that menuitem without moving focus into the submenu, or opens the submenu of that menuitem and places focus on the first item in the submenu.
• Home: If arrow key wrapping is not supported, moves focus to the first item in the current menu or menubar.
• End: If arrow key wrapping is not supported, moves focus to the last item in the current menu or menubar.
• Any key that corresponds to a printable character (Optional): Move focus to the next menu item in the current menu whose label begins with that printable character.
• Escape: Close the menu that contains focus and return focus to the element or context, e.g., menu button or parent menuitem, from which the menu was opened.
• Tab: Moves focus to the next element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers.
• Shift + Tab: Moves focus to the previous element in the tab sequence, and if the item that had focus is not in a menubar, closes its menu and all open parent menu containers.