如何使屏幕阅读器工具大声读取内联错误？ [英] How to make inline errors read aloud by screen reader tools?

问题描述

我正在进行辅助功能测试。我创建了一个电子邮件文本框，并添加了一些验证。我想在输入错误的电子邮件后移至下一个元素，屏幕阅读器应读取内联错误。我遇到了使用aria-describeby和aria-live属性，但是不知道如何在此代码中使用它。

I am doing accessibility testing. I created an email text box and added some validation as well. I want after typing wrong email as I move to next element screen reader should read the inline errors. I came across using aria-describeby and aria-live attribute but don't know how to use it in this code .

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

推荐答案

aria- describeby 将附加信息添加到元素。元素通常具有名称或标签，此外还可以具有描述。如果错误消息位于单独的元素中，例如< div> 或< span> 可以将< div> 与输入字段相关联。

aria-describedby adds additional information to an element. An element usually has a name or label and additionally it can have a description. If your error message is in a separate element, such as a <div> or <span>, you can associate that <div> with the input field.

您的代码可能类似于：

<label for="emailID">email address:</label>
<input id="emailID" aria-describedby="errorMsg">
<div id="errorMsg">invalid email address</div>

某些屏幕阅读器会读取 aria所描述的字段标签后，其他人会告诉您按快捷键以听取描述。由屏幕阅读器决定如何将其呈现给用户。

Some screen readers will read the aria-describedby after the field's label and others will tell you to hit a shortcut key to hear the description. It's up to the screen reader to decide how to present it to the user.

如果上述字段有误，则应具有 aria-invalid = true

If the above field were in error, then it should have aria-invalid="true" as well.

<input id="emailID" aria-describedby="errorMsg" aria-invalid="true">

为了让屏幕阅读器宣布错误消息，它应具有 aria-live =礼貌 。

In order for the error message to be announced by screen readers, it should have aria-live="polite".

<div id="errorMsg" aria-live="polite"></div>

发现错误时，将文本插入< div> （通过javascript），并且屏幕阅读器会宣布它是因为它是实时区域。

When you discover an error, you insert text into the <div> (via javascript) and the screen reader will announce it because it's a live region.

document.getElementById("errorMsg").innerHTML = "invalid email address";

这篇关于如何使屏幕阅读器工具大声读取内联错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！