自从我开始使用 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 的垂直列表中,是的。但其他替代标记(例如
<a>
中的<nav>
)而不是<li>
在<ul>
将根据需要轻松设置样式。现有用途:它在现有网站中大量使用(例如 StackExchange 站点、MDN,等等……)。
W3C
<nav>
spec:表示链接不必在列表中,但可以。但它也指定了<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 - 实际上显示列表效果更好(尽管经常说“Bullet”),但是很老了……(我会尝试用
<nav>
进行类似的测试) - B Free More article , VJAKYSQQ article和 Jim Doran article - 2011 - 基于一位 JAW 盲人用户的演讲,并表示使用列表会使情况变得更糟并且
<div>
的 &<span>
应该使用 s(从 HTML5 之前开始)。更糟糕的是,否则它会尝试读出所有导航列表而不是页面实际内容。
我可能会继续使用列表,因为这似乎是当前的现状,并且希望能够向后(和向前?)兼容,并且我会尝试使用现代屏幕阅读器*自己对自己的代码进行更多研究。但是是否有理由在导航中使用列表以更符合 HTML5 语义?
此外,除了 JAWS,我还应该尝试使用哪些屏幕阅读器?
最佳答案
层次结构!
许多导航菜单包含多个级别(通常用于下拉菜单),即层次结构:
- Home
- Products
- Physical products
- Digital products
- Contact
如果不使用 ul
(带有嵌套的 ul
),您无法在标记中表示此层次结构(除非导航很复杂/很长,在这种情况下您可以使用带有标题元素的子部分)。
您的导航(目前)不超过一级?这并没有突然改变它的语义,它仍然是相同的信息结构,只是只有一个级别而不是两个或更多级别。
列表的更多好处。
通过使用 ul
,用户代理(如屏幕阅读器)有机会提供利用该结构的功能。例如,屏幕阅读器可以宣布列表有多少项目,并提供额外的方式来导航该列表(例如,跳转到第一个/最后一个项目)。
如果只使用 div
,很容易发生用户“跳出”导航而没有注意到导航已经结束的情况。通过使用 ul
,可以非常清楚开始和结束的位置,这对于导航菜单尤其重要,因为导航条目通常只有在与所有其他条目进行比较时才有意义(找到正确的通常只有通过检查所有可用的导航链接并将其排除在外,才能找到您目标的链接。
这一切都与nav
无关。
nav
元素仅表示此部分包含导航链接。如果没有 nav
(即 HTML5 之前的版本),用户代理只知道有一个列表。使用 nav
,用户代理知道有一个列表 + 它用于导航。
此外,nav
当然不应该总是 包含ul
,因为并非所有导航都是链接列表。看这个nav
example in the HTML5 spec :
A
nav
element doesn't have to contain a list, it can contain other kinds of content as well. In this navigation block, links are provided in prose:<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>
关于html - 为什么 HTML5 中的导航栏做成列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36811224/