aria-activedescendant设了没反应的常见错误是：未将该属性用于合法容器角色（如listbox、combobox、grid等），容器缺少tabindex="0"，目标元素ID不存在或被aria-hidden="true"/display:none隐藏，且未通过JavaScript同步更新属性与视觉状态。
aria-activedescendant 为什么设了没反应
常见错误是直接给普通 <div> 或 <ul> 加 aria-activedescendant，但该属性只对特定复合角色生效：必须是 role="listbox"、role="combobox"、role="grid"、role="tree" 等容器。它不会让任意元素“自动聚焦”，而是告诉辅助技术：“当前逻辑焦点在 ID 为 X 的子元素上”。
- 容器本身必须可聚焦（通常设
tabindex="0"） - 目标元素（如
role="option"）必须存在于 DOM 中，且有唯一id - 不能靠 CSS 类或视觉高亮代替 ARIA 属性更新；
aria-activedescendant值必须是真实存在的元素 ID 字符串 - 若目标元素被
display: none或aria-hidden="true"隐藏，屏幕阅读器会跳过，即使 ID 正确也无效
怎么用 JavaScript 动态更新 aria-activedescendant
核心逻辑是：监听键盘事件 → 手动移动“逻辑焦点” → 同步更新属性和视觉状态。
const listbox = document.querySelector('[role="listbox"]');
const options = listbox.querySelectorAll('[role="option"]');
let currentIndex = -1;
<p>listbox.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown') {
e.preventDefault();
currentIndex = (currentIndex + 1) % options.length;
listbox.setAttribute('aria-activedescendant', options[currentIndex].id);
// 视觉反馈：移除旧高亮，加新高亮
options.forEach(opt => opt.removeAttribute('aria-selected'));
options[currentIndex].setAttribute('aria-selected', 'true');
}
if (e.key === 'ArrowUp') {
e.preventDefault();
currentIndex = (currentIndex - 1 + options.length) % options.length;
listbox.setAttribute('aria-activedescendant', options[currentIndex].id);
options.forEach(opt => opt.removeAttribute('aria-selected'));
options[currentIndex].setAttribute('aria-selected', 'true');
}
});
- 不要调用
options[currentIndex].focus()—— 这会让真实焦点跳过去，破坏 roving tabindex 模式 -
aria-activedescendant只影响朗读和方向键导航逻辑，不改变浏览器的 DOM 焦点位置 - 必须手动管理
aria-selected（尤其多选时），它和aria-activedescendant是两个独立状态
aria-activedescendant 和 tabindex="-1" 怎么配合
这是实现“单容器进、内部方向键切”的关键组合：
- 容器设
tabindex="0"，用户 Tab 一次进入整个组件 - 所有可选项设
tabindex="-1"，它们不可被 Tab 键到达，但可通过aria-activedescendant被朗读并响应方向键 - 用户按 ArrowDown 后，只更新容器的
aria-activedescendant，不调用.focus()到选项上 - Enter 键触发操作时，读取当前
aria-activedescendant对应的元素，再执行业务逻辑（如填值、提交）
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
- 给选项设
tabindex="0"：Tab 键会逐个卡住每个选项，破坏主表单流 - 忘记给选项加
id：aria-activedescendant指向无效，辅助技术静默失败 - 在框架中动态渲染后未重置
currentIndex或未重新绑定事件：键盘导航中断
Grid 场景下 aria-activedescendant 的特殊要求
表格类交互（如 Excel 式编辑）必须用 role="grid" 替代原生 <table>，否则 aria-activedescendant 在 <td> 上无效。
-
<div role="grid">容器设tabindex="0"和aria-activedescendant - 每个单元格必须是
role="gridcell"，且显式声明aria-rowindex和aria-colindex - 所有
gridcell必须设tabindex="-1"，禁止设tabindex="0" - 屏幕阅读器依赖这些索引做 Ctrl+Alt+方向键导航，缺一不可
真正难的不是写属性，而是保持 DOM 结构、ARIA 属性、JS 状态三者严格同步——比如删除某行后，aria-rowindex 必须全部重算，aria-activedescendant 指向的 ID 也得存在且合法。任何一环断开，键盘用户就卡在黑盒里。
