CODEWITHSUNDEEP
asp.netaccessibility
DEO KUMAR DAS
DEO KUMAR DAS

Reputation: 99

How to make inline errors read aloud by screen reader tools?

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>

Upvotes: 2

Views: 1728

Answers (2)

Ambuj Khanna
Ambuj Khanna

Reputation: 1219

You should use aria-errormessage to read error instead aria-describedby because both are similar but purpose is different.

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

You may find more information here

Upvotes: 0

slugolicious
slugolicious

Reputation: 17475

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.

You code might look something like:

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

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.

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

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>

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

Upvotes: 2

Related Questions