Can you use an <aside> element inside a <section role="main"> element?

Question

I'm in the process of improving accessibility in my HTML using HTML5 and WAI-ARIA.

It is OK to have the following set up?

<!-- main content -->
<section id="main" role="main">
    <h1>The main content</h1>

    <!-- This div needs to be here for styling reasons -->
    <div class="the-content">    
         <p>All the text that goes with the main content</p>
    </div>

    <!-- the sidebar -->
    <aside id="sidebar" role="complementary">
        <h2>A title</h2>
        <p>Some text</p>
    <aside>
</section>

The thing I'm not sure of is if I should have the <aside> element outside of the <section> and the role="main" container. Does that matter?

Answer 1

It does matter yes. Where to put it is defined by how the content in the aside tag relates to the main section.

For example:

If the content in the aside is related to the main article, it should be inside the main section. However if the content inside the sidebar aside tag is different to main I would put it outside of the main section

http://html5doctor.com/aside-revisited/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside

Answer 2

Yes, it the <aside> inside the <section> is perfectly valid markup and will pass W3C validation, if that's what you're worried about.

The <section> element allows flow content inside which may include the <aside> element - however if you're only using sections for styling purposes, you should probably be using a div instead.

Aside from that (pun intended) I have my doubts on the role=main part being valid - according to this, the only role attribute values allowed on <section> elements are shown below:

Default ARIA semantics:

role=region.

What Other ARIA roles, states and properties may be used?

alert, alertdialog, application, contentinfo, dialog, document, log, marquee, search, or status.

Any global aria-* attributes and any aria-* attributes applicable to the allowed roles.

Which rather notably doesn't include the main role.