如何解决mat-expansion-panel的aria-labelledby无障碍合规错误？

问题原因 #

你遇到的错误是因为mat-expansion-panel组件默认会生成aria-labelledby属性，指向面板标题元素的ID，但你的代码中没有提供显式的面板标题/头部结构，导致检测工具找不到对应的ID元素，违反了WCAG 2.1 A 1.3.1等无障碍标准。

解决方案 #

方案1：添加标准的面板头部结构 #

显式包含mat-expansion-panel-header和标题元素，让组件自动正确关联无障碍属性：

<mat-expansion-panel [expanded]="true" class="my-card-expansion-panel">
  <mat-expansion-panel-header>
    <mat-panel-title>
      测试内容面板
    </mat-panel-title>
  </mat-expansion-panel-header>
  <br/>
  Testdata1
  <br/>
  Testdata2
  <br/>
  Testdata3
</mat-expansion-panel>

方案2：直接设置aria-label（无需可见标题） #

如果不需要显示可见的面板标题，可以直接通过aria-label为组件添加无障碍标签，替代自动生成的aria-labelledby：

<mat-expansion-panel [expanded]="true" class="my-card-expansion-panel" aria-label="测试内容面板">
  <br/>
  Testdata1
  <br/>
  Testdata2
  <br/>
  Testdata3
</mat-expansion-panel>

方案3：使用隐藏的可访问标题 #

若需要保持视觉上无标题，但仍提供无障碍标签，可添加一个屏幕阅读器可见的隐藏标题元素：

<mat-expansion-panel [expanded]="true" class="my-card-expansion-panel" aria-labelledby="panel-accessible-title">
  <h2 id="panel-accessible-title" class="sr-only">测试内容面板</h2>
  <br/>
  Testdata1
  <br/>
  Testdata2
  <br/>
  Testdata3
</mat-expansion-panel>

注：.sr-only类是用于隐藏元素但仍让屏幕阅读器可识别的样式，你可以使用以下样式定义：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

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