aria-controls 的值必须严格匹配目标容器的 id，且目标需有 role 属性并已挂载到 dom；需与 aria-expanded 同步更新，避免 display: none 隐藏，并优先用 aria-labelledby 处理动态加载场景。
aria-controls 的值必须严格匹配目标容器的 id 属性
它不是选择器，也不是 class 名，只能是字符串字面量，且必须与目标元素的 id 完全一致（包括大小写、连字符、下划线）。常见错误是拼写不一致或动态生成时 ID 未同步挂载。
-
aria-controls="nav-menu"对应的容器必须有id="nav-menu"，写成id="nav_menu"或id="menu-nav"都会失效 - 多个下拉面板共用同一组 JS 逻辑时，每个按钮的
aria-controls值必须唯一指向各自面板，不能复用同一个 ID - React/Vue 中用
key或v-if控制面板显隐时，确保 DOM 插入完成后再设置aria-controls——否则目标id暂不存在，辅助技术静默忽略
目标容器必须设 role="region" 且 id 真实存在于 DOM
仅写 id 不够。屏幕阅读器需要语义角色来识别这是个独立的内容区块，role="region" 是最通用安全的选择；若语义更明确（如 tabpanel），可用 role="tabpanel"，但需配套 role="tablist"。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 不要省略
role：仅靠id+aria-controls无法让 AT 把面板识别为“被控区域” - 目标容器不能是临时 fragment 或 documentFragment：必须已挂载到
document.body下，否则aria-controls关联失败 - 避免用
display: none隐藏面板——它会让元素退出可访问树，此时即使aria-controls正确，AT 也找不到目标
必须与 aria-expanded 同步更新，且只写在触发按钮上
aria-expanded 和 aria-controls 是绑定对，缺一不可。前者告诉 AT “当前状态”，后者告诉 AT “控制谁”。两者不同步，等于给读屏器提供矛盾信息。
-
aria-expanded只能写在按钮上（<button></button>或带role="button"的元素），绝不能写在面板容器上 - 展开时：同时执行
button.setAttribute('aria-expanded', 'true')和确保面板可见（如移除aria-hidden="true"或设hidden=false） - 收起时：先隐藏面板（视觉+语义），再设
button.setAttribute('aria-expanded', 'false')；顺序反了会导致 AT 报“已收起”但内容仍可读 - 别用布尔赋值：
button.ariaExpanded = true无效；必须用字符串'true'或'false'
动态加载面板时，优先用 aria-labelledby 反向关联
当面板内容由 JS 异步插入（如点击后 fetch 渲染菜单），硬写 aria-controls 容易因时机问题指向空 ID。此时改用 aria-labelledby 更可靠：让面板主动“认领”控制它的按钮。
- 按钮保持
id="menu-trigger"，面板设aria-labelledby="menu-trigger"+role="region" - 这样即使面板晚于按钮渲染，只要 ID 存在，AT 就能建立反向关联
- 仍建议补上
aria-controls（如果确定时机可控），但不必强依赖它 - 注意：反向关联不替代状态同步——
aria-expanded仍需手动维护
aria-expanded 前，必须确认目标 id 已在 DOM 中，且面板的显隐状态已真实生效。否则所有属性都写对了，AT 依然什么也感知不到。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
