Question

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

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

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

非常感谢任何想法/建议。

Answer 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。

Answer 2

我会通过给出语义相关的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>

除此之外，我认为没有必要进一步区分各部分。上面的方法很容易理解，应该相当容易风格，并且语义清晰，这对我来说当然足够好。

HTML5子导航语义

2 个答案: