1

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">
 <li>
    <a href="#">Portfolio</a>
  </li>
  <li>
    <a href="#">Meet Stefany</a>
  </li>
   etc...
  </ul>
    </nav>
1

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.

| improve this answer | |
  • 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 '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 '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 '19 at 23:13

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