52

以下所有内容是否具有相同的语义含义？如果不是，请解释您的答案。


1.

<nav>
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</nav>


2.

<div role="navigation">
    <ul>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
        <li><a href="#">link</li>
    </ul>
</div>


3.

<ul role="navigation"> 
<! -- breaks HTML5 specification 3.2.7.4 Implicit ARIA Semantics
      navigation is not an allowed value of role on ul -->
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
    <li><a href="#">link</li>
</ul>
4

6 回答 6

48

正如Alohci 所指出的，根据 HTML5，示例 3 是不允许的。

但是示例 1 和示例 2 在语义上并不等效。

nav是一个切片元素，div不是。因此，示例 1 创建了一个无标题部分（类似于空标题），从而更改了整个文档的大纲。

也nav始终属于其父分段内容（分别是分段根），因此您可以拥有整个网站的导航、主要内容的导航、仅主要内容第 3 章的导航和/或侧边栏中的次要内容等。

这种差异体现在navigation角色的定义中

用于导航文档或相关文档的导航元素（通常是链接）的集合。

和nav元素（由我加粗）：

该nav元素表示链接到其他页面或页面内部分的页面部分：具有导航链接的部分。

另请注意：不支持/不知道 WAI-ARIA 的 HTML5 用户代理不会理解示例 2 包含导航（反之亦然）。

于 2013-01-08T18:15:03.933 回答
22

Twitter Bootstrap使用<nav role="navigation">

这似乎最有效地涵盖了所有需求。

确保为每个导航栏添加一个 role="navigation" 以帮助实现可访问性。

w3.org 也建议这样做

于 2013-10-17T18:27:13.967 回答
6

前两种情况在语义上是等价的。第三个不是。<ul>具有默认的隐含 ARIA 语义,list并且只能有效地设置为directory, list, listbox, menu, menubar, presentation, tablist,toolbar或tree，因此将其设置navigation为无效并破坏元素在前两种情况下的list语义。<ul>

于 2013-01-06T11:04:43.090 回答
5

<nav role="navigation">在 W3C 验证服务上使用 HTML5 dtd 为我验证。

对我来说，这似乎是一个不错的选择，因为它支持新旧版本，直到辅助技术赶上来。

于 2013-10-27T10:31:30.690 回答
3

WAVE Web Accessibility Tool can be used to get information about things like this.

Though I find the documentation there and the result view when checking a bit confusing. I think it would be good with clear examples since not everyone knows very much about accessibility on the web. (The result view looks very good, but still examples would be helpful.)

于 2014-04-02T04:42:25.733 回答
2

好的，这是一个很好的问题，简而言之，当两个或多个提出类似问题的规范在不同时间发布并由不同的浏览器/屏幕阅读器支持时，就会发生这种情况。

该<nav>元素应navigation自动赋予角色，因此理论上您可以只使用选项 1。但是，一些屏幕阅读器还不知道，所以使用 2 会更好。选项 3 似乎很奇怪，因为它不仅仅是一个无序列表，它是一个导航。

当然，这是一个很好的例子——对于许多 ARIA 角色，没有要匹配的 HTML 元素，因此您可能会选择选项 2，因为您正在使用来自 ARIA 的其他东西，并且想要明确。

就个人而言，我使用 2 是因为 GZIP 使文件大小无关紧要，并且它可以在我测试过的 AT 中工作（Voiceover 和 Windows 上的其他东西，我现在不记得了）。

于 2013-01-06T09:27:59.253 回答