如何使用hgroup实现符合无障碍标准的Accordion（折叠面板）？

针对你遇到的问题，我们可以通过调整结构结合ARIA属性来实现符合要求的无障碍折叠面板，具体方案如下：

核心实现思路 #

将按钮嵌套在heading元素内（符合ARIA创作指南），同时用hgroup包裹heading和补充信息，既保留两者的语义关联，又避免补充信息被纳入heading的可访问名称。

代码示例 #

基础版本（仅保留语义与交互） #

<div class="accordion-panel">
  <hgroup>
    <h3>
      <button type="button" aria-expanded="false" aria-controls="panel-content-1">
        Heading 1
      </button>
    </h3>
    <p>Supplementary information 1</p>
  </hgroup>
  <div id="panel-content-1" hidden>
    <!-- 这里是折叠面板的内容 -->
  </div>
</div>

增强版本（补充信息随按钮聚焦读取） #

如果需要屏幕阅读器在聚焦按钮时同步读取补充信息，可以添加aria-describedby属性关联补充信息元素：

<div class="accordion-panel">
  <hgroup>
    <h3>
      <button type="button" aria-expanded="false" aria-controls="panel-content-1" aria-describedby="supplement-1">
        Heading 1
      </button>
    </h3>
    <p id="supplement-1">Supplementary information 1</p>
  </hgroup>
  <div id="panel-content-1" hidden>
    <!-- 这里是折叠面板的内容 -->
  </div>
</div>

方案优势 #

1. 符合无障碍规范：按钮嵌套在heading内，屏幕阅读器能正确识别标题层级与交互元素的关联，避免了初始方案中button消除内部heading角色的问题。
2. 保留hgroup语义：hgroup完整包裹heading和补充信息，维持了两者的关联关系，不会像第二个方案那样拆分语义结构。
3. heading名称纯净：补充信息不在h3标签内部，h3的可访问名称仅为标题文本，符合预期。
4. 交互逻辑清晰：aria-expanded指示面板状态，aria-controls关联目标内容区域，确保屏幕阅读器用户能明确交互作用。

内容的提问来源于stack exchange，提问作者DanielGibbs