WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Aside element inside and aside?

for

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

From: Piscitelli, JoAnn
Date: Fri, Jul 22 2022 7:23AM
Subject: Aside element inside and aside?
No previous message | Next message →

Hello!

Before I ask this question, I want to say that I am not a CSS person. My qu=
estion is can an aside element sit inside an already existing aside element=
? Please see screenshot:
[Graphical user interface, text, application Description automatically gen=
erated]

Or should the nested aside element be a div?

Thank you so much, I look forward to any info!

Jo

From: Glen Walker
Date: Fri, Jul 22 2022 12:27PM
Subject: Re: Aside element inside and aside?
← Previous message | Next message →

If you're asking from a “is this valid html?” perspective, then yes.

https://html.spec.whatwg.org/multipage/sections.html#the-aside-element

An aside can have “flow content” inside it and an aside element is considered “flow content” so it can be nested.

Conceptually, an aside is tangential info to the main page. So an aside inside an aside means it's info that is tangentially related to the first aside and not necessarily to the main page.

From: Jon Gunderson
Date: Fri, Jul 22 2022 8:00PM
Subject: Re: Aside element inside and aside?
← Previous message | Next message →

Not a good idea from an accessibility point of view to nest aside elements, since aside elements create complementary landmarks. Nested aside elements will be confusing to screen reader uses and “polute” this list of landmarks view.

If they must nest the aside elements, they should set the role=none attribute so it will not create a complementary landmark.

Jon Gunderson
Sent from my iPhone

> On Jul 22, 2022, at 12:27 PM, Glen Walker < = EMAIL ADDRESS REMOVED = > wrote:
>
> If you're asking from a “is this valid html?” perspective, then yes.
>
> https://html.spec.whatwg.org/multipage/sections.html#the-aside-element
>
> An aside can have “flow content” inside it and an aside element is considered “flow content” so it can be nested.
>
> Conceptually, an aside is tangential info to the main page. So an aside inside an aside means it's info that is tangentially related to the first aside and not necessarily to the main page.
>
> > > >

From: glen walker
Date: Fri, Jul 22 2022 10:16PM
Subject: Re: Aside element inside and aside?
← Previous message | Next message →

Nested landmarks aren't disallowed. You see that often with navigation
landmarks inside of banner landmarks. Or even navigation inside of
navigation.

Complementary inside a complementary might be a little weird, but if they
have aria-labels, it could be ok.

My original answer was from an html validation perspective. It's valid.
The original question didn't specify if they were looking for "is this
allowed" or "is this a good idea".

On Fri, Jul 22, 2022 at 8:00 PM Jon Gunderson < = EMAIL ADDRESS REMOVED = >
wrote:

> Not a good idea from an accessibility point of view to nest aside
> elements, since aside elements create complementary landmarks. Nested
> aside elements will be confusing to screen reader uses and “polute” this
> list of landmarks view.
>
>

From: David Engebretson Jr.
Date: Sat, Jul 23 2022 12:54AM
Subject: Re: Aside element inside and aside?
← Previous message | No next message

I agree. As long as your nested regions are labelled with enough context to the meaning of the region then nest to your hearts/region content.

Without meaningful/accessible labels on the regions, however, you'll find yourself in region soup where people who use assistive technologies won't be able to understand the layout of your pages.

Meaningful regions are as important as meaningful links, and proper heading structure, in my humble opinion. Accessibility and WCAG compliance is all about usability at the core.

Cheers,
David



-----Original Message-----
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > On Behalf Of glen walker
Sent: Friday, July 22, 2022 9:16 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Aside element inside and aside?

Nested landmarks aren't disallowed. You see that often with navigation landmarks inside of banner landmarks. Or even navigation inside of navigation.

Complementary inside a complementary might be a little weird, but if they have aria-labels, it could be ok.

My original answer was from an html validation perspective. It's valid.
The original question didn't specify if they were looking for "is this allowed" or "is this a good idea".

On Fri, Jul 22, 2022 at 8:00 PM Jon Gunderson < = EMAIL ADDRESS REMOVED = >
wrote:

> Not a good idea from an accessibility point of view to nest aside
> elements, since aside elements create complementary landmarks. Nested
> aside elements will be confusing to screen reader uses and “polute”
> this list of landmarks view.
>
>