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

Question

让我们比较以下三个代码示例:

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

示例 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>

示例 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>

示例 3

关于语义，哪一个是最精确的 - 菜单触发器应该包含在 nav 内的列表中，在 nav 内但在列表外，甚至在 外>导航?

Answer 1

我更愿意:

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

(注意一个按钮的地标作用和使用)
因为触发器将被辅助技术(主要是屏幕阅读器，但不仅限于它们)在他们希望找到网站主要导航的元素中找到。

• [role="navigation"] 将帮助浏览器和 AT 毫无疑问地找到导航。其他具有里程碑意义的角色是横幅、内容信息、搜索、主要、补充(以及其他对当前使用不太重要的角色)
• button should be used 而不是链接元素，只要单击“链接”不会跳转到另一个页面、 anchor 和/或如果 href 属性的值为 # )