aria-expanded

适用场景

适用于任何能展开和收起界面其他区域的控件：手风琴标题、“显示更多”展开按钮、组合框触发器、菜单按钮、含子项的 treeitem、汉堡菜单导航切换开关。控件在两种状态下始终是同一元素——只有属性值发生切换。

如果控件切换的是元素自身的状态（静音/取消静音、关注/取消关注），应使用 aria-pressed。aria-expanded 描述的是与另一区域之间的关系，通常通过 aria-controls 加以标识。

aria-expanded 是否有意义取决于所使用的角色：它在 button、combobox、link、tab、treeitem、menuitem、gridcell、row 等角色上受支持。在无角色的 <div> 上使用此属性不会产生任何实际效果。

保持同步

有效值为 "true"（区域已展开）和 "false"（区域已收起）。省略时的默认含义是”完全没有展开状态”——这与 "false" 不同。如果控件具有展开功能，请在收起状态下明确渲染 aria-expanded="false"，而非省略该属性。

在控制区域展开或收起动画的同一代码路径中更新该属性。此属性是屏幕阅读器读取的信息来源；视觉上的展开箭头仅是面向视力正常用户的辅助提示。

配合 aria-controls="<region-id>" 使用，屏幕阅读器即可播报其关联关系，例如：“筛选器，按钮，已收起，控制 filter-panel”。部分辅助技术提供快捷方式，可直接跳转至受控区域。

常见错误

• 切换了面板上的 CSS 类，但忘记同步翻转 aria-expanded。
• 在无交互性且无角色的元素上使用 aria-expanded，属性将被忽略。
• 仅添加 aria-expanded="true"，从不渲染 "false" 状态——屏幕阅读器在收起状态下不播报任何信息。
• 在实际上不展开任何区域的控件（如”提交”按钮）上使用 aria-expanded。
• 将 aria-expanded 与 aria-pressed 混淆，误用于不打开独立区域的切换按钮。
• 省略 aria-controls，导致触发器与面板之间的关联关系隐式存在。

示例

<button
  type="button"
  aria-expanded="false"
  aria-controls="filters-panel"
  onclick="toggle(this)"
>
  Filters
</button>

<div id="filters-panel" hidden>
  <!-- filter controls -->
</div>