可访问的下拉菜单：<li> 有多个子项

Question

我正在努力制作可访问的下拉菜单。我主要关注这个 W3 示例：https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html#

但是，我的菜单结构不同寻常。我的一些列表项包含多个按钮，这些按钮在列表项中水平对齐。

<ul role="menu">
	<li role="none">Header</li>
	<li role="none">
		<button role="menuitem">Option A</button>
		<button role="menuitem">Option B</button>
		<button role="menuitem">Option C</button></li>
	<li role="none">
		<button role="menuitem">Button Foo</button>
	</li>
</ul>

有没有推荐的方法让这个 WCAG 可以访问？ 我希望用户使用 LEFT/RIGHT 键在列表项内的按钮之间移动。

此外，目前我的屏幕阅读器 (NVDA) 将通知用户列表中有 4 个项目（因为有 4 个元素带有 role="menuitem" 标签）。理想情况下，我希望屏幕阅读器让用户知道列表中只有 2 个项目，然后当他在带有兄弟姐妹的按钮上时（例如我的示例中的“选项 A”），我希望屏幕阅读器宣布，除了在菜单的第一项之外，它是列表项中 3 个选项中的第 1 个。

感谢任何建议！

Answer 1

重要提示：menu 角色和模式旨在用于应用程序。如果你想做一个简单网站的菜单，你应该使用navigation角色

---

现在回答你的问题...

您正在描述 menuitemradio 角色的用途：（注意：如果不同的选项不是独占的，这也可能是 menutitemcheckbox）

<ul role="menu">
    <li role="none" id="group_header">Header</li>
    <li role="group" aria-describedby="group_header">
        <button role="menuitemradio">Option A</button>
        <button role="menuitemradio">Option B</button>
        <button role="menuitemradio">Option C</button></li>
    <li role="none">
        <button role="menuitem">Button Foo</button>
    </li>
</ul>

我希望用户使用 LEFT/RIGHT 键在列表项内的按钮之间移动。

您可以查看menu 角色项on the WAI ARIA Authoring practices 的键盘交互要求，其中不仅包括左右键。因此，您将不得不为您的应用程序依赖重要的 javascript 开发。

---

注意：请记住，如果您正在设计一个网站（因此您的菜单不会属于application 角色），您应该使用navigation 角色。这会更容易，您可以使用任何标准的 HTML 元素，例如 input[type='radio']，它们将本机处理左右键：

<ul role="navigation" aria-label="Menu">
   <li><div id="group_header">Header</div>
     <div role="group" aria-describedby="group_header">
        <label><input type="radio" name="item" /> Option A</label>
        <label><input type="radio" name="item" /> Option B</label>
        <label><input type="radio" name="item" /> Option C</label>
     </div>
   </li>
   <li><button>Button Foo</button></li>
</ul>

关于"menu not for website" theme的讨论