HTML中使用 aria-controls 属性可以实现对元素的关联控制，常用于增强网页的可访问性（Accessibility）。它通常与 aria-labelledby 或 aria-describedby 一起使用，以帮助屏幕阅读器用户理解页面结构。基本用法aria-controls 用于标识一个元素控制另一个元素。例如，一个按钮可以用来展开或收起某个面板，这时就可以在按钮上使用 aria-c

最常遇到的报错是“aria-controls refers to an element that does not exist”，本质就是 ID 引用失效。这在单页应用（SPA）或模板渲染场景中尤其容易发生。

• 检查目标元素是否已挂载到 DOM：React/Vue 中，如果目标在 v-if 或 useState 初始为 false，那它根本没渲染，ID 自然不存在
• 动态生成 ID 时（如循环列表），确保 aria-controls 值与目标 id 完全一致（包括大小写、连字符、前缀等）
• 不要依赖 JS 框架的“key”或“ref”名来生成 ID —— 它们不等于 HTML id 属性值
• 用浏览器 DevTools 的“Accessibility”面板实时查看 aria-controls 是否解析出有效节点（右键 → Inspect → 右侧 Accessibility 标签页）

一个最小可用示例（纯 HTML + 基础 JS）

<button
  aria-controls="notification-panel"
  aria-expanded="false"
  onclick="togglePanel('notification-panel')"
>
  查看通知
</button>

<div id="notification-panel" hidden role="region" aria-labelledby="notification-button">
  <h2 id="notification-button">新通知（3条）</h2>
  <p>你有 3 条未读消息。</p>
</div>

<script>
function togglePanel(id) {
  const panel = document.getElementById(id);
  const btn = event.target;
  if (panel) {
    const isHidden = panel.hasAttribute('hidden');
    panel.toggleAttribute('hidden');
    btn.setAttribute('aria-expanded', !isHidden);
  }
}
</script>

注意这里没用任何框架，但已覆盖 ID 关联、状态同步、角色标注三个关键点。真实项目中，遗漏 aria-expanded 更新或忘记给目标加 role="region"，是比写错 ID 更隐蔽的问题。

以上就是《HTML中使用 aria-controls 属性可以实现对元素的关联控制，常用于增强网页的可访问性（Accessibility）。它通常与 aria-labelledby 或 aria-describedby 一起使用，以帮助屏幕阅读器用户理解页面结构。基本用法aria-controls 用于标识一个元素控制另一个元素。例如，一个按钮可以用来展开或收起某个面板，这时就可以在按钮上使用 aria-controls 指向该面板的 ID。示例代码：显示内容