NVDA在Firefox中无法读取<mat-error>标签的技术求助

核心问题分析 #

Chrome+NVDA组合能正常识别Angular Material的<mat-error>，但Firefox+NVDA对ARIA错误关联的处理逻辑存在差异，需要严格遵循无障碍规范调整绑定方式。

已尝试方案的优化与替代方案 #

1. 修正aria-errormessage绑定逻辑
   不要直接给属性赋值文本，而是给<mat-error>设置唯一ID，让<input>的aria-errormessage指向该ID，确保错误提示与输入框的关联关系被Firefox正确识别：

   <mat-form-field>
     <input matInput [formControl]="myControl" aria-errormessage="field-error">
     <mat-error id="field-error">请输入符合要求的内容</mat-error>
   </mat-form-field>
   

   注意：仅当表单控件处于invalid且touched/dirty状态时，<mat-error>才会被渲染（Angular Material默认逻辑，手动控制时需保持这一规则）。

2. 动态绑定aria-invalid状态
   给输入框添加动态的aria-invalid属性，明确告知NVDA输入内容存在错误，触发错误提示的播报逻辑：

   <input matInput 
          [formControl]="myControl" 
          aria-errormessage="field-error"
          [attr.aria-invalid]="myControl.invalid && myControl.touched">
   

3. 调整live区域配置
   避免直接给<mat-error>设置role="alert"（易与Angular Material内部的无障碍逻辑冲突），改用aria-live="polite"并确保元素初始隐藏，Firefox对这类动态显示的live区域播报支持更稳定：

   <mat-error id="field-error" aria-live="polite" *ngIf="myControl.invalid && myControl.touched">
     请输入符合要求的内容
   </mat-error>
   

   polite模式会在用户操作间隙播报提示，不会打断正常导航流程。

4. 版本兼容性检查
   确保Firefox和NVDA均为最新稳定版，旧版本可能存在ARIA支持的已知bug。

关键禁忌 #

不要通过强制聚焦<mat-error>解决问题，这会破坏键盘导航的正常逻辑，违反无障碍设计规范。

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