非交互式元素的预期 ARIA“角色”（tabIndex="-1"）

Question

我正在为一个 web 应用程序编写一个组件，我需要明确地阻止一个元素获得对“tab”按钮的关注。

根据W3c's specs我设置tabIndex属性为-1来声明非交互元素。

现在我想知道这种非交互式元素的 ARIA role 是什么？

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

Answer 1

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

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