WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Non-dynamic alerts in web page

for

From: Birkir R. Gunnarsson
Date: May 5, 2020 3:58AM

I would use the <aside> element or role="complementary" over the
region role (I think it's slightly better semantic match, not that it
matters overly much).
Add aria-label="announcement" or "important" or some such.
You could use an h1 at the top of the alert text as well to make it
important in the heading structure of the page, h2 if the announcement
is less important.
If you can fit the alert inside but at the top of the main content of
the page you should be fine.
If you have to put it before the main content the role="alert" may be
a possible consideration, depending on how important it is that users
are aware of it (if the text is that all services are currently down
it may be worth the alert role).
Unlike live regions content with role="alert" gets announce on page
load in some screen reader/browser combos, at least on Chrome. I have
to run a little test on this to get a better feeling for it. Since
we're looking at similar questions at work I should be able to get a
better idea today or tomorrow.


On 5/4/20, <EMAIL REMOVED> < <EMAIL REMOVED> > wrote:
> Hi Todd,
>
> Long time no see. I would not use any kind of aria-live region for these
> static announcements. My Personal recommendation is two fold:
>
> 1. Place in high in the reading order, depending on Importance. This could
> be as high as right after the skip navigation link. This may not always be
> easy or possible.
> 2. Put it in an element with role="region" (my suggestion is <div> or
> <section>) with an informative aria-label as you suggested. Depending on
> the criticality of the message, you could start the aria-label attribute
> with something like "Important:".
>
> Thankx,
> Joe Humbert
> Accessibility Champion
> Android & iOS Accessibility Novice
>
>