可访问的下拉菜单： <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"(在按钮上时，我希望屏幕阅读器宣布，除了在菜单中的第一项之外，它是列表项中选项 1 中的 3 个。

任何建议不胜感激！

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 键在列表项内的按钮之间移动。

您可以在 WAI ARIA 创作实践中查看menu角色项的键盘交互申请，其中不仅包括左键和右键。因此，您将不得不依赖重要的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>

关于"菜单不用于网站"主题的讨论