非交互式元素的预期 ARIA "角色" (tabIndex="-1")



我正在为一个 Web 应用程序编写一个组件,我需要明确阻止元素在"tab"按上获得关注。

根据 W3c 的规范,我tabIndex属性设置为-1以声明非交互式元素。

现在我想知道这种非交互式元素的 ARIA 角色是什么?

<div
role="???"
tabIndex="-1"
onKeyDown="/* ... */"
onClick="/* ... */"
>
Lorem ipsum
</div>

在这种特殊情况下,如果元素无法接收焦点,则不需要角色。 不过,这不是一般规则。 有许多元素无法接收键盘焦点,但仍具有有效角色,例如标题、列表和表格。 拥有有效的角色有助于屏幕阅读器了解页面的结构,并允许他们快速导航到这些项目(例如,"H"转到下一个标题,"L"转到下一个列表,"T"表示下一个表(。 如果您的元素没有任何语义含义,则它不需要角色。

作为旁注,在某些情况下,元素可以具有tabindex="-1"并具有有效的角色。 如果我使用<ul>/<li>实现我自己的列表选择器,其中每个列表项都是一个选择,但我希望整个列表作为一个制表位,那么我将对所有列表项进行tabindex="-1",除了我想接收选项卡焦点的列表项。 它将有tabindex="0". 如果我按 Tab 键转到整个列表,焦点将转到带有tabindex="0"的项目。 然后,我可以在列表中向上/向下箭头以进行不同的选择。 当我向上/向下箭头时,我在相应的列表项上切换tabindex的值。

最新更新