此错误适用于具有容器角色、没有
aria-activedescendant
属性且未禁用的元素。 这些元素通过使用称为
“巡回索引
”的概念在子元素之间实现键盘导航。 在此概念中,子元素的
tabindex
属性是动态维护的,确保始终只有一个子元素处于 Tab 键顺序。
此错误指示键盘用户无法访问没有
aria-activedescendant
属性且未禁用的容器元素。 之所以存在此问题,是因为容器没有所需的键盘事件处理程序 (
键关闭
、
键)
或
键压
,并且容器的任何子元素也不执行任何操作。
若要修复此错误,请为容器或其子元素之一定义
keydown
、
keyup
或
keypress
事件处理程序。
<div role="listbox" id="listbox1" >
<div role="option" id="listbox1-1" tabindex="0" class="selected">Item 1</div>
<div role="option" id="listbox1-2">Item 2</div>
<div role="option" id="listbox1-3">Item 3</div>
<script>
listbox1.addEventListener('keyup', function(e) {
var itm = e.srcElement;
var prev = itm.previousElementSibling;
var next = itm.nextElementSibling;
if (e.keyCode == 38 && prev) {
// On arrow up move focus to the previous item.
itm.setAttribute('tabindex', '-1');
prev.setAttribute('tabindex','0');
prev.focus();
else if (e.keyCode == 40 && next) {
// On arrow down move focus to the next item.
itm.setAttribute('tabindex', '-1');
next.setAttribute('tabindex','0');
next.focus();
</script>
ARIA 容器角色键盘辅助功能错误