列出子项的 WAI-ARIA 容器角色

Question

使用 ChromeVox 扩展程序作为屏幕阅读器，我注意到带有 role="menu" 的菜单是 ul 标签，带有 role="menuitem"属于 li 后代的 子代将触发描述:“有 N 个项目的菜单”

我还注意到，当使用不同的标签时，例如:

<div role="menu">
    <div role="menuitem">1</div>
    <div role="menuitem">2</div>
</div>

它不会触发“有 2 项的菜单”音频输出。相反，它只会显示“菜单”。

以类似的方式，我正在寻找另一个容器角色，它允许我列出可能不是菜单甚至链接的元素(例如:文章列表)，但让它显示“”和 N 个项目“。

为什么在 role="menu" 的情况下，这只适用于 ul 标记？它还可以在哪些其他标签中使用？这在官方文档中记录在哪里？我可以对非菜单列表使用什么标签和角色组合，但也可以大声读出“with n items”文本？

Answer 1

出现这种情况的原因是 li元素是they expose a setsize 可访问性 API 中的属性值。当原生 HTML listitem 时，这是继承的角色被 ARIA 覆盖 menuitem角色。 div元素不会公开此属性。为了公开 <div role="menuitem"> 上的 setsize 属性您将需要使用'aria-setsize ' 属性。