WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: _mallory
Date: Feb 22, 2017 7:24AM

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