aria-controls 必须精准指向真实存在的唯一id内容容器，且需配合role、aria-labelledby和同步的aria-hidden/aria-expanded状态，否则屏幕阅读器将静默失效。

aria-controls 必须指向内容容器的真实 ID

它不是可选装饰，而是明确告诉屏幕阅读器“这个按钮控制哪块内容”。如果 aria-controls 的值拼错、ID 不存在、或目标元素还没挂载到 DOM 中，辅助技术会静默失败——用户听不到提示，也跳转不到对应区域。

• aria-controls 的值必须是内容容器的 id 属性，且该 id 在整个页面中唯一
• 内容容器必须真实存在于 DOM 中（不能是 JS 还没插入的临时节点）
• 多个按钮可以共用同一个 aria-controls 值，但前提是它们确实控制同一块内容（比如顶部和侧边栏两个“产品”按钮都展开同一个菜单）
• 不要写成 aria-controls="menu" 却让菜单是 id="dropdown-menu" 或 id="menu-list"——短横线、下划线、大小写不一致都会断开关联

内容容器要配 role 和 aria-labelledby 才算语义完整

仅靠 aria-controls 不足以让屏幕阅读器理解“这块内容是什么、跟谁有关”。内容容器本身需要明确角色锚点，否则读屏器可能只把它当普通 div 读。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 折叠菜单的内容容器建议设 role="menu"（下拉式）或 role="region"（通用折叠面板）
• 加上 aria-labelledby 指回触发按钮的 id，形成双向语义关联（例如按钮 id="nav-toggle"，菜单写 aria-labelledby="nav-toggle"）
• 初始隐藏时可加 aria-hidden="true"，但必须与视觉状态严格同步：菜单展开时移除该属性，或设为 "false"
• 别依赖 display: none 隐藏菜单——它会让屏幕阅读器直接跳过内容；要用 aria-hidden="true" + 视觉隐藏（如 position: absolute; left: -9999px）配合

JavaScript 切换时必须同步更新 aria-controls 关联的状态

aria-controls 本身不触发行为，也不随 DOM 变化自动生效。你得手动确保：按钮点击后，菜单显隐、aria-expanded、aria-hidden 全部同步更新，缺一不可。

• 点击按钮时，先操作菜单 DOM（比如切换 aria-hidden），再调用 button.setAttribute('aria-expanded', 'true')
• 不要写 button.ariaExpanded = true —— 这不是标准属性，IE 和旧 Safari 不支持
• 避免 aria-expanded="" 或 aria-expanded="undefined"，这些是无效值，会被忽略
• 动态加载菜单时（比如 Tab 切换才插入），优先在插入完成后再设置 aria-controls，或干脆省略它，改用 aria-labelledby 反向关联更稳妥

最容易被忽略的是 DOM 存在性验证和焦点管理

真实项目里，aria-controls 失效往往不是语法写错，而是逻辑链断裂：ID 生成时机不对、菜单被 Vue/React key 机制覆盖、JS 插入后没检查是否成功挂载、展开后没聚焦第一个菜单项。

• 菜单展开后必须主动调用 menuElement.focus() 或聚焦第一个 role="menuitem"，否则键盘用户无法进入菜单
• 如果菜单是懒加载的，插入前先生成稳定 id，插入后立即验证 document.getElementById(id) 是否存在
• 不要为了“看起来规范”而堆砌无效属性——可访问性不是填空游戏，而是确保逻辑闭环

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！