我正在为Web应用程序编写组件,在该组件中,我需要明确阻止某个元素将注意力集中在按Tab键上。
根据W3c's specs,我将tabIndex
属性设置为-1
,以声明非交互式元素。
现在,我想知道这种非交互元素的ARIA role是什么?
<div
role="???"
tabIndex="-1"
onKeyDown="/* ... */"
onClick="/* ... */"
>
Lorem ipsum
</div>
答案 0 :(得分:2)
在这种特殊情况下,如果元素无法获得焦点,则它不需要角色。不过,这不是一般规则。有很多元素无法获得键盘焦点,但仍然具有有效的作用,例如标题,列表和表格。拥有有效的角色可以帮助屏幕阅读器理解页面的结构,并允许他们快速导航到这些项目(例如,“ H”转到下一个标题,“ L”转到下一个列表,或“ T”转到下一个列表)表。)如果您的元素没有任何语义含义,则不需要角色。
请注意,在某些情况下,元素可以具有tabindex="-1"
并具有有效的角色。如果我使用<ul>/<li>
实现自己的列表选择器,每个列表项都是一个选择,但是我希望整个列表成为一个制表符,那么所有列表项上都会有tabindex="-1"
除了我想获得标签焦点的那一个。它将有tabindex="0"
。如果我跳到整个列表,焦点将转到带有tabindex="0"
的项目。然后,我可以在列表中向上/向下箭头进行选择。当我向上/向下箭头切换时,我在适当的列表项上切换tabindex
的值。