aria-expanded 属性应加在触发按钮上，如 <button aria-expanded="false">展开详情</button>，通过 aria-controls 关联内容区 id；需用 setAttribute 动态更新值，并与视觉状态严格同步。
aria-expanded 属性该加在谁身上？
加在触发按钮上，不是加在被展开的内容容器上。这是最常见的定位错误——很多人把 aria-expanded 放在 <div class="collapse"> 里，结果屏幕阅读器完全读不到状态变化。
- 正确位置：
<button aria-expanded="false">展开详情</button> - 对应内容区用
id和aria-controls关联：<div id="detail-panel" role="region"> - 如果按钮本身没有
id，aria-controls就失效，别漏掉
怎么动态更新 aria-expanded 的值？
不能只靠 CSS 类切换或 DOM 显示隐藏来“假装”状态变了。必须显式修改属性值，否则辅助技术感知不到。
- 展开时：用
element.setAttribute('aria-expanded', 'true') - 收起时：用
element.setAttribute('aria-expanded', 'false') - 别用
element.ariaExpanded = true（这不是标准属性访问方式，IE/旧版 Safari 不认） - 如果用 React/Vue，确保在状态更新后同步操作 DOM 属性，不要依赖渲染时机
aria-expanded 为 true 但内容没显示？
这属于语义和行为不一致，会误导屏幕阅读器用户以为内容已可见，实际却是隐藏的。常见于 JS 错误中断、CSS display: none 没及时清除、或者动画过渡中属性提前更新。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 更新
aria-expanded必须和视觉状态严格同步：先改样式/类，再设属性；或反之，但不能错开 - 避免在 CSS 动画中间阶段就设
aria-expanded="true"，等transitionend或setTimeout确保渲染完成后再更新 - 用浏览器的“可访问性检查器”（如 Chrome DevTools 的 Accessibility pane）实时验证属性值和节点可见性是否匹配
要不要同时配 aria-hidden？
不需要给被展开的内容加 aria-hidden。它本身不是模态框或临时覆盖层，而是主页面的一部分。强行加 aria-hidden="true" 会让内容对所有辅助技术不可见，哪怕它已经展开了。
立即学习“前端免费学习笔记（深入）”；
-
aria-expanded是告诉用户“这个按钮控制一个区域，当前是展开还是收起” - 内容区只需有
role="region"和明确的id，供aria-controls关联即可 - 如果内容区用了
hidden属性，那aria-expanded="true"就自相矛盾，必须移除hidden
aria-expanded 当成“装饰属性”随便设，而忽略了它和真实 DOM 可见性、JS 状态、CSS 渲染三者必须咬合。差一帧，辅助功能就断了。 
