Thread by @5t3ph

🟢 An Aside about HTML <aside>

When HTML5 was the new kid in town, multi-sidebar blogs were also very popular. And the <aside> element seemed like the right choice for sidebars - but is it?

Let's learn a bit more about <aside>!

In terms of assistive technology, an <aside> is announced with the implicit role of "complementary".

In terms of semantics, an <aside> cannot live within <main>.

For example - it's not going to be the right choice for ad content that lives within a <main>'s <article>.

By actual definition per MDN:

"The HTML <aside> element represents a portion of a document whose content is only indirectly related to the document's main content."

So what type of content can live there?

Example things <aside> can be used for:

- colophon/bio information
- related resources
- lists of things that are extra bonus content

So it can be a "sidebar" as long as it's outside of <main>.

For multiples - add aria-label or aria-labelledby to help users of assistive tech.

An <aside> should not be used for:

- extra navigation - use <nav> with an aria-label identifying it such as "secondary"
- pull quotes - use <blockquote>
- imagery/graphs - consider <figure>
- meta info important to the content - consider <footer>

A note that whether or not <aside> can be within <main> seems to be a bit contested.

I added that point because it's flagged as a landmark error w/ @dequesystems aXe - so if anyone can clarify if there are exceptions, we can learn something new and use <aside> more effectively!

The <aside> is allowed a few additional ARIA roles.

So by default, it's not allowed within <main> due to "complementary" conflicting with the "main" landmark role, but you may nest it by using a role of "region" or "note".

See "Permitted ARIA roles":
developer.mozilla.org/en-US/docs/Web…