自从我开始使用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>
和/或相关的ARIA角色吗?是否还需要专门显示为链接列表(无序或其他)?<a>
中的<nav>
)而不是<li>
中的<ul>
将如期望的那样容易或更容易。<nav>
规范:说链接不必在列表中,但它可以。但它也将<nav>
的内容指定为“链接的一部分”,它还需要是一个“链接列表”吗?各种帖子:
<nav>
进行类似的测试)<div>
和<span>
s(从HTML5开始)。更糟糕的是,它试图读出所有导航列表而不是页面实际内容。我可能会继续使用列表,因为这似乎是当前的现状,并希望将向后(和向前?)兼容,我将尝试使用现代屏幕阅读器自己使用我自己的代码进行更多研究*。但是有理由在导航中使用更新的HTML5语义列表吗?
另外,除了JAWS之外,我应该尝试哪些屏幕阅读器?
许多导航菜单包含多个级别(通常用于下拉菜单),即层次结构:
- 家
- 制品 实物产品 数码产品
- 联系
如果不使用ul
(使用嵌套的ul
),则无法在标记中表示此层次结构(除非导航是复杂/长的,在这种情况下,您可以使用带有标题元素的子部分)。
您的导航(当前)没有多个级别?这并没有突然改变它的语义,它仍然是相同的信息结构,只有一个级别而不是两个或更多。
通过使用ul
,用户代理(如屏幕阅读器)有机会提供利用该结构的功能。例如,屏幕阅读器可以宣布列表具有多少项,并提供导航该列表的其他方式(例如,跳转到第一个/最后一个项目)。
如果仅使用div
,则很容易发生用户“勾选”导航但未注意到导航已经结束。通过使用ul
,非常清楚开始和结束的位置,这对导航菜单尤其重要,因为导航条目通常只有与其他菜单相比才有意义(找到适合您目标的正确链接通常只有可以通过检查所有可用的导航链接并将其排除在外)。
nav
.nav
元素只传达此部分包含导航链接。如果没有nav
(即HTML5之前版本),用户代理只知道有一个列表。使用nav
,用户代理知道有一个列表+它用于导航。
此外,nav
当然不应该总是包含ul
,因为并非所有导航都是链接列表。看到这个nav
example in the HTML5 spec:
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>
为什么导航栏被实现为html列表(ul
)的问题不如你未使用列表时如何实现它们那么重要。
HTML菜单就像食物菜单,它们本质上是无序列表。您可以浏览并选择所需元素的东西。人们不会选择将菜单显示为列表,这是一个事实:菜单是一个列表。那么为什么你会使用另一个元素而不是ul
和li
?
某些浏览器实现的默认CSS定义带有子弹的事实与表示相关,但不会单独更改标记的含义。
例如,根据W3C,这里是div
的定义:
div元素是流内容的通用容器,它本身不代表任何东西。
现在,table
的定义:
table元素表示一个表;也就是说,具有多个维度的数据。
这是ul
的定义:
ul元素表示无序的项列表;也就是说,更改项目顺序的列表不会改变列表的含义。
在3个定义中,更合适的标签是ul
。
此外,它还为屏幕阅读器提供导航机制,如宣布层次结构,转到下一个/前一个元素,......
关于屏幕阅读器,您还可以尝试NVDA,Chromevox和画外音。