aria-expanded 属性应加在触发按钮上，如 展开详情，通过 aria-controls 关联内容区 id；需用 setattribute 动态更新值，并与视觉状态严格同步。

aria-expanded 属性该加在谁身上？

加在触发按钮上，不是加在被展开的内容容器上。这是最常见的定位错误——很多人把 aria-expanded 放在 <div class="collapse"> 里，结果屏幕阅读器完全读不到状态变化。 <ul> <li>正确位置：<code><button aria-expanded="false">展开详情</button>

对应内容区用 id 和 aria-controls 关联：<div id="detail-panel" role="region"> <li>如果按钮本身没有 <code>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 渲染三者必须咬合。差一帧，辅助功能就断了。