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 #)