为什么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可访问性角色的列表,还有什么好处？当然是一个链接列表,但还有其他任何实际原因吗？

我找到的理由:

• 语义,屏幕阅读器和可访问性:意见各不相同,特别是它如何使屏幕阅读器更好(或更糟糕......).但是不应该<nav>在链接周围使用HTML5 和/或相关的ARIA角色吗？是否还需要专门显示为链接列表(无序或其他)？

• 美学:在带有默认项目符号的垂直列表中,或者没有CSS,是的.但是,否则替代标记(例如<a>in <nav>)而不是<li>in <ul>将会如期望的那样容易或更容易.

• 现有用途:它在现有网站中使用很多(例如StackExchange站点,MDN,还有更多......).

• W3C <nav>规范:说链接不必在列表中,但它可以.但它也指定了<nav>"链接部分" 的内容,它还需要是"链接列表"吗？

• 向后兼容性:它经常被使用,因此应得到广泛支持,HTML5和ARIA可能无法供旧浏览器/屏幕阅读器使用.

各种帖子:

• CSS技巧 - 2013-01 - 说他们不会使用列表.然后在导航中使用列表:-S
• Dustin Brewer的文章(已存档) - 2011-06 - 被广泛提及
• Stack Overflow:我为什么要在HTML中使用UL/LI？和是否应导航栏总是被实现为列表？- 2012 - "是的,它列在列表中的链接列表".
• HTML5规范
• 布鲁斯劳森的文章 - 2005年 - 实际上显示列表工作得更好(尽管说"子弹"很多),但是很老......(我会尝试进行类似的测试<nav>)
• B自由更多的文章,VJAKYSQQ文章和吉姆·多兰的文章 - 2011 - 基于语音从大白鲨的盲人用户,并说,使用列表使情况变得更糟和<div>"S&<span>S的关系(HTML5之前,)使用.更糟糕的是,它试图读出所有导航列表而不是页面实际内容.

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

另外,除了JAWS之外,我应该尝试哪些屏幕阅读器？

Answer 1

层次!

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

• 家
• 制品
  • 实物产品
  • 数码产品
• 联系

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

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

列表的更多好处.

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

如果仅div使用,则可能更容易发生用户"跳出"导航而未注意到导航已经结束.通过使用a ul,非常清楚开始和结束的位置,这对导航菜单尤其重要,因为导航条目通常只有与其他菜单相比才有意义(找到适合您目标的正确链接通常是可能的通过检查所有可用的导航链接并排除它们).

这一切都与此无关nav.

该nav元素只传达此部分包含导航链接.如果没有nav(即HTML5之前的版本),用户代理只知道有一个列表.随着nav,用户代理知道有一个列表+,它的用于导航.

此外,nav当然不应该总是包含一个ul,因为并非所有导航都是链接列表.请参阅navHTML5规范中的此示例:

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

Answer 2

为什么导航栏被实现为 html 列表 ( ul) 的问题不如不使用列表时如何实现它们重要。

HTML 菜单就像食物菜单，本质上它们是无序列表。您可以浏览并选择您想要的元素。人们不会选择将菜单显示为列表，这是事实：菜单就是列表。那么为什么你会使用另一个元素而不是uland li呢？

某些浏览器实现的默认 CSS 定义以项目符号呈现它这一事实与呈现相关，但不会改变标签本身的含义。

例如，这是div根据 W3C对 a 的定义：

div 元素是流内容的通用容器，它本身不代表任何内容。

现在， a 的定义table：

table 元素代表一个表格；即多维数据。

这是 a 的定义ul：

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

在这 3 个定义中，更合适的标签是ul.

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

关于屏幕阅读器，您还可以尝试 NVDA、Chromevox 和 Voiceover。