E-mail List Archives

Search E-mail List Archives for

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

From: Ridz Apps
Date: Sun, Jun 25 2023 7:44AM
Subject: Clarification on the banner role not being at the top of a page
No previous message | Next message →

Given a left sidebar that seems to match the description of a header (as
banners ie), would it be semantically correct to wrap the left sidebar with
a header element (or maybe a section element with role banner?), even
though it is not at the top of the page? I would like to know what would be
the best approach to mark up the left sidebar

Example:
https://react-icons.github.io/react-icons/

From: Patrick H. Lauke
Date: Sun, Jun 25 2023 7:48AM
Subject: Re: Clarification on the banner role not being at the top of a page
← Previous message | Next message →

On 25/06/2023 14:44, Ridz Apps wrote:
> Given a left sidebar that seems to match the description of a header (as
> banners ie), would it be semantically correct to wrap the left sidebar with
> a header element (or maybe a section element with role banner?), even
> though it is not at the top of the page? I would like to know what would be
> the best approach to mark up the left sidebar

It's really irrelevant where your containers are *visually* (at the top
of the page or not). You choose the right role/semantic element based on
the content and its purpose/meaning/function, not based on how things
look or are laid out.

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
https://mastodon.social/@patrick_h_lauke | skype: patrick_h_lauke

From: Ridz Apps
Date: Sun, Jun 25 2023 10:40AM
Subject: Re: Clarification on the banner role not being at the top of a page
← Previous message | Next message →

On Sun, 25 Jun 2023 at 4:44 PM Ridz Apps < = EMAIL ADDRESS REMOVED = > wrote:

> Given a left sidebar that seems to match the description of a header (as
> banners ie), would it be semantically correct to wrap the left sidebar with
> a header element (or maybe a section element with role banner?), even
> though it is not at the top of the page? I would like to know what would be
> the best approach to mark up the left sidebar
>
> Example:
> https://react-icons.github.io/react-icons/
>

Thank you very much Patrick! 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.

> <https://react-icons.github.io/react-icons/>
>

From: glen walker
Date: Sun, Jun 25 2023 11:08AM
Subject: Re: Clarification on the banner role not being at the top of a page
← Previous message | Next message →

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

From: jp Jamous
Date: Sun, Jun 25 2023 12:10PM
Subject: Re: Clarification on the banner role not being at the top of a page
← Previous message | Next message →

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.

From: jeffgutsell
Date: Sun, Jun 25 2023 1:19PM
Subject: Re: Clarification on the banner role not being at the top of a page
← Previous message | Next message →

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

From: Birkir R. Gunnarsson
Date: Sun, Jun 25 2023 5:21PM
Subject: Re: Clarification on the banner role not being at the top of a page
← Previous message | No next message

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