可访问的下拉菜单:<li>有多个子级

时间:2019-09-25 00:07:10

标签: javascript html accessibility wcag

我正在努力使下拉菜单可访问。我主要遵循以下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的选项。

任何建议都值得赞赏!

1 个答案:

答案 0 :(得分:0)

重要说明 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角色。这样会更容易,您可以使用input[type='radio']之类的任何标准HTML元素,这些元素将本机处理左右键:

<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

的讨论