Can an aside element contain a navigation?

Question

Can an aside element contain a navigation?

Answer

Typically, the <aside> element (complementary landmark role) is used on any section of a document that supports the main content, yet is separate and meaningful on its own. Regarding navigation elements, their main function is to provide a way to identify a collection of links that are intended for website navigation or navigating to other documents.

When appropriate, the <aside> element can contain navigation components so long as all <aside> content acts as a supporting section that is related to the main content. With that in mind, ensure that if this section of content were to be separated from the main content it would still retain its meaning on its own. Otherwise, if this section of content cannot standalone and is tangentially related to the main content, it would be more appropriate to utilize the navigation landmark.

For example: On MDN, the <aside> nav structure (present on the left side of the screen) is implemented appropriately. The <aside> nav structure functions as a navigation to “related topics”, thus acting as supporting content related to the main section content. If this section were to be separated from the main content, it would still retain its meaning on its own.

For more information on ARIA Landmarks, explore the "Landmarks, Links and Headings" course from Accessible Web Academy.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.