E-mail List Archives
Thread: Aria Live announcements and .Net Pages
Number of posts in this thread: 15 (In chronological order)
From: Greg Gamble
Date: Wed, Oct 11 2017 11:26AM
Subject: Aria Live announcements and .Net Pages
No previous message | Next message →
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
From: Ugurcan Kutluoglu
Date: Wed, Oct 11 2017 11:41AM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
Hi Greg,
The "alert" role should be on the live container, not the message.
<div class="text-center" role="alert" aria-live="assertive"
aria-atomic="true">
<asp:Literal runat="server"></asp:Literal>
</div>
Ugi
On Wed, Oct 11, 2017 at 10:26 AM, Greg Gamble < = EMAIL ADDRESS REMOVED = > wrote:
> 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
>
> > > > >
From: Greg Gamble
Date: Wed, Oct 11 2017 12:48PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
Yes ... I've tried that already. No difference, but I'll update it to the correct way.
Thanks
Greg Gamble
p - 360-704-4376
From: Bryan Garaventa
Date: Wed, Oct 11 2017 1:53PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
Why are you including aria-live and aria-atomic in combination with role=alert? The alert role includes all supporting attributes automatically and combining it with others may conflict with the role.
I just tested this using NVDA in Firefox on Win7 with role=alert as documented here, and it works as expected.
http://whatsock.com/training/#hd26
The test page referenced in this section includes a Test button for validating this functionality.
Also, live regions should not be nested. The JS method being used to add content to the container may also yield differing results as well.
Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
From: Angela French
Date: Wed, Oct 11 2017 1:59PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
NVDA/IE does not read the numbers to me Bryan.
Firefox and Chrome/NVDA does though.
From: Swift, Daniel P.
Date: Wed, Oct 11 2017 2:01PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
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
From: Greg Gamble
Date: Wed, Oct 11 2017 2:25PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
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
From: Bryan Garaventa
Date: Wed, Oct 11 2017 2:28PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
NVDA has never been optimized for supporting IE, this has been the case for many years and likely will never work reliably in IE using NVDA for many ARIA features.
Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
From: Bryan Garaventa
Date: Wed, Oct 11 2017 2:29PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
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 ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
From: Angela French
Date: Wed, Oct 11 2017 2:54PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
Good to know. Thanks.
Angela French
From: Greg Gamble
Date: Wed, Oct 11 2017 3:16PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
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
From: Bossley, Peter A.
Date: Tue, Oct 17 2017 3:01PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
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.
From: JP Jamous
Date: Wed, Oct 18 2017 4:04AM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
Since I like to code in ASP.NET, I found that very interesting Peter.
Greg,
Is the div getting an auto postback? Maybe a div parent of it too?
From: Greg Gamble
Date: Wed, Oct 18 2017 9:49AM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | Next message →
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
From: mhysnm1964
Date: Wed, Oct 18 2017 7:59PM
Subject: Re: Aria Live announcements and .Net Pages
← Previous message | No next message
Could this be related to the caching from UIA or the Screen reader that they do? Not sure how to troubleshoot which one. But Have seen something related to UIA caching where performance was effected in some windows screen readers. I cannot go into specifics due do NDA's.