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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0