如何通过屏幕读取器工具朗读内联错误？
提问于 2018-11-05 23:06:14
我正在做可访问性测试。我创建了一个电子邮件文本框，并添加了一些验证。我希望在输入错误的电子邮件后，当我移动到下一个元素时，屏幕阅读器应该读取内联错误。我偶然发现使用了aria-describeby和aria-live属性，但不知道如何在这段代码中使用它。
<asp:panel defaultbutton="btnEmail" cssclass="row" runat="server">
<biw:labelui associatedcontrolid="TextEmail" text="Email Address" runat="server" />
<biw:textbox id="TextEmail" width="200" runat="server" />
<asp:requiredfieldvalidator controltovalidate="TextEmail" text="*" errormessage="Please enter an e-mail address" display="dynamic" runat="server" />
<biw:emailaddressvalidator controltovalidate="TextEmail" text="*" errormessage="Please enter a valid e-mail address" display="dynamic" runat="server" />
<asp:customvalidator id="EmailValidator" controltovalidate="TextEmail" text="*" display="dynamic" runat="server" />
</asp:panel>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-06 00:28:21
aria-describedby向元素添加其他信息。元素通常有一个名称或标签，而且它还可以有一个描述。如果错误消息位于单独的元素中，如<div>或<span>，则可以将该<div>与输入字段关联。
您的代码看起来可能类似于：
<label for="emailID">email address:</label>
<input id="emailID" aria-describedby="errorMsg">
<div id="errorMsg">invalid email address</div>一些屏幕阅读器会在字段的标签之后读取aria-describedby，而另一些则会告诉您按一下快捷键就可以听到描述。它是由屏幕阅读器决定如何将它呈现给用户。
如果上面的字段有错误，那么它也应该有aria-invalid="true"。
<input id="emailID" aria-describedby="errorMsg" aria-invalid="true">为了让屏幕阅读器发布错误消息，它应该有aria-live="polite"。
<div id="errorMsg" aria-live="polite"></div>当您发现错误时，将文本插入<div> (通过javascript)，屏幕阅读器将宣布它，因为它是一个活动区域。
document.getElementById("errorMsg").innerHTML = "invalid email address";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53167195
复制
腾讯云开发者
