E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Temporary error alerts

Number of posts in this thread: 6 (In chronological order)

From: Isabel Holdsworth
Date: Fri, Sep 28 2018 9:51AM
Subject: Temporary error alerts
No previous message | Next message →

Hi all,

does anyone have a robust template for an ARIA error alert that
disappears after a few seconds but might be required again later?

It used to be that hiding the error container with display="none" when
not needed and making it visible again when required didn't work with
all screenreaders. Is this still the case?

And is aria-live="assertive" still preferable to role="alert"?

We have a few alert scenarios like this dotted about the product (some
more accessible than others), and I think it's time to rationalise
them into a single, accessible component. There are two new alerts
being created at the moment, and I want to make sure we get it right.

Thanks as always for your thoughts and suggestions.

Cheers, Isabel

From: Patrick H. Lauke
Date: Fri, Sep 28 2018 10:09AM
Subject: Re: Temporary error alerts
← Previous message | Next message →

On 28/09/2018 16:51, Isabel Holdsworth wrote:
> It used to be that hiding the error container with display="none" when
> not needed and making it visible again when required didn't work with
> all screenreaders. Is this still the case?

It's all a question of timing. Generally, you want a browser/AT to "see"
the container first, and then it will look out for any content changes
and announce them. If you have a fully formed (already filled-in)
container that suddenly "reappears" in the a11y tree, or is inserted
into the page dynamically, it's usually not announced because the
browser/AT didn't have enough time to note the container and watch it
for changes.

This *can* vary in different browser/AT combinations, but it's likely
more to do with microsecond-level timings...and you basically don't want
to rely on that. Best way: hide it not with display:none, but some other
"visually hidden, but accessible" class/method. Or, flip it from
display:none to display:block, wait half a second or so, and THEN insert
the content for the alert/warning.

I referred to this as needing have the container "primed" in my recent
additions to
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

> And is aria-live="assertive" still preferable to role="alert"?

For best results, use both (to account for older browser/AT combos).

I'll also note that alerts/notifications that automatically disappear
CAN still be a problem for certain users (e.g. sighted users with
cognitive issues, or users that use screen magnification but without
screen reader functionality)

P
--
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Brian Lovely
Date: Fri, Sep 28 2018 10:40AM
Subject: Re: [External Sender] Temporary error alerts
← Previous message | Next message →

Aria-live conveys a role of alert. Both are triggered by a change in the
content of the container, so the best way to "hide" text if you want it to
be announced again later is to completely remove the text from the
container, then inject it when you want it to reappear. It's also best if
the container with the role of alert (or aria-live attribute) exists in the
DOM from page load.

On Fri, Sep 28, 2018 at 11:52 AM Isabel Holdsworth <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi all,
>
> does anyone have a robust template for an ARIA error alert that
> disappears after a few seconds but might be required again later?
>
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=_YhEVmQvhqL_xbjeqBKOJqVqHp6f_yT9k1xQ6RCqWpQ&s=heBi7n5xo1GPpOQz2d7D9pGNX3OqWzdcj6N9xHluuhw&e=
> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=_YhEVmQvhqL_xbjeqBKOJqVqHp6f_yT9k1xQ6RCqWpQ&s=ahjzvFtgRhPYndfqNjjUh6xy5pdbqpAH2KxDQa7bzo4&e=
> >

--
*Brian Lovely*
Digital Accessibility
804.389.1064

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.

From: glen walker
Date: Fri, Sep 28 2018 10:43AM
Subject: Re: [External Sender] Temporary error alerts
← Previous message | Next message →

Hi Brian,

Can you clarify your comment that "Aria-live conveys a role of alert"? I'm
guessing it was a typo.

Aria-live can be "polite" or "assertive. It doesn't convey any role.

If you use role="alert", then that conveys an aria-live value of assertive.

Glen

From: Brian Lovely
Date: Fri, Sep 28 2018 10:46AM
Subject: Re: [External Sender] Temporary error alerts
← Previous message | Next message →

Glen, you are so right. I have it backwards.

On Fri, Sep 28, 2018 at 12:44 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:

> Hi Brian,
>
> Can you clarify your comment that "Aria-live conveys a role of alert"? I'm
> guessing it was a typo.
>
> Aria-live can be "polite" or "assertive. It doesn't convey any role.
>
> If you use role="alert", then that conveys an aria-live value of assertive.
>
> Glen
> > > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=IEgCgyhRXUUV3ZOutLalXFcGkeQKUOBwlfh9gbukNX4&s=RnCjfw7PQ19C1PnI3hA74trD6yMu-uy_57xYIdc3oCA&e=
> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=IEgCgyhRXUUV3ZOutLalXFcGkeQKUOBwlfh9gbukNX4&s=GuvgbrK5vPz25Mttg7Z0GOJnV8_igpMEkCOzeQElPv8&e=
> >

--
*Brian Lovely*
Digital Accessibility
804.389.1064

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.

From: Isabel Holdsworth
Date: Mon, Oct 01 2018 3:15AM
Subject: Re: [External Sender] Temporary error alerts
← Previous message | No next message

Thanks all. I've tried so many variations, and this jQuery code works
well in JAWS and NVDA, and hopefully with VoiceOver. I think I'm going
with it.

function throw_error(el, msg) {
$(el).text(msg);
setTimeout(function() {
$(el).fadeOut(function(){
$(el).empty().show();
});
}, 1800);
} //throw_error

On 28/09/2018, Brian Lovely via WebAIM-Forum
< = EMAIL ADDRESS REMOVED = > wrote:
> Glen, you are so right. I have it backwards.
>
> On Fri, Sep 28, 2018 at 12:44 PM glen walker < = EMAIL ADDRESS REMOVED = > wrote:
>
>> Hi Brian,
>>
>> Can you clarify your comment that "Aria-live conveys a role of alert"?
>> I'm
>> guessing it was a typo.
>>
>> Aria-live can be "polite" or "assertive. It doesn't convey any role.
>>
>> If you use role="alert", then that conveys an aria-live value of
>> assertive.
>>
>> Glen
>> >> >> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=IEgCgyhRXUUV3ZOutLalXFcGkeQKUOBwlfh9gbukNX4&s=RnCjfw7PQ19C1PnI3hA74trD6yMu-uy_57xYIdc3oCA&e=
>> List archives at
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=DwICAg&c=pLULRYW__RtkwsQUPxJVDGboCTdgji3AcHNJU0BpTJE&r=nA3L5qBjLdo-DJ8qQBz88lq5Xb3jw-WFZTeJjcwjLdE&m=IEgCgyhRXUUV3ZOutLalXFcGkeQKUOBwlfh9gbukNX4&s=GuvgbrK5vPz25Mttg7Z0GOJnV8_igpMEkCOzeQElPv8&e=
>> >>
>
>
> --
> *Brian Lovely*
> Digital Accessibility
> 804.389.1064
> >
> 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.
> > > > >