为什么HTML5中的导航栏是列表？

Why do navigation bars in HTML5 as lists?(为什么HTML5中的导航栏是列表？)

问题描述

自从我开始使用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中的导航栏是列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！