为什么使用列表作为导航菜单？

Question

我想知道为什么每个人在制作菜单时都使用无序列表？项目可以是具有inline-block显示属性的块（对于水平菜单）。菜单使用ul和标签有什么理由吗？li

Answer 1

如果你仔细想想，菜单本质上是一个链接列表。所以从某种程度上来说，这样做是有道理的。使用结构化和语义标签（例如ol或 ）的另一个好处ul是，屏幕阅读器比使用通用标签（例如div或）能更好地理解它span，后者仅定义页面的一部分，但不定义其含义。

然而，对于 html5，你可能会想这样做：

<nav>
  <a>Home</a>
  <a>Page 1</a>
  <a>Page 2</a>
  <a>Page 3</a>
</nav>

编辑：我在css-tricks.com发现了以下内容：

“反对”列表中的导航

• 至少有一个屏幕阅读器用户更喜欢没有列表的导航，这是原始文章的起源。
• 更简单的标记。nav > a > 比 nav > ul > li > a 更容易/更少。
• Div 和 Span 也一样好，尤其是对于 ARIA 角色

列表中的“For”导航

• 宣布列表中的项目数量可能会有所帮助
• 对非 CSS 浏览器中的结构的好处（Lynx 屏幕截图）
• 长期存在的模式尚未被广泛证明是一个大问题
• 列表是屏幕阅读器的“钩子”（例如按 L 键查看列表）并能很好地显示层次结构
• 安全：除了列表项之外，列表中不能包含任何内容，导航则不然

画

• 额外的标记对于样式设计很有帮助。我称其为平局，因为它是真实的，但具有影响力。我可以将页面上的每个 div 包装在另一个 div 中，这可能有一天会对样式有所帮助。
• 无论如何，您不能使用 role=navigation （“允许的角色值为目录、列表框、菜单、菜单栏、选项卡列表、工具栏、树和演示文稿。”）。我称其为平局，因为无论哪种情况，您都应该将导航包装在 .
• 屏幕阅读器的“冗长”是一种选择。列表更详细，但可以调整。
• VoiceOver 的处理方式完全相同
• 规范并不关心这两种情况。

_{请记住，以上仅是文章作者的观点。}