aria-controls不能绑定多个ID，其值必须是单个有效元素ID字符串，不支持空格或逗号分隔；错误写法会导致控制关系失效，正确做法是为每个面板设置独立触发按钮或用aria-describedby补充说明。
aria-controls 能否绑定多个 ID？
不能。根据 WAI-ARIA 1.1 规范，aria-controls 的值必须是**单个**有效的元素 ID（即一个字符串），不支持空格分隔、逗号分隔或任何列表语法。浏览器和辅助技术（如屏幕阅读器）只读取第一个 ID 后的字符作为整体 ID 名——如果写了 aria-controls="panel1 panel2"，实际解析的是 ID 为 "panel1 panel2"（含空格）的元素，而该 ID 几乎肯定不存在，导致控制关系失效。
常见错误写法与后果
这些写法看似合理，但全部无效：
-
aria-controls="panel1, panel2"→ 解析为 ID"panel1, panel2"（含逗号和空格） -
aria-controls="panel1 panel2"→ 解析为 ID"panel1 panel2"（含空格） -
aria-controls="panel1,panel2"→ 解析为 ID"panel1,panel2"（含逗号）
结果都是：屏幕阅读器不会 announce 这些被控元素，aria-controls 关系在可访问性树中不成立，键盘用户无法通过关联跳转，自动化可访问性检测工具（如 axe）也会报 aria-controls-value 错误。
正确替代方案：用多个触发器分别绑定
最可靠、语义清晰、兼容所有主流屏幕阅读器的做法，是为每个被控元素单独设置一个明确的触发控制关系。例如：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<button aria-expanded="false" aria-controls="panel1">展开面板一</button> <button aria-expanded="false" aria-controls="panel2">展开面板二</button> <div id="panel1" role="region" aria-labelledby="...">...</div> <div id="panel2" role="region" aria-labelledby="...">...</div>
这样每个 aria-controls 值都指向唯一 ID，关系可验证、可交互、可测试。如果你需要“一个按钮控制多个面板”，逻辑上应拆解为：
- 用 JavaScript 手动管理多个面板的
aria-expanded和显示状态 - 保持每个
aria-controls属性仍只绑定一个 ID（哪怕只是主面板） - 若必须语义化表达“此按钮影响多个区域”，可补充
aria-describedby指向一段说明文字，例如：aria-describedby="multi-panel-desc"，再配一个<div id="multi-panel-desc" class="sr-only">此操作将同时展开面板一和面板二</div>
为什么不用 aria-owns 或其他 ARIA 属性代替？
aria-owns 是用于重构可访问性树父子关系的，它不表示“控制”行为，也不触发屏幕阅读器的 controls 关联提示；滥用会破坏原有 DOM 结构语义，反而降低可访问性。同理，aria-flowto 已被废弃，aria-activedescendant 仅适用于复合 widget 内部焦点管理。真正表达“这个按钮控制那个内容区域”的标准方式，只有 aria-controls —— 只不过它天生就是一对一的。
多 ID 控制需求往往暴露了组件抽象层级的问题：与其强行塞进一个属性，不如检查是否该用 accordion、tablist 或自定义 region 组合来建模。可访问性不是拼属性，而是匹配用户心智模型。
