HTML5 子导航语义
Posted
技术标签:
【中文标题】HTML5 子导航语义【英文标题】：HTML5 sub nav semantics 【发布时间】：2011-08-29 01:05:30 【问题描述】：一个简单的问题：html5 导航，特别是子导航（从语义的角度）。
我在主菜单的标题中有<nav>。在标准页面的左侧，我有二级导航，右侧有三级导航（不，我没有设计网站）。有什么我可以明智地做 HTML5/ARIA 来区分这 3 个菜单吗？还是它们都是简单的<nav> 块？
我什至认为我不需要在左列或右列中添加<aside>，因为除了这些实际菜单之外没有任何其他信息。
任何想法/建议将不胜感激。
【问题讨论】：
【参考方案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 元素将被宣布为“导航”，因此建议假设标签后面会跟一个逗号和“导航”一词，因此“主”、“子”等就足够了。以上是关于HTML5 子导航语义的主要内容，如果未能解决你的问题，请参考以下文章