HTML Semantics: Should the icon to trigger the menu on a responsive page be included in the nav?

Question

Lets compare the following three code examples:

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#"><img src="trigger.png"></a></li>
    </ul>
</nav>

Example 1

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <a href="#"><img src="trigger.png"></a>
</nav>

Example 2

<nav>
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
</nav>
<a href="#"><img src="trigger.png"></a>

Example 3

Regarding semantics, which one is the most precise - should the menu trigger be included in the list inside nav, inside nav but outside the list or even outside nav?

Answer 1

I'd prefer:

<nav role="navigation">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
    </ul>
    <button title="Show / Hide menu"><img src="trigger.png" alt="Show / Hide menu"></button>
</nav>

(note the landmark role and use of a button)
because the trigger will be found by Assistive Technologies (screen readers mainly but not only them) inside the element where they expect to find the main navigation of a website.

• [role="navigation"] will help browsers ant ATs to find without any doubt the navigation. Other landmark roles are banner, contentinfo, search, main, complementary (and other less important to current use)
• button should be used instead of link element whenever clicking on the 'link' doesn't jump to another page, anchor and/or if the href attribut has a value of #)

Answer 2

A bit more belt and braces, but I would suggest:

<nav role="navigation" aria-labelledby="navHeading">
<h2 class="at" id="navHeading">Main menu</h2>

<button aria-haspopup="true"><img src="trigger.png" alt="Show menu"></button>
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</nav>

A few accessibility things:

• H2, hidden from view (the .at class should hide it off-screen).
• role on the nav, as that is more robust (more things will understand that).
• aria-labelledby, combined with the ID will label the navigation.
• aria-haspopup indicates there is a pop-up or new thing being shown.

I'd go with button for the show/hide mechanism because it doesn't take you anywhere, it controls something on the page. Top or bottom probably doesn't make much difference, but I'm used to controls for show/hide elements being at the start.

However, I would make sure that when selected the keyboard focus gets placed on the first link.

Also, don't forget that the button should have content, so the image needs alt text.