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.

Answer 3

The spec (editor's draft that already includes main) doesn't allow to nest the main element inside article, aside, footer, header or nav, but it doesn't say anything about nesting these elements inside main. It also provides two examples that use article and nav (intra-document navigation) inside main. So at least aside, nested in the article or section (and therefore scoped to its level), should be also allowed. I also can imagine the case where some part of content with some supplementary info inside (like in the aside usage examples in the WCAG Wiki) may form together the main content of the page, so I don't think that disallowing it would be reasonable.

On the other hand, the outline algorithm (which now seems to be the primary reason for the existence of all sectioning content, including aside) is still marked as being 'at risk', so the definition of these elements may change and some clarification may be added.

Probably we should ask this question to the HTML5 spec editors?

Answer 4

I will concur with Darren in regards to where you drop the tag. Also, your tagging is a little wacky. Various tags have WAI-ARIA roles natively, while yes you can overwrite native roles, but why would you? This post about WAI-ARIA on the Paciello Group's blog talks about it more. Ex:

Insstead of using

<section id="main" role="main">

you could just use <main>, which means the same thing, and better practice. The <aside> tag has the complementary role added natively, so that is like saying My name is Ryan, really my name is Ryan.