I want to create an accessible off-canvas navigation and most tutorials say you should put it inside the <aside> element, however, since it is my main navigation which will appear on one line on desktop, wouldn't it be un-semantical to put it inside <aside> ?

Here is my current code:

<nav id="primary-nav" aria-label="Main Navigation">
<ul class="container">
    <a href="#">Portfolio</a>
    <a href="#">Meet Stefany</a>

closed as off-topic by Shreyas Tripathy, locationunknown, JonW Feb 19 at 10:58

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Shreyas Tripathy, locationunknown, JonW
If this question can be reworded to fit the rules in the help center, please edit the question.


You are doing it correctly. Navigation areas should be in a <nav> element (or a <div> with role="navigation"). You even have an aria-label for your <nav> - bravo!

most tutorials say you should put it inside the element

Do you have a reference for such a tutorial?

The html spec for <aside> does say it could be used for groups of <nav> elements, so I suppose that's one reference, but I'm not sure I've seen groups of <nav> elements before.

The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of <nav> elements, and for other content that is considered separate from the main content of the nearest ancestor sectioning content.

So the navigation elements themselves (often a list) should be contained in a <nav> but the <nav> itself might be contained in an <aside>. I've never organized my navigation elements that way.

  • Here is one tutorial taniarascia.com/off-canvas-navigation and github.com/vmitsaras/js-offcanvas those folks use <aside> and they claim to be accessible, hence my confusion. THANK YOU so much for helping! P.S. Heh, I wasn't sure if the aria-label was redundant, thanks! – Stefany Newman Feb 19 at 17:06
  • the first example doesn't say anything about being accessible. the second example, if you follow it to codepen.io/vmitsaras/pen/gwGwJE, does work pretty well with regards to keyboard accessibility. the navigation area should be in a <nav> rather than "complementary" (<aside>) but that's a minor issue. the fact that they put their navigation into an <aside> doesn't make it accessible. it's all the other stuff they did. – slugolicious Feb 19 at 23:11
  • and regarding the aria-label on your <nav> example, if you only have one <nav>, then you don't necessarily need a label. if you have more than one, definitely put unique labels on each one. but even with one, it's nice to have a label. but you should not have the word "navigation" in the label because you're already using the <nav> element which will be announced as "navigation" by the screen reader. just like you don't need "button" in a button label. – slugolicious Feb 19 at 23:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.