WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: what region should we use for a alert banner

for

From: Birkir R. Gunnarsson
Date: Mar 14, 2020 9:08AM

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