WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Angela French
Date: Aug 7, 2017 2:37PM

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



-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Thursday, August 03, 2017 7: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/>;
>
> > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> > > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.