ARIA 为 <li> 菜单中不是选项的元素赋予什么角色？

Question

鉴于以下情况：

<ul role=menu>
    <li role=menuitem><a href="...">Go somewhere</a></li>
    <li><span>Some info</span></li>
    <li><span>More info</span></li>
    <li role=menuitem><span class="btn">Do something</span></li>
</ul>

Some info 和 More info <li> 应该有什么 ARIA 角色？是否有好的资源可以权威地确定这一点？

Answer 1

如果您使用 HTML5：

HTML5 规范列出了 li element 可以拥有的角色：

listitem role (default - do not set), menuitem, menuitemcheckbox, menuitemradio, option, tab, treeitem or presentation.

因为你给 ul 元素 menu role ("A type of widget that offers a list of choices to the user.")，我认为这个列表应该只包含 choices（即， menuitem、menuitemcheckbox 或 menuitemradio）。但是您的 "Some info" 和 "More info" 项目似乎不代表 menu 相关的选择，因此它们可能不应该属于该列表的一部分（或者属于另一个 menuitem以防他们提供更多信息）。

角色 option（对于 select 列表）、tab（对于选项卡小部件）和 treeitem（对于树）似乎不适用于此处.默认角色 listitem 用于列表 (list) 或目录 (directory)。

如果"Some info"和"More info"只是为了展示，你可以使用presentation角色，但我想这里不是这样。

ARIA 为 <li> 菜单中不是选项的元素赋予什么角色？

What ARIA role to give for <li> elements that aren't options inside a menu?

navigation

menu

wai-aria