侧边栏中的语义HTML导航

我有一个侧边栏，其中包含应用程序的主导航。它还包含一个

按钮

，可触发侧边栏的打开/关闭。就语义而言，标记应该是什么样子

• 我应该把侧边栏放在一边，然后只在周围放一个导航吗 主导航，不包括打开/关闭触发器
• 或者将整个侧栏包装在

  nav

  中，包括打开/关闭触发器
• 或者将侧栏包装在

  部分

  ，其中包含

  导航

  ，不包括 打开/关闭触发器
• 或者没有任何

  部分

  或旁边的

  部分

  ，但只有

  导航

  ，不包括触发器，在这种情况下，我仍然遵循以下最佳实践。是否应将触发器视为内容？或者应该是网页大纲的一部分

[W3][1]建议：

最好的做法是将页面上的所有内容都包含在landmarks中， 因此，依赖屏幕阅读器的用户可以从该部分导航 不要丢失对内容的跟踪

目前的结构类似于此：

边栏

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

---

如果切换对屏幕阅读器没有任何好处，请考虑使用aria hidden=“true”隐藏屏幕阅读器的切换按钮。

确认！请不要那样做！切换应该适用于所有人，并且绝对应该在菜单上设置CSS

display:none

。如果有视力的用户想要折叠菜单以帮助减少视觉混乱，屏幕阅读器也应该能够折叠菜单以减少声音混乱。我大体上同意。我见过一些解决方案，其中切换的唯一目的是为查看底层内容提供更多的屏幕空间，并且故意让菜单始终“可见”，以便屏幕读者轻松导航到它作为地标。在这种情况下，切换按钮对屏幕阅读器用户没有任何改变。对于上面提出的解决方案（以及大多数其他解决方案），我个人更倾向于保留打开/关闭选项。让SR用户始终“可见”会使SR用户更难浏览隐藏的内容。

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