WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: what region should we use for a alert banner

for

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

From: Lucy GRECO
Date: Wed, Mar 11 2020 4:30PM
Subject: what region should we use for a alert banner
No previous message | Next message →

hello:
our office has just implemented a new alert banner to give visitors to a
web site braking news. this is a banner that can include all kinds of
information that is time sensitive. what land mark or region would be
best to put this in. so our auto testing tool does not bauck at it beeing
out side of a region. we already have a banner for each page and we can
only have one banner so what else is there. thanks lucy
Lucia Greco
Web Accessibility Evangelist
IST - Architecture, Platforms, and Integration
University of California, Berkeley
(510) 289-6008 skype: lucia1-greco
http://webaccess.berkeley.edu
Follow me on twitter @accessaces

From: glen walker
Date: Wed, Mar 11 2020 8:00PM
Subject: Re: what region should we use for a alert banner
← Previous message | Next message →

When you say you can only have one banner, is that just an internal
requirement by your company?

The <header> element does not have any limitations on how many you can
have, according to the html spec,
https://www.w3.org/TR/html53/sections.html#the-header-element.

Now, a <header> has a role of banner by default, and the banner role
recommends not having more than one (meaning you should not have more than
one <header>), but it's not a requirement. That is, you can have more than
one banner role and it's not an error. It's just a best practice to have
only one.

Anyway, with that said, I probably wouldn't use a banner solely for
breaking news. I like to limit my banner contents to the main menu,
company logo, and other stuff at the top of every page. But I could see a
breaking news section as a sub-element of the banner. It could be a
complementary (<aside> element) or region landmark. Either way, you should
have an aria-label="breaking news".

On Wed, Mar 11, 2020 at 4:31 PM Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:

> hello:
> our office has just implemented a new alert banner to give visitors to a
> web site braking news. this is a banner that can include all kinds of
> information that is time sensitive. what land mark or region would be
> best to put this in. so our auto testing tool does not bauck at it beeing
> out side of a region. we already have a banner for each page and we can
> only have one banner so what else is there. thanks lucy
> Lucia Greco
> Web Accessibility Evangelist
> IST - Architecture, Platforms, and Integration
> University of California, Berkeley
> (510) 289-6008 skype: lucia1-greco
> http://webaccess.berkeley.edu
> Follow me on twitter @accessaces
> > > > >

From: Birkir R. Gunnarsson
Date: Sat, Mar 14 2020 9:08AM
Subject: Re: what region should we use for a alert banner
← Previous message | No next message

I'd use role="complementary" and aria-label="breaking news"
Probably add role="alert" to the headline of the breaking news strry
(not to the entire region, it would be too verbose), role="alert" does
not get announced reliably on page load outside of Chrome.
Another thing I'd try to do is to code the alert as an h1 and even
find a way to make it the target of the skip link if present, though
it takes some coding to do so.


On 3/11/20, glen walker < = EMAIL ADDRESS REMOVED = > wrote:
> When you say you can only have one banner, is that just an internal
> requirement by your company?
>
> The <header> element does not have any limitations on how many you can
> have, according to the html spec,
> https://www.w3.org/TR/html53/sections.html#the-header-element.
>
> Now, a <header> has a role of banner by default, and the banner role
> recommends not having more than one (meaning you should not have more than
> one <header>), but it's not a requirement. That is, you can have more than
> one banner role and it's not an error. It's just a best practice to have
> only one.
>
> Anyway, with that said, I probably wouldn't use a banner solely for
> breaking news. I like to limit my banner contents to the main menu,
> company logo, and other stuff at the top of every page. But I could see a
> breaking news section as a sub-element of the banner. It could be a
> complementary (<aside> element) or region landmark. Either way, you should
> have an aria-label="breaking news".
>
> On Wed, Mar 11, 2020 at 4:31 PM Lucy GRECO < = EMAIL ADDRESS REMOVED = > wrote:
>
>> hello:
>> our office has just implemented a new alert banner to give visitors to a
>> web site braking news. this is a banner that can include all kinds of
>> information that is time sensitive. what land mark or region would be
>> best to put this in. so our auto testing tool does not bauck at it
>> beeing
>> out side of a region. we already have a banner for each page and we can
>> only have one banner so what else is there. thanks lucy
>> Lucia Greco
>> Web Accessibility Evangelist
>> IST - Architecture, Platforms, and Integration
>> University of California, Berkeley
>> (510) 289-6008 skype: lucia1-greco
>> http://webaccess.berkeley.edu
>> Follow me on twitter @accessaces
>> >> >> >> >>
> > > > >


--
Work hard. Have fun. Make history.