HTML语义:导航中是否包含触发响应页面菜单的图标？

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但是在列表外部甚至是外部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>

(注意具有里程碑意义的角色和按钮的使用),
因为触发器将由Assistive Technologies(主要是屏幕阅读器,但不仅仅是它们)在他们期望找到网站主导航的元素内找到.

• [role="navigation"]将帮助浏览器蚂蚁ATs毫无疑问地找到导航.其他具有里程碑意义的角色是banner,contentinfo,search,main,complementary(以及其他对当前使用不太重要)
• button应使用,而不是只要点击"链接"的链接元素不会跳转到另一个页面,锚和/或如果hrefattribut具有的价值#)