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

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

本文介绍了为什么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中的导航栏是列表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:为什么HTML5中的导航栏是列表?

基础教程推荐