Axe DevTools检测手风琴aria-expanded属性违规及面板角色咨询

报错原因 #

Axe DevTools提示aria-expanded属性不允许，核心原因是这个属性仅能用于具备交互控制能力的元素（比如原生<button>或声明了role="button"的元素），普通<div>和面板容器不属于这类控制元素，不能直接使用该属性。

具体修复步骤 #

1. 标题触发区域修复 #

把原标题<div>替换为原生<button>（或给div添加role="button"，但原生button自带键盘交互支持，更推荐），同时补充必要的ARIA属性：

• 保留data-toggle="collapse"和href="#panel_content"（适配Bootstrap的折叠逻辑）
• 添加aria-controls="panel_content"：明确该按钮对应的面板ID，让辅助技术知晓控制关系
• 保留aria-expanded属性：现在按钮是合法的属性承载元素
• 移除手动设置的tabindex="0"：原生button默认已具备焦点访问能力

2. 面板内容区域修复 #

面板容器不需要额外设置特殊角色，但要修正ARIA属性：

• 移除面板上的aria-expanded属性：面板是被控制的内容容器，不该拥有控制类属性
• 添加aria-hidden属性：与按钮的aria-expanded状态反向对应（收起时aria-hidden="true"，展开时aria-hidden="false"），让辅助技术准确识别面板的可见状态

修改后的代码示例 #

收起状态 #

<div id="ctl00_panelAdditionalInfo" class="panel-group help-container">
    <div class="panel">
        <button class="panel-heading collapsed" data-toggle="collapse" href="#panel_content" aria-expanded="false" aria-controls="panel_content">Additional Information</button>
        <div class="panel-collapse collapse" id="panel_content" aria-hidden="true" style="height: 0px;">
            <div class="panel-body help-content">   
                <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
            </div>
        </div>
    </div>
</div>

展开状态 #

<div id="ctl00_panelAdditionalInfo" class="panel-group help-container">
    <div class="panel">
        <button class="panel-heading" data-toggle="collapse" href="#panel_content" aria-expanded="true" aria-controls="panel_content">Additional Information</button>
        <div class="panel-collapse collapse in" id="panel_content" aria-hidden="false">
            <div class="panel-body help-content">   
                <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
                <a class="additional-info" href="htpps://url" alt="alt" target="_blank"><u>text</u></a>
            </div>
        </div>
    </div>
</div>

额外提示 #

• 样式适配：原生button默认有边框、背景等样式，需要添加CSS重置让它和原panel-heading视觉一致，示例代码：

  .panel-heading {
      border: none;
      background: none;
      padding: inherit;
      font: inherit;
      text-align: left;
      cursor: pointer;
      width: 100%;
  }
  

• 键盘交互：原生button自动支持回车、空格键触发折叠/展开，无需额外编写JS逻辑，比用<div>模拟按钮更省心。

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