ARIA角色=“菜单项"对于<a>或<li> [英] ARIA role="menuitem" for <a> or <li>

问题描述

我找到了两种可能的解决方案:

I've found two possible solutions:

1. 为

2. 标签应用 role="menuitem":

1. apply role="menuitem" for the <li> tags:

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

为 标签应用 role="menuitem":

apply role="menuitem" for the <a> tags:

<li role="presentation"><a role="menuitem" ...>一些菜单项</a></li>

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

I think that the second solution is the logical one, but I am unsure. And I cannot use it in a more complex situation, only 2, because the submenuitems are not children of the <a> tag:

<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>

正确吗?是否有其他可能的改进?

Is it correct? Is there some additional possible improvement on it?

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

The HTML structure is defined by the framework I use, I am not able to change it.

推荐答案

回答问题

如果您真正将操作系统风格的菜单应用于应用程序，那么您希望将 role 放在 上.即执行菜单项功能的项(链接到另一个视图或页面或状态).

Answer to Question Asked

If you are genuinely applying an operating-system-style menu to an application, then you want to put the role on the <a>. That is the item that performs the function of the menu item (linking to another view or page or state).

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

So your second suggestion is correct:

<li role="presentation"><a role="menuitem" ...>一些菜单项</a></li>

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

Now that being said, I suspect that you do not really want an operating-system-style menu. To see what is expected of one, take a look at the WAI-ARIA Authoring Practices item 2.14 Menu or Menu bar.

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

By invoking this kind of menu, you are telling a skilled user of a screen reader that it will behave just as an operating system menu, which means you need to honor the keyboard commands below (so you have to code them all, ARIA does not just make a browser honor them).

相反，考虑只使用 <nav> 元素来保存您的列表(它将向屏幕阅读器公布并作为页内导航的地标)，将列表语义保持在放置(IOW，不要使用 role=presentation，因为您希望屏幕阅读器的用户知道有多少项目)，并将其样式设置为您认为合适的视觉效果.

Instead, consider just using a <nav> element to hold your list (which will be announced to screen readers and act as a landmark for in-page navigation), keep the list semantics in place (IOW, do not use role=presentation as you want users of screen readers to know how many items there are), and style it to visually appear as you see fit.

通过这种方式，您不会为屏幕阅读器用户创造更糟糕的体验，以帮助他们(或满足清单项目).

This way you are not creating a worse experience for screen reader users in your effort to help them (or satisfy a checklist item).

• 当 menu 打开时，或者 menubar 获得焦点时，键盘焦点将放在第一项上.如 4.6 组件内部的键盘导航中所述，所有项目均可聚焦.
• 输入:
  • 当焦点位于具有子菜单的 menuitem 上时，打开子菜单并将焦点放在其第一项上.
  • 否则，激活项目并关闭菜单.

  • 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.

  • 当焦点位于 menuitemcheckbox 上时，无需关闭菜单即可更改状态.
  • 当焦点位于未选中的 menuitemradio 上时，不关闭菜单，检查聚焦的 menuitemradio 并取消选中任何其他选中的 menuitemradio同一组中的元素.
  • (可选):当焦点位于具有子菜单的 menuitem 上时，打开子菜单并将焦点放在其第一项上.
  • (可选):当焦点位于没有子菜单的 menuitem 上时，激活 menuitem 并关闭菜单.
  • 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.
  • 当焦点位于 menubar 中的 menuitem 上时，打开其子菜单并将焦点放在子菜单中的第一项上.
  • 当焦点在 menu 中时，将焦点移到下一项，可选择从最后一项换行到第一项.
  • 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.
  • 当焦点在 menu 中时，将焦点移到上一项，可选择从第一个到最后一个换行.
  • 当焦点位于 menubar 时，什么都不做.
  • 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.
  • 当焦点在 menubar 中时，将焦点移到下一项，可选择从最后一项换到第一项.
  • 当焦点位于 menu 和具有子菜单的 menuitem 上时，打开子菜单并将焦点放在其第一项上.
  • 当焦点位于 menu 和没有子菜单的项目上时，执行以下 3 个操作:
  • 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. 关闭子菜单和所有父菜单.
  2. 将焦点移到 menubar 中的下一个 menuitem.
  3. 要么:(推荐)打开那个 menuitem 的子菜单而不将焦点移到子菜单中，或者打开那个 menuitem 的子菜单并将焦点放在子菜单中的第一项上.
  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.

  请注意，如果 menubar 不存在，例如，菜单是从菜单按钮打开的，当焦点位于没有子菜单.

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.

• 当焦点在 menubar 中时，将焦点移到上一项，可选择从最后一项换行到第一项.
• 当焦点位于 menu 中某个项目的子菜单中时，关闭子菜单并将焦点返回到父 menuitem.
• 当焦点位于 menubar 中某个项目的子菜单中时，执行以下 3 个操作:
• 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. 关闭子菜单.
2. 将焦点移到 menubar 中的上一个 menuitem.
3. 要么:(推荐)打开那个 menuitem 的子菜单而不将焦点移到子菜单中，或者打开那个 menuitem 的子菜单并将焦点放在子菜单中的第一项上.
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.

这篇关于ARIA角色=“菜单项"对于<a>或<li>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！