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

问题描述

基本上，我希望宣布内联表单错误。我在角度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屏幕阅读器。

解决方法

尝试使用alert角色

<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>