aria-controls 必须精确指向真实存在的唯一 ID，不能是 class 或选择器；若目标元素未挂载或 ID 拼写错误，屏幕阅读器将无法关联和播报；动态场景下应延迟设置或改用 aria-labelledby 反向关联。
aria-controls 必须指向真实存在的 ID，不能是 class 或选择器
它不是 CSS 选择器，而是硬关联到目标元素的 id 属性值。如果写成 aria-controls="panel"，但 DOM 里根本没有 id="panel" 的元素，屏幕阅读器就完全“失联”——既不播报状态，也不允许用户跳转过去。
常见错误包括：
-
aria-controls拼错，比如写成"panle-1"（少一个 l） - 目标元素用的是
class="panel-1"，却误当 ID 引用 - 面板是动态插入的，但按钮初始化时就写了
aria-controls="dynamic-panel"，而该 ID 尚未出现在 DOM 中
按钮和面板必须配对设置 ID 和 aria-controls
按钮上写 aria-controls，面板上必须有对应 id，且这个 id 全局唯一。别指望多个面板共用同一个 ID 来“复用逻辑”——那会让辅助技术混淆控制关系。
正确结构示例：
立即学习“前端免费学习笔记（深入）”；
<button id="faq-toggle" aria-controls="faq-panel" aria-expanded="false">常见问题</button> <div id="faq-panel" role="region" aria-labelledby="faq-toggle">内容…</div>
关键点：
- 按钮要有
id（否则aria-labelledby反向关联会失效） - 面板
id必须和aria-controls值完全一致（区分大小写） - 面板建议加
role="region"，否则读屏器可能只把它当普通div读
动态加载面板时，别急着设 aria-controls
Tab 切换、懒加载、异步渲染等场景下，面板 DOM 节点可能还没挂载。此时提前写死 aria-controls="tab-content-2"，等于给读屏器指了一条不存在的路。
更稳妥的做法是：
- 等面板节点真正
appendChild或insertAdjacentElement到 DOM 后，再给按钮设置aria-controls - 或者干脆省略
aria-controls，改用aria-labelledby在面板上反向关联（即面板写aria-labelledby="tab-btn-2"） - ARIA 规范明确说明：二者选其一即可，不必堆砌
多按钮控制同一面板？可以，但得确认语义合理
多个按钮（比如页面不同位置的“展开详情”）指向同一个 id，技术上允许，前提是它们确实控制同一块内容。但要注意：
- 所有按钮的
aria-expanded状态必须同步更新——不能 A 点开、B 还显示“收起” - 每个按钮仍需自己的
id，以便面板用aria-labelledby反向关联到具体触发源 - 如果面板内容会随按钮上下文变化（比如“订单详情”按钮 vs “物流详情”按钮），那就不能共用 ID，必须拆成独立面板
真实项目里最容易漏掉的不是写法，而是 DOM 存在性验证和状态同步时机——尤其在 React/Vue 组件卸载又重挂时，aria-controls 指向的 ID 很可能已失效。
