WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Non-dynamic alerts in web page

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@a11yeval.com
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

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
Weissenberger, T M
Sent: Monday, May 4, 2020 1:44 PM
To: = EMAIL ADDRESS REMOVED =
Subject: [WebAIM] Non-dynamic alerts in web page

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

http://webaim.org/discussion/archives

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
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Weissenberger, T M
> Sent: Monday, May 4, 2020 1:44 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Non-dynamic alerts in web page
>
> 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
>
> > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.

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

-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of Birkir R. Gunnarsson
Sent: Tuesday, 5 May 2020 7:58 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Non-dynamic alerts in web page

[External Email] This email was sent from outside the organisation – be cautious, particularly with links and attachments.

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
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Weissenberger, T M
> Sent: Monday, May 4, 2020 1:44 PM
> To: = EMAIL ADDRESS REMOVED =
> Subject: [WebAIM] Non-dynamic alerts in web page
>
> 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
>
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.

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
>
> -----Original Message-----
> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> Birkir R. Gunnarsson
> Sent: Tuesday, 5 May 2020 7:58 PM
> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
> Subject: Re: [WebAIM] Non-dynamic alerts in web page
>
> [External Email] This email was sent from outside the organisation – be
> cautious, particularly with links and attachments.
>
> 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
> >
> > -----Original Message-----
> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
> > Weissenberger, T M
> > Sent: Monday, May 4, 2020 1:44 PM
> > To: = EMAIL ADDRESS REMOVED =
> > Subject: [WebAIM] Non-dynamic alerts in web page
> >
> > 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
> >
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
> > > > > > archives at http://webaim.org/discussion/archives
> > > >
>
>
> --
> Work hard. Have fun. Make history.
> > > archives at http://webaim.org/discussion/archives
> > > > > >

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
>>
>> -----Original Message-----
>> From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> Birkir R. Gunnarsson
>> Sent: Tuesday, 5 May 2020 7:58 PM
>> To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
>> Subject: Re: [WebAIM] Non-dynamic alerts in web page
>>
>> [External Email] This email was sent from outside the organisation – be
>> cautious, particularly with links and attachments.
>>
>> 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
>> >
>> > -----Original Message-----
>> > From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of
>> > Weissenberger, T M
>> > Sent: Monday, May 4, 2020 1:44 PM
>> > To: = EMAIL ADDRESS REMOVED =
>> > Subject: [WebAIM] Non-dynamic alerts in web page
>> >
>> > 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
>> >
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> >
>> > >> > >> > archives at http://webaim.org/discussion/archives
>> > >> >
>>
>>
>> --
>> Work hard. Have fun. Make history.
>> >> >> archives at http://webaim.org/discussion/archives
>> >> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.