有一个关于HTML5中导航菜单的问题，具体涉及子导航（从语义角度来看）。
在页眉中，我使用<nav>标签表示主菜单。在标准页面的左侧，我放置了第二级导航，在右侧放置了第三级导航（不，我没设计这个网站）。在HTML5/ARIA方面，我是否可以做些什么来区分这三个菜单？或者它们都是简单的<nav>块？
我甚至认为左列和右列都不需要<aside>标签，因为除了这些实际菜单之外，没有任何其他信息。
如果您有任何想法或建议，将不胜感激。
2个回答
9
这可能是一个老问题，但现在有一个更好的答案：
您可以使用标题隐式标记每个导航部分，并明确使用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维基页面上阅读更多关于使用labelledby的信息。
- AlastairC
3
我会通过为导航部分提供语义相关的id并按照重要性在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>
除此之外，我认为没有必要对这些部分进行进一步区分。上述方法易于理解，应该相对容易进行样式设计，并且在语义上是清晰的，对我来说绝对足够好了。
- Pär Wieslander
2
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
<nav>元素仅适用于由主导航块组成的部分。对于页脚中的链接组，不需要使用<nav>元素。至于子导航是否应包含在<nav>元素内，目前似乎没有明确的规定。像提问者@Adi一样，我也无法决定我的DHTML内容选项卡是否应该放在<nav>元素内。 - ChaseMoskalnav元素，添加一个包含单词 'navigation' 的aria-label是多余的，因为nav元素会被宣布为 'navigation'，因此建议假定标签后面会跟着逗号和单词 'navigation'，因此仅使用 'main'、'sub' 等即可。 - Dave Everitt