aria-controls 仅声明元素间的关联关系，不触发任何行为；需配合 JavaScript 控制显隐、同步 aria-expanded 和 hidden/aria-hidden 状态，并确保 ID 存在且目标有 role="region" 等可访问性属性。

aria-controls 的作用不是“控制”，而是声明关联关系

很多人以为 aria-controls 能让点击元素自动展开/收起目标，其实它只是告诉辅助技术（如屏幕阅读器）“这个按钮和那个区域逻辑相关”。浏览器不会因此触发任何 DOM 操作，也不影响 JavaScript 行为。真正控制显隐，得靠你自己写 click 事件 + classList.toggle() 或修改 hidden 属性。

• 必须用 ID 字符串作为值，且目标元素必须存在且有对应 id
• ID 不能含空格或特殊字符（如 my-section-1 ✅，my section ❌）
• 一个元素可关联多个目标，用空格分隔：aria-controls="panel1 panel2"
• 目标元素建议加 role="region" 或语义化标签（如
  ），并设置 aria-labelledby 或 aria-label 便于理解上下文

怎么写才不会被屏幕阅读器忽略

仅加 aria-controls 不够，目标元素还得满足可访问性基础条件：可见性状态要通过 aria-hidden 或 hidden 显式表达，而不是只靠 CSS display: none —— 后者对辅助技术不透明。

• 推荐用 hidden 属性切换显隐：
• 若必须用 CSS 控制，请同步设置 aria-hidden="true/false"，并确保属性值与视觉状态严格一致
• 按钮本身应有 aria-expanded="false"，并在 JS 中随状态更新该值（例如展开时设为 "true"）
• 避免把 aria-controls 加在 上——这类链接无默认交互语义，屏幕阅读器可能跳过；优先用

常见错误：ID 找不到、拼写不一致、动态生成没同步

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


生成HTML格式PPT
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
下载
• 检查目标元素是否已挂载到 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 更隐蔽的问题。