为什么HTML5中的导航栏是列表？ [英] Why do navigation bars in HTML5 as lists?
问题描述
自从我开始使用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，可以。但除此之外，替代标记(例如
<nav>中的<a>)而不是<ul>中的<li>)将根据需要轻松设置样式。现有用途：在现有网站(如StackExchange站点、mdn、更多的…)中大量使用。
W3C
<nav>规范：说明链接不必在列表中，但可以在列表中。但是它还将<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-实际上显示列表工作得更好(尽管说了很多)，但它是非常旧的…(我将尝试使用
<nav>执行类似的测试) - B Free More article、VJAKYSQQ article和Jim Doran article-2011-基于JAWS盲人用户的语音，并表示使用列表会使情况变得更糟，应该使用
<div>的&；<span>(从HTML5之前开始)。情况更糟，否则会尝试读出所有导航列表，而不是页面的实际内容。
我可能会继续使用列表，因为这似乎是当前的现状，并且希望是向后的(和向前的？)兼容，我将尝试使用现代屏幕阅读器自己的代码进行更多的研究*。但有没有理由在导航中使用HTML5语义更新的列表？
另外，除了JAWS，我还应该尝试哪些屏幕阅读器？
推荐答案
层次结构！
许多导航菜单包含多个级别(通常用于下拉菜单)，即层次结构：
- 主页
- 产品
- 实物产品
- 数码产品
- 联系人
如果不使用ul(使用嵌套的ul)，您将无法在标记中表示此层次结构(除非导航是复杂的/长的，在这种情况下，您可以使用带有标题元素的子节)。
您的导航(当前)没有多个级别？这不会突然改变其语义，它仍然是相同的信息结构，只是只有一个级别，而不是两个或更多级别。
列表的更多好处。
通过使用ul，用户代理(如屏幕阅读器)有机会提供利用该结构的功能。例如，屏幕阅读器可以宣布列表有多少项，并提供其他方法来导航该列表(例如，跳到第一项/最后一项)。
如果只使用div，很容易发生用户在没有注意到导航已经结束的情况下"跳出"导航的情况。通过使用ul，非常清楚开始和结束的位置，这对于导航菜单尤其重要，因为导航条目通常只有在与所有其他条目进行比较时才有意义(通常只有通过检查所有可用的导航链接并排除它们，才能找到与您的目标相匹配的正确链接)。
所有这些与nav无关。
<2-18]>元素只是表示此部分包含导航链接。如果没有nav(即HTML5之前的版本)，用户代理只知道有一个列表。使用nav，用户代理知道有一个列表+它用于导航。
此外，nav当然不应该总是包含ul，因为并非所有导航都是链接列表。查看此nav example in the HTML5 spec：
<2-18]>元素不一定要包含列表，它还可以包含其他类型的内容。在此导航挡路中，链接以散文形式提供：<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>
这篇关于为什么HTML5中的导航栏是列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
