Angular项目mat-radio-group触发无障碍检测role=radiogroup容器为空错误

报错根因 #

Container Element is empty role="radiogroup"报错是因为Angular Material的mat-radio-group组件默认携带role="radiogroup"属性，而无障碍规范要求所有单选组容器必须具备可被辅助设备识别的名称，说明该组的选择用途，未配置名称就会触发该报错。

修复方案 #

方案1：绑定可见标签（优先推荐） #

如果页面上存在对应单选组的可见提示文字，通过aria-labelledby属性关联两者，既满足视力正常用户的查看需求，也适配屏幕阅读器的识别要求：

<!-- 单选组可见提示标签 -->
<span id="email-group-label">选择使用的邮箱</span>

<mat-radio-group 
  formControlName="csff"
  class="conflict-radio"
  aria-labelledby="email-group-label"
>
  <mat-radio-button class="ml-0 conflict-radio" value="old">{{ emailAddress }}</mat-radio-button>
  <mat-radio-button class="ml-0 conflict-radio" value="new">Email</mat-radio-button>
</mat-radio-group>

方案2：添加隐式标签 #

如果不需要展示可见的组提示文字，直接给mat-radio-group添加aria-label属性声明组用途即可：

<mat-radio-group 
  formControlName="csff"
  class="conflict-radio"
  aria-label="选择要使用的邮箱地址"
>
  <mat-radio-button class="ml-0 conflict-radio" value="old">{{ emailAddress }}</mat-radio-button>
  <mat-radio-button class="ml-0 conflict-radio" value="new">Email</mat-radio-button>
</mat-radio-group>

特殊场景处理 #

如果你的单选按钮是通过*ngIf、*ngFor动态渲染的，需要确保检测时单选按钮已经渲染完成，可通过给mat-radio-group添加*ngIf判断数据源加载完成后再渲染组件，避免工具检测时组内为空触发误报。

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