HTML5 子导航语义答案

【问题标题】：HTML5 sub nav semanticsHTML5 子导航语义
【发布时间】：2011-08-29 01:05:30
【问题描述】：

一个简单的问题：HTML5 导航，特别是子导航（从语义的角度）。

我在主菜单的标题中有<nav>。在标准页面的左侧，我有二级导航，右侧有三级导航（不，我没有设计网站）。有什么我可以明智地做 HTML5/ARIA 来区分这 3 个菜单吗？还是它们都是简单的<nav> 块？

我什至认为我不需要在左列或右列中添加<aside>，因为除了这些实际菜单之外没有任何其他信息。

任何想法/建议将不胜感激。

【问题讨论】：

标签： html nav

【解决方案1】：

这可能是一个老问题，但现在有一个更好的答案：

您可以使用标题隐式标记每个导航部分，并显式使用 WAI-ARIA 属性：

<nav role="navigation" aria-labelledby="firstLabel">
  <h2 span id="firstLabel" class="hidden">Main menu</h2>
  <ul/>
</nav>
...
<nav role="navigation" aria-labelledby="secondLabel">
  <h2 span id="secondLabel" class="hidden">Local pages</h2>
  <ul/>
</nav>

对于屏幕阅读器等用户代理，他们可以将其报告为“本地页面，导航”（尽管报告方式有所不同）。

在W3C wiki page on using labelledby 上阅读更多信息。

【讨论】：

【解决方案2】：

我会区分导航部分，方法是为它们提供语义相关的ids，并按照 HTML 代码中的重要性顺序排列它们，如下所示：

<body>
  <nav id="main-navigation">
    <!-- The main menu goes here -->
  </nav>
  <nav id="sub-navigation">
    <!-- The left hand menu goes here -->
  </nav>
  <nav id="leaf-navigation">
    <!-- The right hand third level menu goes here -->
  </nav>

  <section id="content">
    <!-- Actual page content -->
  </section>
</body>

除此之外，我认为没有真正需要进一步区分这些部分。上面的方法很容易理解，样式应该相当容易并且语义清晰，这对我来说当然已经足够了。

【讨论】：

W3 HTML5 spec 澄清："The nav element is appropriate only for sections that consist of major navigation blocks." 继续说，对于页脚中的一组链接，导航元素是多余的。 在我看来，子导航完全有待商榷。我的情况与@Adi 类似，提问者：我无法决定我的 DHTML 内容选项卡是否应该在其中
与否。
对于nav 元素，添加包含单词“导航”的aria-label 是多余的，因为nav 元素将被宣布为“导航”，因此建议假设标签后面会跟一个逗号和“导航”一词，因此“主”、“子”等就足够了。