如何通过屏幕读取器工具朗读内联错误？

Question

我正在做可访问性测试。我创建了一个电子邮件文本框，并添加了一些验证。我希望在输入错误的电子邮件后，当我移动到下一个元素时，屏幕阅读器应该读取内联错误。我偶然发现使用了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>

Answer 1

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