E-mail List Archives
Thread: Opinion request: submit sucess banner that disappears after 5 sec
Number of posts in this thread: 6 (In chronological order)
From: Pierre Hachey
Date: Thu, Feb 09 2017 4:40PM
Subject: Opinion request: submit sucess banner that disappears after 5 sec
No previous message | Next message →
Hi community,
I wonder if this would be acceptable under WCAG 2.0A or AA.
Upon submit the visual user is presented a banner just under the main menu where it says success then banner automatically disappears after 5 sec.
I have set a role=alert on the banner so thatvthe screen reader reads it. However, the fact that it automatically disappears would this be an accessibility prob?
I did add and aria-label="success message disappears in 5 seconds"
What do you think?
Thanks
Pete
From: Angela French
Date: Thu, Feb 09 2017 5:00PM
Subject: Re: Opinion request: submit sucess banner that disappearsafter 5 sec
← Previous message | Next message →
Depending on the size of the device and whether necessary scrolling limits the view, would even a sighted user see it? 5 seconds seems pretty short to me.
Angela French
SBCTC
From: Birkir R. Gunnarsson
Date: Fri, Feb 10 2017 6:52AM
Subject: Re: Opinion request: submit sucess banner that disappears after 5 sec
← Previous message | Next message →
I don't think it is an accessibility problem as much as it may be a
usability one.
I think a better usability would be to present it as an alertdialog
with an "ok" button.
That way you make sure the usre sees it (or hears it or whatever) and
responds to it.
If not, I recommend that you programmatically set focus on the "thank
you" message when it is displayed, in addition to using role="alert".
A note on aria-label. Be careful when you us it, because it overrides
the text of the element, if set on the same element.
<div role="alert" aria-label="disappears in 5 seconds">Thank you, your
purchase was processed</div>
should be announced by screen readers as "Disappars in5 seconds alert".
It will ignore the text inside the element, because aria-label takes precedence.
I would skip the aria-label, but place focus on the message.
When the message disappears, you can redirect the focus to the top of the page.
On 2/9/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Depending on the size of the device and whether necessary scrolling limits
> the view, would even a sighted user see it? 5 seconds seems pretty short to
> me.
>
> Angela French
> SBCTC
>
>
From: Pierre Hachey
Date: Fri, Feb 10 2017 7:01AM
Subject: Re: Opinion request: submit sucess banner thatdisappearsafter 5 sec
← Previous message | Next message →
Hi Angela, It's an overlay banner that would be visible to user on all devices. The role alert advise the screen reader user and the aria-label tells screen reader user that the message disappears in 5 seconds.
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Angela French < = EMAIL ADDRESS REMOVED = >
Sent: February 9, 2017 7:00:10 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Opinion request: submit sucess banner that disappears after 5 sec
Depending on the size of the device and whether necessary scrolling limits the view, would even a sighted user see it? 5 seconds seems pretty short to me.
Angela French
SBCTC
From: Pierre Hachey
Date: Fri, Feb 10 2017 7:11AM
Subject: Re: Opinion request: submit sucess banner that disappears after 5 sec
← Previous message | Next message →
Thanks Birkir for feedback. Since the aria-label overides text, i guess another option could be to put the role alert on the Div and then add a Span with aria-label at the end of the banner text.
Pete
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
Sent: February 10, 2017 8:52:32 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Opinion request: submit sucess banner that disappears after 5 sec
I don't think it is an accessibility problem as much as it may be a
usability one.
I think a better usability would be to present it as an alertdialog
with an "ok" button.
That way you make sure the usre sees it (or hears it or whatever) and
responds to it.
If not, I recommend that you programmatically set focus on the "thank
you" message when it is displayed, in addition to using role="alert".
A note on aria-label. Be careful when you us it, because it overrides
the text of the element, if set on the same element.
<div role="alert" aria-label="disappears in 5 seconds">Thank you, your
purchase was processed</div>
should be announced by screen readers as "Disappars in5 seconds alert".
It will ignore the text inside the element, because aria-label takes precedence.
I would skip the aria-label, but place focus on the message.
When the message disappears, you can redirect the focus to the top of the page.
On 2/9/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> Depending on the size of the device and whether necessary scrolling limits
> the view, would even a sighted user see it? 5 seconds seems pretty short to
> me.
>
> Angela French
> SBCTC
>
>
From: _mallory
Date: Wed, Feb 22 2017 7:24AM
Subject: Re: Opinion request: submit sucess banner that disappears after 5 sec
← Previous message | No next message
Another group of people who tend to miss these "growlers" and "coachmarks" and
things that disappear if they don't move the keyboard focus to them are
screen magnifier users. Unfortunately alert roles aren't read out in these unless
they're like ZoomText Fusion which is the magnifier/screen reader combo.
If I have a success after performing an action such as clicking a submit button,
if there's no page refresh it's good to have a "local" message as well-- where
the user's visual focus already is (where they performed an action). If
possible, I mean. We did it with shopping carts-- screen mag users never saw
the upper right-hand cart area update, but "in cart" was always added under the
add-to-cart button.
cheers,
_mallory
On Fri, Feb 10, 2017 at 02:11:18PM +0000, Pierre Hachey wrote:
> Thanks Birkir for feedback. Since the aria-label overides text, i guess another option could be to put the role alert on the Div and then add a Span with aria-label at the end of the banner text.
> Pete
>
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Birkir R. Gunnarsson < = EMAIL ADDRESS REMOVED = >
> Sent: February 10, 2017 8:52:32 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] Opinion request: submit sucess banner that disappears after 5 sec
>
> I don't think it is an accessibility problem as much as it may be a
> usability one.
> I think a better usability would be to present it as an alertdialog
> with an "ok" button.
> That way you make sure the usre sees it (or hears it or whatever) and
> responds to it.
> If not, I recommend that you programmatically set focus on the "thank
> you" message when it is displayed, in addition to using role="alert".
> A note on aria-label. Be careful when you us it, because it overrides
> the text of the element, if set on the same element.
> <div role="alert" aria-label="disappears in 5 seconds">Thank you, your
> purchase was processed</div>
> should be announced by screen readers as "Disappars in5 seconds alert".
> It will ignore the text inside the element, because aria-label takes precedence.
> I would skip the aria-label, but place focus on the message.
> When the message disappears, you can redirect the focus to the top of the page.
>
>
>
> On 2/9/17, Angela French < = EMAIL ADDRESS REMOVED = > wrote:
> > Depending on the size of the device and whether necessary scrolling limits
> > the view, would even a sighted user see it? 5 seconds seems pretty short to
> > me.
> >
> > Angela French
> > SBCTC
> >
> >