WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Opinion request: submit sucess banner that disappears after 5 sec

for

From: Pierre Hachey
Date: Feb 10, 2017 7:11AM

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 REMOVED> > on behalf of Birkir R. Gunnarsson < <EMAIL 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 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
>
>