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

Question

我正在为 Web 应用程序编写一个组件，我需要在其中明确阻止某个元素在 "tab" 按下时获得焦点。

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

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

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

Answer 1

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

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

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

Expected ARIA "role" for non-interactive elements (tabIndex="-1")

html

accessibility

tabindex

wai-aria