一个快速问题:HTML5导航,特别是子导航(从语义的角度来看).
我<nav>在主菜单的标题中.在标准页面的左侧,我有第二级导航和右侧第三级导航(不,我没有设计网站).有什么我可以做HTML5/ARIA明智区分3个菜单吗？或者它们都是简单的<nav>块？
我甚至不认为我需要<aside>左侧或右侧列,因为除了这些实际菜单之外没有任何其他信息.
任何想法/建议将不胜感激.
这可能是一个老问题,但现在有一个更好的答案:
您可以使用标题隐式标记每个导航部分,并显式使用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>
对于像屏幕阅读器这样的用户代理,他们可以将其报告为"本地页面,导航"(尽管它们的报告方式各不相同).
有关使用labelledby的W3C wiki页面的更多信息,请阅读.
我将通过赋予导航部分语义相关性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>
除此之外，我认为没有必要进一步区分这些部分。上面的方法很容易理解，应该相当容易设计样式并且语义清晰，这对我来说当然足够好了。