列表中的导航：是还是不是

如果您在 Google 上搜索是否应该将列表用作网站导航的标记，您将发现没有争议。每篇文章都建议您应该这样做。您阅读的大多数教程都将使用列表进行导航。您看到的大多数模板都将使用列表进行导航。但这种普遍存在的标记模式绝对正确吗？让我们看看。

您今天可能会看到什么

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

或者，如果是在 HTML5 之前，就不会有 <nav> 标签，而是 <ul class="nav">

替代方案：无列表导航

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Clients</a>
  <a href="#">Contact Us</a>
</nav>

一场老战争

2005 年：布鲁斯·劳森 对屏幕阅读器进行了实际研究。结论是列表是最好的，但它是在将列表与表格中的标记进行比较的情况下得出的，因此这是有道理的。

2007 年：我发布了关于 无列表导航 的内容，达斯汀·布鲁尔 强烈反对 应该永远使用这种方式。达斯汀的文章谈到了语义、无障碍性和屏幕阅读器，但没有进行任何研究，也没有解释为什么无列表导航不具有语义性或会带来屏幕阅读器问题。

雷纳德·斯特布纳的登场

2011 年 1 月，雷纳德在巴尔的摩的一次 Refresh 活动上发表了演讲，显然给观众留下了深刻的印象。他完全失明，并谈论了标记无障碍性。

雷纳德建议 **不要使用列表进行导航，而是使用 divs 和 spans。**

莉亚·沃格利参加了这次活动 并写道

我认为房间里的每个人在听到这句话时都挠了挠头。您学习编码时最先学习的事情之一就是如何构建导航，通常是用无序列表完成的。但是，这种列表结构不利于屏幕阅读器的逻辑。span 标签不被屏幕阅读器识别，因此它可以简化您的内容以实现无障碍性的一种方式。

另一位与会者写道:

Divs 和 spans 是最佳选择，因为它们对屏幕阅读器是不可见的。Stebner 在 mica.edu 上浏览了太多列表，这些列表没有给出他在页面上的位置的任何线索，也没有提供除“列表，10 项。列表，6 项……”之外的任何信息。使用 divs 和 spans，内容可以立即被屏幕阅读器获取。

吉姆·多兰 也在那里

将导航结构（只是一组超链接）放在列表中，应该允许屏幕阅读器在每个链接之间暂停，而不是将所有链接读作一个句子。从语义上来说，这是有道理的。我们使用 HTML 为内容应用有意义的标记 - 将事物标记为列表似乎是一个好主意。但是，没有简单的方法可以识别列表是一组链接，因此具有 12 组链接的页面可能会非常混乱。他用 Jaws 演示了这一点。

我们提到了 ARIA 作为一种解决其中一些问题的方法，并且他不希望使用列表来显示链接，而是希望看到更多 <div> 和 <span> 的使用。

雷纳德·斯特布纳说得非常清楚。他使用 JAWS 作为屏幕阅读器，而列表中的导航使他更加困难。

VoiceOver

到目前为止，所有提到的研究都是针对 JAWS 的。据我了解，JAWS 是最流行的屏幕阅读器。还有一种在 OS X 上附带的原生 VoiceOver。在我的测试中，VoiceOver 以完全相同的方式浏览导航，无论它是在列表中还是不在列表中。跨浏览器测试固然重要，跨屏幕阅读器测试也同样重要。

HTML5

其中一些对话早于 HTML5 的广泛使用。HTML5 具有 <nav> 标签，我认为这解决了语义问题。如果您要标记导航，请将其放在 <nav> 标签中。如果没有 HTML5，或者您必须使用其他包装元素，您可以使用 ARIA 角色：<div role="navigation">。

更新：询问之后，您应该在 nav 标签上使用 ARIA 角色，即使它已隐式存在，因为某些浏览器没有像应该的那样应用它。因此 <nav role="navigation">。感谢 Dave！

规范

表示:

nav 元素不必包含列表……

然后继续展示导航段落的示例。

内联与块

不使用列表进行导航意味着链接将按行排列，而不是像默认列表那样每行一个。我个人觉得这是一个方便的空白画布，并且喜欢不用删除列表的 user-agent 样式表样式。如果您希望链接像列表一样工作，您可以始终通过 CSS 更改链接的 display 属性。

所以

您怎么看？无谓的追求？有价值的讨论？

我个人已经无列表很长一段时间了。在我看到一些可靠的研究表明这是愚蠢的做法之前，我会坚持下去。和以往一样，最好的办法是向雷纳德这样的真正的屏幕阅读器用户了解更多信息。

如果我们继续使用列表，为什么它总是无序列表？我记得瑞安·辛格有一次对此大发雷霆。我们是否应该认为我们非常刻意地选择了该列表的顺序？

---

请务必查看 总结文章，了解这篇文章发布后我们对所有这些内容的了解。