In the way the main and aside elements are defined, you can put an aside element inside a main element, because they both accept accept Flow Content in their content models. Therefore, under the content model system, putting aside inside main is technically valid.
However, in the context of ARIA roles, aside has a complementary role and main has a main role. Complementarycontent is 'ancillary to the main content' and therefore it is considered 'bad practice' to put an aside element inside the main element, according to Deque.
Complementary content is ancillary content to the main theme of a document or page. Screen reader users have the option to skip over complementary content when it appears at the top level of the accessibility API. Embedding an <aside> element in another landmark may disable screen reader functionality allowing users to navigate through complementary content.
As far as I know, the HTML specification doesn't address this 'bad practice'. So does the spec need updating, or is this 'bad practice' explained on Deque's website incorrect?
Example
Here is an example where it feels appropriate to me to use an aside element inside main:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Example</title>
<main>
<article>
<header>
<h1>A news article headline</h1>
</header>
<p>Introductory paragraph.</p>
<p>More article text.</p>
<p>More article text.</p>
<aside>
<h2>More on this story</h2>
<!-- Imagine here, embedded into the middle of the article, are links to other related
articles. However, these links are not part of this article's content, which is why they
are in an aside element. -->
</aside>
<p>More article text.</p>
<p>More article text.</p>
<p>More article text.</p>
</article>
</main>In the example, am I right to use an aside element or is there a more appropriate element to use to represent content that's not part of the article, since screen readers won't be able to skip over it?
In the way the
mainandasideelements are defined, you can put anasideelement inside amainelement, because they both accept accept Flow Content in their content models. Therefore, under the content model system, puttingasideinsidemainis technically valid.However, in the context of ARIA roles,
asidehas acomplementaryrole andmainhas amainrole. Complementarycontent is 'ancillary to the main content' and therefore it is considered 'bad practice' to put anasideelement inside themainelement, according to Deque.As far as I know, the HTML specification doesn't address this 'bad practice'. So does the spec need updating, or is this 'bad practice' explained on Deque's website incorrect?
Example
Here is an example where it feels appropriate to me to use an
asideelement insidemain:In the example, am I right to use an
asideelement or is there a more appropriate element to use to represent content that's not part of the article, since screen readers won't be able to skip over it?