html - 语义 HTML - 边栏导航

Question

我有一个侧边栏，其中包含应用程序的主导航。它还包含一个 button 触发侧边栏的打开/关闭。在语义方面，标记应该是什么样的？

• 我应该把侧边栏放在一边，然后只在周围设置导航吗主导航，不包括打开/关闭触发器。
• 或者将整个侧边栏包裹在 nav 中，包括打开/关闭触发器
• 或者将侧边栏包裹在 section 中，其中包含一个 nav，不包括打开/关闭触发器？
• 或者没有任何 section 或 aside，但只有一个 nav 不包括触发器，在这种情况下我是否仍然遵循以下内容最佳实践。触发器是否应该被视为内容？或者应该是网页大纲的一部分？

[W3][1] 建议:

It is a best practice to include ALL content on the page in landmarks, so that screen reader users who rely on them to navigate from section to section do not lose track of content.

当前的结构类似于:

侧边栏

• 主导航
  • 导航项目 1
  • 导航项目 2
• 触发打开/关闭侧边栏

Answer 1

<aside>元素用于与页面主要内容相关的内容，通常在视觉上表示为侧边栏。使用它进行导航不会让屏幕阅读器完全混淆，但在这种情况下，您必须添加一个 role。 complementary或 region

我希望这个 <aside>将至少几个不同的 <nav> 分组元素，因此对于您拥有单个菜单的用例，我肯定会选择将侧边栏菜单区域设置为 <nav>。 .记得给个好评aria-label顺便一提。类似于 aria-label=“Primary”足以满足您的主要导航需求。

考虑使用 aria-hidden=“true” 隐藏屏幕阅读器的切换按钮，如果切换对它们没有任何好处。在这种情况下 <nav>绝不能用 display: none 隐藏因为它会使它对屏幕阅读器不可见且不可切换。

<nav aria-label="Primary”>
 <button aria-hidden="true">Toggle menu</button>
 <ul>
  <li>
   <a href="#">Link 1</a>
  </li>
  <li>
   <a href="#">Link 2</a>
  </li>
 </ul>
</nav>