[英]Form errors that screen reader can access in angular form
基本上我希望宣布内联表单错误。 我在 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 屏幕阅读器。
尝试警报角色
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.