非交互式元素的预期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的值。