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 3, 2017 8:26PM

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/>;
>
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.