angular - 屏幕阅读器可以以角度形式访问的表单错误

Question

基本上我希望公布内联表单错误。我有以下 Angular 7 的形式

 <form testForm="ngForm">
    <input type="text" id="email" name="email" #email="ngModal" 
       aria-labelledby="emailReqError emailPatternError">
    // Error handling part
    <span *ngIf="email.errors?.required" id="emailReqError">
     Please enter Email
    </span>
    <span *ngIf="email.errors?.pattern" id="emailPatternError">
      Please enter valid email address
    </span> 
    <button type="submit" (click)="login(testForm)">Sign In</button>
 </form>

当用户输入无效的电子邮件地址时，不会以某种方式宣布模式内联错误。用户键入时，此错误会显示在 UI 中。我希望屏幕阅读器宣布此错误。我也试过aria-live="assertive"但它似乎不适用于模式跨度。我正在使用chromevox 屏幕阅读器。

Answer 1

尝试警报角色

<form testForm="ngForm">
    <input type="text" id="email" name="email" #email="ngModal" 
       aria-labelledby="emailReqError emailPatternError">
    // Error handling part
    <span role="alert" *ngIf="email.errors?.required" id="emailReqError">
     Please enter Email
    </span>
    <span role="alert" *ngIf="email.errors?.pattern" 
     id="emailPatternError">
      Please enter valid email address
    </span> 
    <button type="submit" (click)="login(testForm)">Sign In</button>
 </form>