4

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

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

4

2 回答 2

8

我更喜欢：

<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只要点击“链接”并没有跳转到另一个页面、锚点和/或href属性的值为#) ，就应该使用该元素而不是链接元素
于 2013-10-23T09:13:05.387 回答
3

多一点腰带和背带，但我建议：

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

一些可访问性的东西：

  • H2，从视图中隐藏（.at该类应将其隐藏在屏幕外）。
  • role在 上nav，因为它更健壮（更多的东西会理解）。
  • aria-labelledby，结合ID将标签导航。
  • aria-haspopup表示正在显示弹出窗口或新事物。

我会选择button显示/隐藏机制，因为它不会带你去任何地方，它控制页面上的某些东西。顶部或底部可能没有太大区别，但我习惯于在开始时控制显示/隐藏元素。

但是，我会确保在选择时键盘焦点放在第一个链接上。

另外，不要忘记按钮应该有内容，所以图像需要替换文本。

于 2013-10-23T23:15:22.620 回答