WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: error messages only announced by Chrome (using NVDA)

for

From: Birkir R. Gunnarsson
Date: Aug 4, 2017 7:00AM


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 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 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
>>
>> -----Original Message-----
>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf
>> Of Birkir R. Gunnarsson
>> Sent: Thursday, August 03, 2017 9:27 PM
>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>> Subject: Re: [WebAIM] error messages only announced by Chrome (using NVDA)
>>
>> 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 REMOVED> > wrote:
>>> I didn't read for me until I tabbed off of the test button after having
>>> clicked it.
>>>
>>> -----Original Message-----
>>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>>> Behalf
>>> Of Tim Harshbarger
>>> Sent: Thursday, August 03, 2017 3:01 PM
>>> To: WebAIM Discussion List < <EMAIL REMOVED> >
>>> Subject: Re: [WebAIM] error messages only announced by Chrome (using
>>> NVDA)
>>>
>>> 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
>>>
>>>
>>> -----Original Message-----
>>> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
>>> Behalf
>>> Of Angela French
>>> Sent: Thursday, August 03, 2017 2:46 PM
>>> To: WebAim Forum ( <EMAIL REMOVED> )
>>> < <EMAIL REMOVED> >
>>> Subject: [WebAIM] error messages only announced by Chrome (using NVDA)
>>>
>>> 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 REMOVED> <mailto: <EMAIL REMOVED> >
>>> www.sbctc.edu<;http://www.sbctc.edu/>;
>>>
>>> >>> >>> at
>>> http://webaim.org/discussion/archives
>>> >>> >>> >>> at
>>> http://webaim.org/discussion/archives
>>> >>> >>> >>> >>> >>>
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> >> >> >> >> >> > > > > >


--
Work hard. Have fun. Make history.