WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Clarification on the banner role not being at the top of a page

for

From: Birkir R. Gunnarsson
Date: Jun 25, 2023 5:21PM

The ARIA 1.2 definition of a banner landmark mentions the visual
location as well as the type of content to expect:

https://www.w3.org/TR/wai-aria-1.2/#banner

"A landmark that contains mostly site-oriented content, rather than
page-specific content.

Site-oriented content typically includes things such as the logo or
identity of the site sponsor, and a site-specific search tool.

A banner usually appears at the top of the page and typically spans
the full width.
"

So, in this case, we could go with a few checks to determine the role:
Does the sidebar content continue either a logo or a search widget?
Is this widget consistently displayed across all (or at least most)
pages on the site?
Is this widget part of the page header, like a navigation area inside
the header?

Other possible landmark roles you could select from, if you feel
banner isn't it:
role="Navigation" (if the widget consists only of links or
navigational elements). This could be a navigation landmark inside the
banner. Ideally give it an accessible name, if you can think of an
accessible name that describes the common purpose or group label.
Complementary (more of a longshot) if the content is not a child of
the banner, main, or contentinfo landmarks, and if its content is not
directly related to the purpose of the page.
Examples might include: a carousel, market data feed, or a list of
related articles.

I personally always recommend the banner role to cover the content at
the start of the page. If it doesn't I recommend other roles.
The primary benefits of landmarks is to keep them consistent and
predictable and personally I feel if we are not consistent with these
big 3 we cause confusion.
But that's admittedly one of those things where we all have a bit of
our own interpretations. :)
It's most important to apply your landmarks consistently across the
website or collection of pages.

On 6/25/23, <EMAIL REMOVED> < <EMAIL REMOVED> > wrote:
> I also prefer to see the header reserved for the top of the page even though
> it can be correct to use it elsewhere.
> I am presuming that, whatever approach is implemented, it will need an
> accessible label.
>
> (Let me take this opportunity to grouse that lately I have encountered a
> number of sites that put the main page content in the header. Very
> confusing.)
>
> Jeff Gutsell
>
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of jp
> Jamous
> Sent: Sunday, June 25, 2023 2:10 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Clarification on the banner role not being at the top
> of a page
>
> Personally, I do not like to find the <header> tag anywhere except the top
> of the page. I typically keep my regions turned on with JAWS to keep me
> oriented across the page. Not only it helps me as a user .but as an A11y
> consultant as well.
>
> I like to look at pages with the following layout.
> <header>
> </header>
> <main>
> </main>
> <footer>
> </footer>
>
> This is a very logical structure. For example, a table can have a table
> header and footer. Header refers to the head and footer refers to the feet.
> So we have a top to bottom layout with the main page in the center. I think
> it would sound and look pretty weird to have someone's head to the right of
> his or her body. Wouldn't it? It reminds me of car racers when they hold
> their helmets by their sides while posing for a picture. 😊
>
> Again, this is my personal preference. However, I always think of the casual
> computer user. Can he or she make sense of what is being announced? Banner
> at the end of the main region before the footer? That does sound weird. Most
> banners are posted up high so people can see them from far away and read
> them. Now, we got a banner above the footer. Why would I post a banner so
> low to the ground?
>
> So keeping it simple is how I like to explain it to UX designers and
> developers. Keep it simple and logical. If it can be done technically, it
> does not mean that it is logical to the end user.
>
> -----Original Message-----
> From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of glen
> walker
> Sent: Sunday, June 25, 2023 12:09 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: Re: [WebAIM] Clarification on the banner role not being at the top
> of a page
>
> The definition of a <header> element,
> https://html.spec.whatwg.org/multipage/sections.html#the-header-element,
> says:
>
> "The header element represents a group of introductory or navigational
> aids."
>
> Does your sidebar have a group of navigational aids?
>
> On Sun, Jun 25, 2023 at 10:41 AM Ridz Apps < <EMAIL REMOVED> > wrote:
>
>> ! would like to know then Patrick if header is indeed the correct
>> element for that left sidebar on the website I mentioned above. I have
>> the same use case.
>>
>>
> > > http://webaim.org/discussion/archives
> > > > http://webaim.org/discussion/archives
> >
> > > > >


--
Work hard. Have fun. Make history.