CODEWITHSUNDEEP
accessibilitywai-aria
Greg
Greg

Reputation: 746

Aria role='Alert' not being seen by NVDA

I have the following div tag:

<div id="ErrorMsg" 
      role="alert" 
      class="alert alert-error" 
      style="display:none;">
        Email or password incorrect
</div>

When I fire this jQuery it becomes visible, but is not announced as an alert. 

$('#ErrorMsg').show();

This is added to the page after I do an isvalid check like so:

ScriptManager.RegisterClientScriptBlock(
        this, 
        GetType(), 
        "Error", 
        "$('#ErrorMsg').show();", 
        true);

I'm testing with NVDA, the page is an aspx page with an update panel. I tried removing the panel but that doesn't seem to be the problem. Everything is working, just no notification of alert. The text boxes that are being checked have the describedby tags set and pointing to the div tags id.

Upvotes: 1

Views: 5449

Answers (1)

robot-nofollow
robot-nofollow

Reputation: 177

I would say the problem is one of two things.

There are other DOM things that are happening and interrupting the alert before it is read. One solution for this is to use aria-live="rude" although this doesnt help NDVA as this is still non-interrupting.

You may be able to put focus on the element by using $('#ErrorMsg').focus(). You will also need to put an tabindex="0" on the element. e.g.

<div id="ErrorMsg"
      role="alert"
      tabindex="0"      
      class="alert alert-error" 
      style="display:block;">
        Email or password incorrect
</div>

The other problem may be that the page is refreshed by ScriptManager.RegisterClientScriptBlock (i'm not a .NET developer so I may be wrong). That being the case, the above solution should also work.

However if this approach works it is possible that a screen-reader user is then 'lost' as to where they are on the page. So you may need to change the ErrorMsg element into an which links to the email or password input box.

Hope this helps.

Upvotes: 1

Related Questions