我正在努力使下拉菜单可访问。我主要遵循以下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的选项。
任何建议都值得赞赏!
答案 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>
的讨论