WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Birkir R. Gunnarsson
Date: Feb 10, 2017 6:52AM

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
>
>