aria-controls

使用时机

适用于激活后会改变页面上其他元素的控件——典型示例是标签页 → 标签面板关系，以及展开按钮 → 显示面板。它告知辅助技术”操作此控件将影响页面另一处的元素”，为高级用户提供从控件跳转到被控元素的途径。

不要将其用于每一个交互。大多数点击处理器无需 aria-controls；应将其保留用于以下情形：被控元素在 DOM 中确实与控件相距较远，且用户需要了解两者之间的关联。

行为说明

属性值为以空格分隔的被控元素 ID 列表。被控元素必须在关系被查询时已存在于 DOM 中——若只在标签页激活时才挂载对应面板，则在面板出现前，该引用对使用辅助技术的用户而言将无效。

支持情况是此属性的软肋。JAWS 提供了”跳转到被控元素”的快捷键，但 VoiceOver 和 NVDA 在特定模式（标签页、组合框）之外基本忽略此属性。这意味着 aria-controls 很少是使功能变得无障碍的关键所在——它是在正确的角色、焦点管理和 aria-expanded 基础上的增强手段。应先将模式实现正确，最后再添加 aria-controls。

常见错误

• 将 aria-controls 视为移动焦点的替代方案。“跳转到结果”按钮在激活时需要主动移动焦点；添加 aria-controls 并不能实现这一效果。
• 指向尚未存在于 DOM 中的元素，在面板渲染之前引用将无法解析。
• 在展开按钮上遗漏 aria-expanded。aria-controls 表示”我影响那个元素”；aria-expanded 表示”且它当前是展开/折叠状态”。
• 在自定义选择框上使用 aria-controls 指向选项列表——此场景的正确模式是在输入框上使用 role="combobox" 加 aria-controls，并用 aria-activedescendant 指示当前高亮选项。
• 为”完整性”而随处添加 aria-controls，造成噪音，没有任何功能依赖于它。

示例

<button
  type="button"
  aria-expanded="false"
  aria-controls="faq-1-answer"
>
  What is your refund policy?
</button>
<div id="faq-1-answer" hidden>
  Refunds are processed within 14 days …
</div>