Angular11中mat-label置于mat-form-field外如何关联mat-select保证可访问性

方案1：使用原生label关联mat-select自动生成的可聚焦元素（推荐，无额外逻辑） #

Angular Material v11的mat-select组件会自动生成一个可聚焦的隐藏input元素，id规则为[你为mat-select设置的id]-input，直接用原生label的for属性绑定这个id即可实现点击触发的可访问性特性，无需额外事件处理。

<!-- 原生label直接关联mat-select生成的input id -->
<label for="filterColumn-input">{{'choose_column'|translate}}</label>
<mat-form-field appearance="outline">
  <mat-select 
    id="filterColumn" 
    placeholder="Select column to filter" 
    [(ngModel)]="data.filteredColumn"
  >
    <mat-option [value]="column.label" *ngFor="let column of data.displayColumns">
      {{column.label | translate}}
    </mat-option>
  </mat-select>
</mat-form-field>

特点：不需要修改原有组件逻辑，标签样式完全自主可控，可访问性符合原生标准。

方案2：通过CSS调整内部mat-label位置（无结构修改，最省心） #

如果不想改动组件结构，直接把mat-label放在mat-form-field内部，通过自定义CSS强制将label位移到表单框外部即可，完全保留Angular Material原生的可访问性关联逻辑：

模板代码 #

<mat-form-field appearance="outline" class="outside-label-form-field">
  <mat-label>{{'choose_column'|translate}}</mat-label>
  <mat-select 
    placeholder="Select column to filter" 
    [(ngModel)]="data.filteredColumn"
  >
    <mat-option [value]="column.label" *ngFor="let column of data.displayColumns">
      {{column.label | translate}}
    </mat-option>
  </mat-select>
</mat-form-field>

样式代码 #

::ng-deep .outside-label-form-field .mat-form-field-label {
  /* 取消默认浮动效果，固定在输入框上方 */
  position: relative !important;
  transform: translateY(0) scale(1) !important;
  top: 0 !important;
  margin-bottom: 8px;
  font-size: 14px;
}
::ng-deep .outside-label-form-field .mat-form-field-flex {
  /* 取消输入框内部给label预留的顶部padding */
  padding-top: 0 !important;
}
::ng-deep .outside-label-form-field .mat-form-field-outline-gap {
  /* 隐藏外边框上给浮动label预留的缺口 */
  display: none !important;
}

特点：不需要手动处理标签和组件的关联逻辑，所有原生可访问性特性（包括点击标签触发、屏幕阅读器识别）全部正常生效，适配成本最低。

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