E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: Weissenberger, T M
Date: Mon, May 04 2020 11:44AM
Subject: Non-dynamic alerts in web page
No previous message | Next message →

Colleagues,

My understanding of the ARIA alert is that is announces assertively to screen readers when an element with the alert role is dynamically generated or revealed. Is there an agreed-upon best practice for when this information is not presented dynamically, but is instead static? I'm thinking about things like public safety announcements or the many COVID-19 updates we're now seeing pinned to the beginning of a webpage.

Should we be using <section> or a region role with an informative aria-label? Is there some better way to emphasize this specialized, high-level info?

Any thoughts are welcome.

Kind regards,
T.M.

T.M. Weissenberger
IT Accessibility Coordinator
University of Iowa

2800 University Capitol Centre
200 S. Clinton Street
Iowa City, IA 52242

= EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
319.384.3323

From: joe
Date: Mon, May 04 2020 1:33PM
Subject: Re: Non-dynamic alerts in web page
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Tue, May 05 2020 3:58AM
Subject: Re: Non-dynamic alerts in web page
← Previous message | Next message →

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 ADDRESS REMOVED = < = EMAIL ADDRESS 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
>
>

From: Murphy, Sean
Date: Tue, May 05 2020 8:41PM
Subject: Re: Non-dynamic alerts in web page
← Previous message | Next message →

Why would you use the Aside element and not a section elements with an aria-label / aria-labelledby for alerts?






Sean Murphy | Digital System specialist (Accessibility)
Telstra Digital Channels | Digital Systems
Mobile: 0405 129 739 | Desk: (02) 9866-7917

From: Mallory
Date: Thu, May 07 2020 3:12AM
Subject: Re: Non-dynamic alerts in web page
← Previous message | Next message →

Likely because if your website sells toilet cleaner and you have a message about corona/covid, it's considered by most visitors as a somewhat unrelated topic; at the very least, your home page about the sale on Toilet Duck isn't a corona-health page.

In that sense, aside makes some sense, in that the content isn't really directly related to the general page content. I know lots of people put site or product navigation in asides and there it's not really meant to present as some wholly separate topic, so maybe it depends on how asides are being used on the site already, and also if you have a brick-and-mortar that's physically closed due to corona then it may not seem quite so off-topic if that's the announcement.

But anyway that was my thoughts on the reason.

cheers,
_mallory

On Wed, May 6, 2020, at 4:41 AM, Murphy, Sean wrote:
> Why would you use the Aside element and not a section elements with an
> aria-label / aria-labelledby for alerts?
>
>
>
>
>
>
> Sean Murphy | Digital System specialist (Accessibility)
> Telstra Digital Channels | Digital Systems
> Mobile: 0405 129 739 | Desk: (02) 9866-7917
>
>

From: Birkir R. Gunnarsson
Date: Thu, May 07 2020 5:43AM
Subject: Re: Non-dynamic alerts in web page
← Previous message | No next message

That's what I was thinking when I suggested this, but whichever role
is used is of pretty limited consequence.

On 5/7/20, Mallory < = EMAIL ADDRESS REMOVED = > wrote:
> Likely because if your website sells toilet cleaner and you have a message
> about corona/covid, it's considered by most visitors as a somewhat unrelated
> topic; at the very least, your home page about the sale on Toilet Duck isn't
> a corona-health page.
>
> In that sense, aside makes some sense, in that the content isn't really
> directly related to the general page content. I know lots of people put site
> or product navigation in asides and there it's not really meant to present
> as some wholly separate topic, so maybe it depends on how asides are being
> used on the site already, and also if you have a brick-and-mortar that's
> physically closed due to corona then it may not seem quite so off-topic if
> that's the announcement.
>
> But anyway that was my thoughts on the reason.
>
> cheers,
> _mallory
>
> On Wed, May 6, 2020, at 4:41 AM, Murphy, Sean wrote:
>> Why would you use the Aside element and not a section elements with an
>> aria-label / aria-labelledby for alerts?
>>
>>
>>
>>
>>
>>
>> Sean Murphy | Digital System specialist (Accessibility)
>> Telstra Digital Channels | Digital Systems
>> Mobile: 0405 129 739 | Desk: (02) 9866-7917
>>
>>