WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Aria Live announcements and .Net Pages

for

From: Greg Gamble
Date: Oct 11, 2017 2:25PM

That's what I was thinking to, but it was as Bryan said ... nesting. I pulled the div to the top of the page and it now works as expected, but why would that be an issue ... unless it's a DOM traversing issue.

Bryan ... I tried aria-live, and nothing. Using Role='Alert' does work. But as noted above, it has to be at the top of the page. Not exactly the look I'm looking for, but I'll see if I can move it down with CSS.

Question now is why? Bootstrap does use a lot div's, but why would nesting effect a tags usage?

Greg Gamble
p - 360-704-4376



-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Swift, Daniel P.
Sent: Wednesday, October 11, 2017 1:02 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Aria Live announcements and .Net Pages

Greg, is there any chance that your issue is related to the life-cycle of the page? In my experience, postback introduces all kinds of fun issues.

Dan Swift
Senior Web Specialist
Enterprise Services
West Chester University
610.738.0589

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Greg Gamble
Sent: Wednesday, October 11, 2017 1:26 PM
To: <EMAIL REMOVED>
Subject: [WebAIM] Aria Live announcements and .Net Pages

I have a Web Site, created under .Net 4.5 with C#. For the front end we're using the Bootstrap framework and jQuery. This is a Web Forms site, not MVC.

My issue is in getting aria-live regions to announce an alert under NVDA.

I have the following page markup.

<div class="text-center" aria-live="assertive" aria-atomic="true"> <asp:Literal runat="server"></asp:Literal> </div>

The control asp:Literal is where I am injecting the following html:

<p class='bg-success' style='padding: 4px;' role='alert'> <span class='glyphicon glyphicon-ok' aria-hidden='true'></span>;" + sMessage + "
</p>

NOTE: The literal control is like a place holder for content, but without any markup ... it simply shows the content you add to it as is

The markup when I add the message looks like this:

<div class="text-center" aria-live="polite" aria-atomic="true">
<p class='bg-warning' style='padding: 4px;' role='alert'>
<span class='glyphicon glyphicon-ok' aria-hidden='true'></span>
record saved
</p>
</div>

Prior to adding the message, the generated markup looks like this:

<div class="text-center" aria-live="polite" aria-atomic="true">

</div>


It should announce the text, but I get nothing. I even tried injecting the text via JavaScript, but I get the same results ... or lack of.

Any .net developers that have gotten this to work?





Greg Gamble
SBCTC - Olympia | Information Services