E-mail List Archives
Thread: role="alert" not being read on page load
Number of posts in this thread: 8 (In chronological order)
From: Joseph Sherman
Date: Thu, Jun 13 2019 2:25PM
Subject: role="alert" not being read on page load
No previous message | Next message →
Hello. I have a form where after the user submits incorrect information, the page refreshes with an error message with role="alert". However I find the error text is not being read in FireFox with JAWS or NVDA. Code below. Are we doing something wrong?
<div role="alert" class="alert alert-error alert-danger">
<ul><li>More than one user was found that matches the information you provided. Please contact your college support team and tell them you received this error.</li></ul></div>
Joseph
From: Bryan Garaventa
Date: Thu, Jun 13 2019 3:23PM
Subject: Re: role="alert" not being read on page load
← Previous message | Next message →
Hi,
ARIA live regions are only meant to fire new content events when content is dynamically added to them, so it's not surprising that nothing is occurring when this is added to a static webpage like this.
This is described in the section 3.5.4: Live Region Caveats,
http://whatsock.com/training/#hd28
This training document was written when ARIA 1.0 was the primary reference, however the guidance here is still valid even with 1.1. I plan to update the reference urls and related sections in the future as 1.1 and 1.2 changes are resolved.
All the best,
Bryan
Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.LevelAccess.com
From: Isabel Holdsworth
Date: Fri, Jun 14 2019 2:03AM
Subject: Re: role="alert" not being read on page load
← Previous message | Next message →
Hi Joseph,
This error doesn't need to be an alert, so long as it's positioned
somewhere in the DOM where it can be easily found, for example just
after the page's H1 heading.
It would also be helpful to mention in the window title and H1 heading
that there's an error.
Cheers, Isabel
On 13/06/2019, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> Hi,
> ARIA live regions are only meant to fire new content events when content is
> dynamically added to them, so it's not surprising that nothing is occurring
> when this is added to a static webpage like this.
>
> This is described in the section 3.5.4: Live Region Caveats,
> http://whatsock.com/training/#hd28
>
> This training document was written when ARIA 1.0 was the primary reference,
> however the guidance here is still valid even with 1.1. I plan to update the
> reference urls and related sections in the future as 1.1 and 1.2 changes are
> resolved.
>
> All the best,
> Bryan
>
>
> Bryan Garaventa
> Principal Accessibility Architect
> Level Access, Inc.
> = EMAIL ADDRESS REMOVED =
> 415.624.2709 (o)
> www.LevelAccess.com
>
>
From: Laura Fathauer
Date: Fri, Jun 14 2019 6:48AM
Subject: Re: role="alert" not being read on page load
← Previous message | Next message →
The "alert" region needs to be in the page before content is added to
it. Loading both the alert region and the content when the page loads
generally causes the behavior you are seeing, unless you code in a
pause for adding the content to the alert region. However, if you
follow the things Isabel stated, you wouldn't need the dynamic alert
on the page reload.
Laura
On Fri, Jun 14, 2019 at 4:03 AM Isabel Holdsworth
< = EMAIL ADDRESS REMOVED = > wrote:
>
> Hi Joseph,
>
> This error doesn't need to be an alert, so long as it's positioned
> somewhere in the DOM where it can be easily found, for example just
> after the page's H1 heading.
>
> It would also be helpful to mention in the window title and H1 heading
> that there's an error.
>
> Cheers, Isabel
>
> On 13/06/2019, Bryan Garaventa < = EMAIL ADDRESS REMOVED = > wrote:
> > Hi,
> > ARIA live regions are only meant to fire new content events when content is
> > dynamically added to them, so it's not surprising that nothing is occurring
> > when this is added to a static webpage like this.
> >
> > This is described in the section 3.5.4: Live Region Caveats,
> > http://whatsock.com/training/#hd28
> >
> > This training document was written when ARIA 1.0 was the primary reference,
> > however the guidance here is still valid even with 1.1. I plan to update the
> > reference urls and related sections in the future as 1.1 and 1.2 changes are
> > resolved.
> >
> > All the best,
> > Bryan
> >
> >
> > Bryan Garaventa
> > Principal Accessibility Architect
> > Level Access, Inc.
> > = EMAIL ADDRESS REMOVED =
> > 415.624.2709 (o)
> > www.LevelAccess.com
> >
> >
From: Joseph Sherman
Date: Fri, Jun 14 2019 7:00AM
Subject: Re: role="alert" not being read on page load
← Previous message | Next message →
If we put the error messages after h1 and h2 and some instructions, should we set focus to the error message div on page load?
Joseph
From: Isabel Holdsworth
Date: Fri, Jun 14 2019 8:36AM
Subject: Re: role="alert" not being read on page load
← Previous message | Next message →
Hi Joseph,
> If we put the error messages after h1 and h2 and some instructions, should we set focus to the error message div on page load?
No. If you do that, then you're moving the focus past some important
instructions that the user presumably needs to read, and screenreader
users may never move back up the DOM and so may never read your
instructions.
If you position the error just after the H1, blind users will find it
straight away. If you hide it further down in the page, they may not.
The fact that an error has occurred is surely the most important
information on the page. If you don't make it prominent, other users
might miss it too. For example, if the page is zoomed up so the text
is quite large, say twice its normal size, is the error still in the
viewport?
Cheers, Isabel
On 14/06/2019, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
> If we put the error messages after h1 and h2 and some instructions, should
> we set focus to the error message div on page load?
>
>
>
> Joseph
>
>
From: Mohith BP
Date: Sun, Jun 16 2019 11:59PM
Subject: Re: role="alert" not being read on page load
← Previous message | Next message →
Hi Joseph Sherman,
The error or success message of action such as form submission need to
be communicated to the user immediately. Hence just posting error
message somewhere is not a good practice.
Please improve the alert region as suggested by Bryan Garaventa.
Note: the element containing aria live regions such as role alert,
aria-live polite or assertive need to be there in the DOM and the text
need to be injected through script. Still if it is not reading then
provide 1 second (1000 ms) delay before injecting the text.
If you are dynamically creating the element then also there need to be
delay from creating the element and injecting the text.
If you have multiple errors on the form it is good to list out all the
errors in the beginning of the form with link to the form field.
Ensure specific error message for each form field is programmatically
associated with the form field with aria-describedby and set the focus
to the list of errors or the first error field based on your
implementation.
Thanks & Regards,
Mohith B. P.
On 6/14/19, Joseph Sherman < = EMAIL ADDRESS REMOVED = > wrote:
> Hello. I have a form where after the user submits incorrect information, the
> page refreshes with an error message with role="alert". However I find the
> error text is not being read in FireFox with JAWS or NVDA. Code below. Are
> we doing something wrong?
>
> <div role="alert" class="alert alert-error alert-danger">
> <ul><li>More than one user was found that matches the information you
> provided. Please contact your college support team and tell them you
> received this error.</li></ul></div>
>
>
>
> Joseph
>
> > > > >
From: Brian Lovely
Date: Mon, Jun 17 2019 5:13AM
Subject: Re: [External Sender]role="alert" not being read on page load
← Previous message | No next message
Joseph,
In a way I'm just repeating other posters, but another way of stating the
function of aria-live and role=alert is that they listen for content
changes in the element to which they are applied. So if you have an empty
container with role=alert, then inject text into that container, a screen
reader will announce that text. However, if you inject an element that both
contains a text node, and has the role of alert, nothing will announce.
The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.