Angular Material mat-option结合*ngFor的ARIA标签未通过Lighthouse检测

我之前在项目里也碰到过一模一样的Lighthouse审计问题！当时排查了好久才发现问题出在手动添加的ARIA角色上，给你分享下解决方案和避坑点：

问题根源 #

Angular Material的mat-select和mat-option组件本身已经内置了完整的无障碍语义支持——mat-select会自动设置正确的role="listbox"，而每个mat-option也会自动生成role="option"以及对应的ARIA状态属性。你手动给mat-option加上role="option"，反而会让Lighthouse的检测逻辑混乱，认为这个元素的ARIA结构不符合规范（相当于重复定义了角色，或者干扰了组件内部的语义层级）。

解决方案 #

直接去掉mat-option上的role="option"属性即可，让组件自己处理无障碍语义：

<mat-select formControlName="tag" aria-label="Select a Tag">
  <mat-option *ngFor="let tag of tags" [value]="tag">
    {{tag | translate}}
  </mat-option>
</mat-select>

额外避坑建议 #

• 别手动覆盖组件默认的ARIA属性：Angular Material的组件在无障碍方面做了充分优化，除非你有非常特殊的自定义需求，否则不要随意添加原生ARIA角色或属性，很容易破坏默认的语义结构。
• 优化标签的无障碍性：如果你的mat-select旁边有可见的文字标签（比如<label for="tag-select">Tag:</label>），建议用aria-labelledby代替aria-label，关联到标签的ID，这样对屏幕阅读器用户更友好：

  <label id="tag-label">Tag:</label>
  <mat-select formControlName="tag" aria-labelledby="tag-label">
    <!-- mat-option内容 -->
  </mat-select>
  

• 提前用工具检查：在跑Lighthouse之前，可以用Chrome DevTools的「无障碍」面板（Accessibility）查看组件的ARIA结构，提前发现语义冲突的问题。

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