屏幕 reader 可以在 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>

不知何故 pattern 当用户输入无效的电子邮件地址时，内联错误不会被告知。当用户键入时，此错误显示在 UI 中。我希望屏幕 reader 也显示此错误。我也试过 aria-live="assertive" 但它似乎不适用于模式跨度。我正在使用 chromevox 屏幕reader。

Answer 1

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

屏幕 reader 可以在 angular 表单中访问的表单错误

Form errors that screen reader can access in angular form

wai-aria

aria-live

angular

angular-reactive-forms