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

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

HTML:

还有

，

-2013-01-内的
，表示他们不会使用列表。然后在导航中使用列表：-S

-2011-06-广泛引用
堆栈溢出：和-2012-“是的，这是一个链接列表，它在一个列表中”

-2005-实际上显示列表工作得更好（尽管经常说“Bullet”），但它非常旧…（我将尝试使用
执行类似的测试）
，和-2011-基于JAWs的一位盲人用户的讲话，他说使用列表会使情况变得更糟，应该使用
的&
s（从HTML5之前开始）。更糟糕的是，它试图读取所有导航列表，而不是页面的实际内容

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

此外，除了JAWS之外，我还应该尝试哪些屏幕阅读器？
为什么导航栏被实现为html列表（
ul
）的问题没有在不使用列表的情况下如何实现它们那么重要

HTML菜单就像食物菜单，本质上是无序列表。您可以在其中导航并选择所需的元素。人们不会选择以列表的形式呈现菜单，这是一个事实：菜单就是一个列表。那么，为什么要使用另一个元素而不是
ul
和
li

某些浏览器实现的默认CSS定义使用一个项目符号表示它，这一事实与表示相关，但不会改变标记本身的含义

例如，以下是根据W3C对
div
的定义：

div元素是流内容的通用容器，其本身并不表示任何内容

现在，表的定义如下：

table元素表示一个表；也就是说，具有多个维度的数据

这是ul的定义：

ul元素表示无序的项目列表；也就是说，改变项目顺序不会改变列表含义的列表

在3种定义中，更合适的标签是
ul

此外，它还为屏幕阅读器提供了导航机制，如宣布层次结构、转到下一个/上一个元素等

关于屏幕阅读器，您也可以尝试NVDA、Chromevox和Voiceover。
Hierarchy！
许多导航菜单包含多个级别（通常用于下拉菜单），即层次结构：


家
产品

实物产品
数字产品

接触

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

您的导航（当前）没有多个级别？这不会突然改变它的语义，它仍然是相同的信息结构，只是只有一个级别，而不是两个或更多级别

列表的更多好处。
通过使用
ul
，用户代理（如屏幕阅读器）有机会提供利用该结构的功能。例如，屏幕阅读器可以宣布列表中有多少项，并提供导航该列表的其他方式（例如，跳转到第一项/最后一项）

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

所有这些都与
nav
无关。
nav
元素仅表示此部分包含导航链接。没有
nav
（即HTML5之前的版本），用户代理只知道有一个列表。使用
nav
，用户代理知道有一个列表+用于导航

此外，
nav
当然不应该总是包含
ul
，因为并非所有导航都是链接列表。见此：

nav
元素不必包含列表，它还可以包含其他类型的内容。在此导航块中，以散文形式提供链接：

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


航行
你在我的主页上。北面躺着，从那里可以听到战斗的声音。向东
你可以看到一座大山，山上散落着许多垃圾。远山
你可以看到一个看起来像我的小人物，绝望地
涂鸦

西边有几个出口。一个有趣的出口被贴上了标签。再来一个
无聊的出口被贴上了标签

南面是一片阴暗潮湿的土地。蜘蛛网覆盖着它废弃的入口，在某一点上你可以
看到一只老鼠飞快地跑出了书页


“还有，除了JAWS，我还应该尝试哪些屏幕阅读器？”：开源NVDA，在不同的浏览器（即FF、Chrome、Opera等）中测试这两种（也包括JAWS）；MAC上带有Safari和其他浏览器的Voiceover；如今，盲人用户也普遍使用移动设备：iOS和Talkb上的画外音