列出子项的 WAI-ARIA 容器角色
WAI-ARIA Container Roles That List Children
将 ChromeVox 扩展程序用作屏幕 reader,我注意到带有 role="menu"
的菜单是 ul
标签,带有 role="menuitem"
个子项是或位于li
后代,会触发描述:"menu with N items"
我还注意到,当使用不同的标签时,例如:
<div role="menu">
<div role="menuitem">1</div>
<div role="menuitem">2</div>
</div>
不会触发"menu with 2 items"音频输出。相反,它只会说 "menu".
以类似的方式,我正在寻找另一个容器角色,它允许我列出可能不是菜单甚至链接的元素(例如:文章列表),但它说 "with N items"。
为什么在 role="menu"
的情况下这仅适用于 ul
标签?它在哪些其他标签中起作用?这在官方文档中记录在哪里?对于不是菜单的列表,我可以使用什么标签和角色组合,但还可以大声读出 "with n items" 文本?
li
元素出现这种情况的原因是 they expose a setsize
property value in accessibility APIs. This is inherited when the native HTML listitem
role is overridden by the ARIA menuitem
role. div
elements don't expose this property. In order to expose the setsize property on <div role="menuitem">
you will need to use the 'aria-setsize' 属性。
将 ChromeVox 扩展程序用作屏幕 reader,我注意到带有 role="menu"
的菜单是 ul
标签,带有 role="menuitem"
个子项是或位于li
后代,会触发描述:"menu with N items"
我还注意到,当使用不同的标签时,例如:
<div role="menu">
<div role="menuitem">1</div>
<div role="menuitem">2</div>
</div>
不会触发"menu with 2 items"音频输出。相反,它只会说 "menu".
以类似的方式,我正在寻找另一个容器角色,它允许我列出可能不是菜单甚至链接的元素(例如:文章列表),但它说 "with N items"。
为什么在 role="menu"
的情况下这仅适用于 ul
标签?它在哪些其他标签中起作用?这在官方文档中记录在哪里?对于不是菜单的列表,我可以使用什么标签和角色组合,但还可以大声读出 "with n items" 文本?
li
元素出现这种情况的原因是 they expose a setsize
property value in accessibility APIs. This is inherited when the native HTML listitem
role is overridden by the ARIA menuitem
role. div
elements don't expose this property. In order to expose the setsize property on <div role="menuitem">
you will need to use the 'aria-setsize' 属性。