E-mail List Archives

Re: Aria Live announcements and .Net Pages

for

From: Greg Gamble
Date: Oct 18, 2017 9:49AM


I'm thinking it’s the Async postback ... The alert is working, but before it can announce the page is somehow interrupting it, possibly on the DOM being updated? With the div containing the role='alert' at the top it's not being interrupted? Maybe a dwell in the Page_Init, but that would slow all pages down ...

Setting this code to top of content region is working :

<div class="text-center" role="alert">
<asp:Literal ID="litMsg" runat="server"></asp:Literal>
</div>

I send my text to it and they are announced. This is the method I use ... It's in a Utility class that I call as needed:
The method call:
ConstClass.SetMessage(this.Page, "OK", "Account Updated Successfully");

Method in ConstClass class:
public static void SetMessage(Page pg, String type, String sMessage)
{
Literal feedback = (Literal)Utility.FindControlRecursive(pg, "litMsg");
feedback.Visible = false;
feedback.Text = String.Empty;
switch (type.ToUpper())
{
case "ERROR":
{
feedback.Visible = true;
feedback.Text = @"<p class='bg-danger' style='padding: 4px;' ><span /><span class='glyphicon glyphicon-warning-sign' aria-hidden='true'></span> " + sMessage + @"</p>";
break;
}
case "OK":
{
feedback.Visible = true;
feedback.Text = @"<p class='bg-success' style='padding: 4px;' ><span class='glyphicon glyphicon-ok' aria-hidden='true'></span> " + sMessage + @"</p>";
break;
}
case "EDIT":
{
feedback.Visible = true;
feedback.Text = @"<p class='bg-warning' style='padding: 4px;' ><span class='glyphicon glyphicon-ok' aria-hidden='true'></span> " + sMessage + @"</p>";
break;
}
case "CLEAR":
{
feedback.Visible = false;
break;
}
default:
{
feedback.Visible = true;
feedback.Text = @"<p class='bg-primary' style='padding: 4px;'> " + sMessage + @"</p>";
break;
}
}
}

FYI ... The CSS classes shown are in Bootstrap.

Greg


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bossley, Peter A.
Sent: Tuesday, October 17, 2017 2:02 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Aria Live announcements and .Net Pages

We have also occasionally noticed that in DotNet panels with partial post backs that live regions don't work properly unless a short delay is implemented before the text in the live region is updated.
I've never been able to track down exactly why that is, but just know that it is.

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

Did some checking ... So if I put the div with role=alert on a page alone it works fine. If I wrap it in a plain div tag as shown below, it doesn’t work. Take the wrapping div away, it works fine:

<div>
<div role="alert">
<asp:Literal ID="litMsg" runat="server"></asp:Literal>
</div>
</div


Very strange ...

Greg Gamble
p - 360-704-4376



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

It doesn't matter if the live region is at the top of the page in the middle or at the end, as long as live regions are not nested within other live regions, this isn't supported because it presents event triggering conflicts in the browsers.


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com

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

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