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

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