11

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

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

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

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

4

2 回答 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 wiki 页面上阅读有关使用 labelledby 的更多信息。

于 2013-09-06T10:08:46.327 回答
3

我将通过赋予它们语义相关的 s 并在 HTML 代码中按重要性顺序排列它们来区分导航部分，id如下所示：

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

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

于 2011-05-19T16:54:58.393 回答