CODEWITHSUNDEEP
javascripthtmlreactjswai-aria
pareshm
pareshm

Reputation: 4984

NVDA isn't reading multiple aria-live tags on single web page.

I am using multiple aria-live tags on a webpage, and when an error is shown on webpage NVDA only reads the first error message and not all. I have user aria-live="assertive" also have also tried with aria-live="polite" but not working, can anyone provide some solution for it. below is my code:

<div>
        <input type="text" name="username" tabIndex="0"/>
        <span class="usernameerr" role="alert" aria-live="assertive">Enter User Name</span>
    </div>
    <div>
        <input type="passowrd" name="password" tabIndex="0"/>
        <span class="passworderr" role="alert" aria-live="assertive">Enter Password</span>
    </div>
    <div>
        <input type="text" name="repassword" tabIndex="0"/>
        <span class="repassworderr" role="alert" aria-live="assertive">Renter Password</span>
    </div>
    <div>
        <input type="submit" tabIndex="0"/>
    </div>

Help will be appreciated.

Upvotes: 1

Views: 2356

Answers (1)

slugolicious
slugolicious

Reputation: 17563

If you have role=alert, that implies aria-live=assertive. When you have aria-live=assertive, a screen reader might clear the queue of pending messages. So if you have three assertive areas, they might step on each other and clear the other messages. The last one probably wins.

See https://www.w3.org/TR/wai-aria-1.1/#aria-live. It says "User agents or assistive technologies MAY choose to clear queued changes when an assertive change occurs."

So you might hear the problem with one screen reader and not another. You can test it out by removing role=alert and changing aria-live to polite. (You said you tried it with aria-live=polite but if you didn't remove the alert role, then it still would have been assertive.)

Upvotes: 1

Related Questions