自从我开始使用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>
CSS:
ul{list-style-type:none;}
li{display:inline-block;}
现在HTML5基本上是一样的,但是插入了一个
<a>
标签或者其他任何对浏览器/屏幕阅读器说“这是一些导航工具”的东西。我的问题是,它们是否需要在具有现代HTML5语义和ARIA可访问性角色的列表中,还有什么好处?当然,这是一个链接列表,但有其他实际原因吗?
我发现的原因:
语义、屏幕阅读器和可访问性:不同的观点,关于它如何使屏幕阅读器变得更好(或更糟…)的特殊性。但是,在链接周围使用HTML5的
<nav>
和/或相关的aria角色不应该这样做吗?它是否还需要特别显示为链接列表(无序或其他方式)?美学:在有默认项目符号点的垂直列表中,或者没有CSS,是的。但是,其他替代标记(例如
<nav>
in<a>
)而不是<nav>
in<li>
将像所需的样式一样容易或更容易。现有用途:它在现有网站(如StackExchange网站、MDN、许多其他网站等)中被大量使用。
w3c
<ul>
spec:说链接不必在列表中,但可以。但它还将<nav>
的内容指定为“链接的一部分”,它是否还需要是“链接列表”?向后兼容性:它经常被使用,所以应该得到广泛的支持,并且HTML5和ARIA可能对旧的浏览器/屏幕阅读器不可用。
各种提到的职位:
说他们不会使用列表。然后在导航中使用列表:-s
CSS Tricks-2011-06-广泛引用
堆栈溢出:Dustin Brewer article (archived)andWhy should I use UL/LI in my HTML?-2012-“Yeah its a list of links it goes in a list.”
Should navigation bars always be implemented as lists?
HTML5 spec-2005-实际上显示列表工作得更好(尽管经常说“bullet”,但它很老…(我将尝试使用
<nav>
进行类似的测试)Bruce Lawson article、B Free More article和VJAKYSQQ article-2011-基于盲用户jaws的语音,并表示使用列表会使情况更糟,应使用
<nav>
、<div>
s(从HTML5之前开始)。更糟糕的是,它试图读取所有的导航列表,而不是页面的实际内容。我可能会继续使用列表,因为这似乎是目前的现状,希望是向后(和向前?)兼容,我将尝试用我自己的代码,使用现代的屏幕阅读器*进行更多的研究。但是,在使用HTML5语义的导航中使用列表是否有原因更为及时?
另外,除了JAWS,我应该尝试什么屏幕阅读器?
最佳答案
等级制度!
许多导航菜单包含多个级别(通常用于下拉菜单),即层次结构:
家
产品
实物
数字产品
联系人
如果不使用ul
(使用嵌套的ul
),则无法在标记中表示此层次结构(除非导航是复杂/长的,在这种情况下,可以使用带有标题元素的子节)。
您的导航(当前)没有多个级别?这并不会突然改变它的语义,它仍然是相同的信息结构,只使用一个级别而不是两个或更多级别。
更多列表的好处。
通过使用ul
,用户代理(如屏幕阅读器)有机会提供利用该结构的功能。例如,屏幕阅读器可以宣布列表中有多少个项目,并提供导航该列表的其他方法(例如,跳转到第一个/最后一个项目)。
如果只使用了div
通过使用ul
,可以很清楚地知道起始点和结束点在哪里,这对于导航菜单尤其重要,因为导航条目通常只与所有其他条目相比才有意义(通常只有通过检查所有可用项才能找到目标的正确链接e导航链接并排除它们)。
所有这些都与nav
无关。nav
元素只是表示此部分包含导航链接。如果没有nav
(即,pre-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>
关于html5 - 为什么HTML5中的导航栏会作为列表?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36811224/