E-mail List Archives
Thread: error messages only announced by Chrome (using NVDA)
Number of posts in this thread: 9 (In chronological order)
From: Angela French
Date: Thu, Aug 03 2017 1:46PM
Subject: error messages only announced by Chrome (using NVDA)
No previous message | Next message →
Hello List Members,
We continue to struggle with aria-live content being read by our screen readers (we only have NVDA). In this case it is form submission error messages. I'd be grateful if anyone can take a look.
Student Login<http://devapps.sbctc.edu/TechPrepV2/Account/StudentLogin>;
The form requires a username and password. The error message should read "Unable to log in. Please check your user name and password and try again."
Since it is an error message, we are trying aria-live="assertive"
Thanks you,
Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
www.sbctc.edu<;http://www.sbctc.edu/>;
From: Tim Harshbarger
Date: Thu, Aug 03 2017 4:00PM
Subject: Re: error messages only announced by Chrome (using NVDA)
← Previous message | Next message →
I think I would need to look at the javascript you are using to create the live region. I wasn't able to figure anything out by looking at the page or the DOM.
TO make sure I wasn't losing my mind, I did try to create a simple example on Code Pen to try to mimic what I think you are doing--but that is a guess on my part. However, it works:
https://codepen.io/TimA11y/pen/WEobWq
From: Angela French
Date: Thu, Aug 03 2017 4:15PM
Subject: Re: error messages only announced by Chrome (using NVDA)
← Previous message | Next message →
I didn't read for me until I tabbed off of the test button after having clicked it.
From: Birkir R. Gunnarsson
Date: Thu, Aug 03 2017 8:26PM
Subject: Re: error messages only announced by Chrome (using NVDA)
← Previous message | Next message →
The key to an effective live region is to make sure content inside it changes.
When the content of a live region changes, an event should be fired by
the browser, picked up by the screen reader, and then handled
according to the aria-live and aria-atomic attributes.
<div aria-live="assertive" aria-atomic="true"> content goes here </div>
means that if you update this content, (either add text or add an
element) the entire content is read.
If you use aria-live="assertive" by itself (the value of aria-atomic
is false) only the content you changed or added is read.
What you cannot do is insert an element indo the DOM that already has
aria-live="assertive". This is because the content inside the div with
aria-live has to change in order for the content to be announced.
If you inject the element with aria-live into the document, no changes
occurred inside the element, so nothing is announced.
I have a bunch of working JavaScript examples, I can dig around
tomorrow, but Tim's example should work (knowing his work it probably
orks better than mine).
But just remember, to trigger a live region announcement you either
have to add content or change the content inside the element with
aria-live.
I guess the problem in your case is that you are inserting the elemeng
with aria-live and the content into the document (in which case no
live region updates took place).
On 8/3/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> I didn't read for me until I tabbed off of the test button after having
> clicked it.
>
>
From: Tim Harshbarger
Date: Thu, Aug 03 2017 9:10PM
Subject: Re: error messages only announced by Chrome (using NVDA)
← Previous message | Next message →
Well, I evidently was moving too fast for my own good.
I wrote the code and tested it myself with Firefox and JAWS 18. I evidently forgot to test it with NVDA.
So, when I just ran the test with NVDA 2017.2, the first time I clicked the test button the aria-live region updated but did not speak. The second time I clicked it, it did speak. I started the testing process over again 3 times and I ended up with the same result each time. The region was updated the first time but did not speak when I was using NVDA 2017.2. However, every time I clicked the button after the first time, it did speak.
In my code, when the button is clicked:
* I check for the existence of the live region.
* If the region does not exist, I create the node, add the attributes, and append it to the body element.
* if the region already exists, I skip to the next step.
* I then update the innerHTML property of the live region.
Appending the live region node and updating the contents of the live region node are separate steps. But could there be something amiss in the timing of appending the region and updating the region? I could try using a setInterval method to delay the updating of the content to see if that helps. However, it is only a guess on my part that some technique like that is being used on the original site. I would try that now, but evidently it is late and I need to rise early in the morning.
Thanks,
Tim
From: Reinhard Stebner
Date: Fri, Aug 04 2017 5:24AM
Subject: Re: error messages only announced by Chrome (using NVDA)
← Previous message | Next message →
I tested this on voiceover on the iPhone and saw exactly what you're talking about. Just want to give you a quick update from her use her using voiceover on the iPhone.
Sent from my iPhone
> On Aug 3, 2017, at 11:10 PM, Tim Harshbarger < = EMAIL ADDRESS REMOVED = > wrote:
>
> Well, I evidently was moving too fast for my own good.
>
> I wrote the code and tested it myself with Firefox and JAWS 18. I evidently forgot to test it with NVDA.
>
> So, when I just ran the test with NVDA 2017.2, the first time I clicked the test button the aria-live region updated but did not speak. The second time I clicked it, it did speak. I started the testing process over again 3 times and I ended up with the same result each time. The region was updated the first time but did not speak when I was using NVDA 2017.2. However, every time I clicked the button after the first time, it did speak.
>
> In my code, when the button is clicked:
> * I check for the existence of the live region.
> * If the region does not exist, I create the node, add the attributes, and append it to the body element.
> * if the region already exists, I skip to the next step.
> * I then update the innerHTML property of the live region.
>
> Appending the live region node and updating the contents of the live region node are separate steps. But could there be something amiss in the timing of appending the region and updating the region? I could try using a setInterval method to delay the updating of the content to see if that helps. However, it is only a guess on my part that some technique like that is being used on the original site. I would try that now, but evidently it is late and I need to rise early in the morning.
>
> Thanks,
> Tim
>
>
From: Birkir R. Gunnarsson
Date: Fri, Aug 04 2017 7:00AM
Subject: Re: error messages only announced by Chrome (using NVDA)
← Previous message | Next message →
What if you already have the element with the live region in the
document (but it is empty).
Then you use the textContent property to populate it with text in the
Javascript.
Does that make a difference?
On 8/4/17, Reinhard Stebner < = EMAIL ADDRESS REMOVED = > wrote:
> I tested this on voiceover on the iPhone and saw exactly what you're talking
> about. Just want to give you a quick update from her use her using voiceover
> on the iPhone.
>
> Sent from my iPhone
>
>> On Aug 3, 2017, at 11:10 PM, Tim Harshbarger
>> < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> Well, I evidently was moving too fast for my own good.
>>
>> I wrote the code and tested it myself with Firefox and JAWS 18. I
>> evidently forgot to test it with NVDA.
>>
>> So, when I just ran the test with NVDA 2017.2, the first time I clicked
>> the test button the aria-live region updated but did not speak. The
>> second time I clicked it, it did speak. I started the testing process over
>> again 3 times and I ended up with the same result each time. The region
>> was updated the first time but did not speak when I was using NVDA 2017.2.
>> However, every time I clicked the button after the first time, it did
>> speak.
>>
>> In my code, when the button is clicked:
>> * I check for the existence of the live region.
>> * If the region does not exist, I create the node, add the attributes, and
>> append it to the body element.
>> * if the region already exists, I skip to the next step.
>> * I then update the innerHTML property of the live region.
>>
>> Appending the live region node and updating the contents of the live
>> region node are separate steps. But could there be something amiss in the
>> timing of appending the region and updating the region? I could try using
>> a setInterval method to delay the updating of the content to see if that
>> helps. However, it is only a guess on my part that some technique like
>> that is being used on the original site. I would try that now, but
>> evidently it is late and I need to rise early in the morning.
>>
>> Thanks,
>> Tim
>>
>>
From: Tim Harshbarger
Date: Mon, Aug 07 2017 7:09AM
Subject: Re: error messages only announced by Chrome (using NVDA)
← Previous message | Next message →
I think that might be the best approach.
I had a chance to try some things with the code this weekend--unfortunately due to some problems with the accessibility of the UI for Coe Pen I accidentally deleted the code later. But in those tests, I found out if I used window.setTimeout to add a 5 millisecond delay between when the live region is created and appended to the document and the message is written to the live region that NVDA would then speak the message every time. I wonder if this has to do with the asynchronous nature of javascript. It does not necessarily wait for one command to complete before it processes the next command so it is always possible that the message might be written to the live region before the live region is added to the document. If that is the case, I don't think the message would be spoken. All that is just a guess on my part. But I expect if the aria-live regions already exist on the page prior to the message being written to them that it should speak then.
Thanks,
Tim
From: Angela French
Date: Mon, Aug 07 2017 2:37PM
Subject: Re: error messages only announced by Chrome (using NVDA)
← Previous message | No next message
Hi Birkir,
I'm trying to understand your response. Are you telling me that we CANNOT have this:
<div role="alert" aria-live="assertive"> </div>
and then populate the <div> with the error message after the user clicks the Sign in button?
Angela French