html - 为什么 HTML5 中的导航栏做成列表？

Question

自从我开始使用 HTML、CSS 等以来，我一直注意到的一件事是，导航栏几乎总是以列表的形式呈现，在某些变体中:

HTML:

<ul>
 <li><a href="link1.html">link 1</a></li>
 <li><a href="link2.html">link 2</a></li>
 <li><a href="link3.html">link 3</a></li>
 <li><a href="link4.html">link 4</a></li>
</ul>

^{还有 <li>在<a>里面}

CSS:

ul {
    list-style-type: none;
}

li {
    display: inline-block;
}

和现在的HTML5基本一样，只是塞了个<nav>标签或任何对浏览器/屏幕阅读器说“这是一些导航内容”的内容。

我的问题是它们是否需要与现代 HTML5 语义和 ARIA 可访问性角色一起使用，还有什么好处？当然是链接列表，但还有其他实际原因吗？

我发现的原因:

• 语义、屏幕阅读器和可访问性:对于它如何使屏幕阅读器变得更好(或更糟……)，观点各不相同。但是不应该使用 HTML5 的 <nav>和/或链接周围的相关 ARIA 角色执行此操作？它是否也需要专门显示为链接列表(无序或其他方式)？

• 美学:在带有默认项目符号点或没有 CSS 的垂直列表中，是的。但其他替代标记(例如 <a> 中的 <nav> )而不是 <li>在 <ul>将根据需要轻松设置样式。

• 现有用途:它在现有网站中大量使用(例如 StackExchange 站点、MDN，等等……)。

• W3C <nav> spec:表示链接不必在列表中，但可以。但它也指定了<nav>的内容作为“链接的一部分”，它是否也需要是“链接列表”？

• 向后兼容性:它经常被使用，因此应该得到广泛支持，并且 HTML5 和 ARIA 可能不适用于旧的浏览器/屏幕阅读器。

各种引用帖子:

• CSS Tricks - 2013-01 - 表示他们不会使用列表。然后在他们的导航中使用列表:-S
• Dustin Brewer article (archived) - 2011-06 - 被广泛提及
• 堆栈溢出:Why should I use UL/LI in my HTML?和 Should navigation bars always be implemented as lists? - 2012 - “是的，它是一个列表中的链接列表”。
• HTML5 spec
• Bruce Lawson article - 2005 - 实际上显示列表效果更好(尽管经常说“Bullet”)，但是很老了……(我会尝试用 <nav> 进行类似的测试)
• B Free More article , VJAKYSQQ article和 Jim Doran article - 2011 - 基于一位 JAW 盲人用户的演讲，并表示使用列表会使情况变得更糟并且 <div>的 & <span>应该使用 s(从 HTML5 之前开始)。更糟糕的是，否则它会尝试读出所有导航列表而不是页面实际内容。

我可能会继续使用列表，因为这似乎是当前的现状，并且希望能够向后(和向前？)兼容，并且我会尝试使用现代屏幕阅读器*自己对自己的代码进行更多研究。但是是否有理由在导航中使用列表以更符合 HTML5 语义？

此外，除了 JAWS，我还应该尝试使用哪些屏幕阅读器？

Answer 1

层次结构!

许多导航菜单包含多个级别(通常用于下拉菜单)，即层次结构:

• Home
• Products
  • Physical products
  • Digital products
• Contact

如果不使用 ul(带有嵌套的 ul)，您无法在标记中表示此层次结构(除非导航很复杂/很长，在这种情况下您可以使用带有标题元素的子部分)。

您的导航(目前)不超过一级？这并没有突然改变它的语义，它仍然是相同的信息结构，只是只有一个级别而不是两个或更多级别。

列表的更多好处。

通过使用 ul，用户代理(如屏幕阅读器)有机会提供利用该结构的功能。例如，屏幕阅读器可以宣布列表有多少项目，并提供额外的方式来导航该列表(例如，跳转到第一个/最后一个项目)。

如果只使用 div，很容易发生用户“跳出”导航而没有注意到导航已经结束的情况。通过使用 ul，可以非常清楚开始和结束的位置，这对于导航菜单尤其重要，因为导航条目通常只有在与所有其他条目进行比较时才有意义(找到正确的通常只有通过检查所有可用的导航链接并将其排除在外，才能找到您目标的链接。

这一切都与nav无关。

nav 元素仅表示此部分包含导航链接。如果没有 nav(即 HTML5 之前的版本)，用户代理只知道有一个列表。使用 nav，用户代理知道有一个列表 + 它用于导航。

此外，nav 当然不应该总是 包含ul，因为并非所有导航都是链接列表。看这个nav example in the HTML5 spec :

A nav element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:

<nav>
 <h1>Navigation</h1>
 <p>You are on my home page. To the north lies <a href="/blog">my
 blog</a>, from whence the sounds of battle can be heard. To the east
 you can see a large mountain, upon which many <a
 href="/school">school papers</a> are littered. Far up thus mountain
 you can spy a little figure who appears to be me, desperately
 scribbling a <a href="/school/thesis">thesis</a>.</p>
 <p>To the west are several exits. One fun-looking exit is labeled <a
 href="http://games.example.com/">"games"</a>. Another more
 boring-looking exit is labeled <a
 href="http://isp.example.net/">ISP™</a>.</p>
 <p>To the south lies a dark and dank <a href="/about">contacts
 page</a>. Cobwebs cover its disused entrance, and at one point you
 see a rat run quickly out of the page.</p>
</nav>