列表的结构答案

【问题标题】：Structure for a list列表的结构
【发布时间】：2016-05-12 04:17:16
【问题描述】：

我试图在菜单下方构建，这些项目与相同的上下文相关，并且在它们之间有一个边框，构建菜单的正确方法是什么？

<ul>
     <li> ... </li>
     <li> ... </li>
</ul>
<ul>
     <li> ... </li>
     <li> ... </li>
</ul>

或

<ul>
     <li> ... </li>
     <li class='separator'> ... </li>
     <li> ... </li>
     <li> ... </li>
 </ul>

最终结果菜单：

【问题讨论】：

分隔符的意义何在？只是装饰，还是传达了某些东西（例如，它是否以某种方式对链接进行分组）？
请不要通过破坏您的帖子为他人增加工作量。通过在 Stack Exchange 网络上发帖，您已在 CC BY-SA 4.0 license 下授予 Stack Exchange 分发该内容的不可撤销的权利（即无论您未来的选择如何）。根据 Stack Exchange 政策，帖子的非破坏版本是分发的版本。因此，任何破坏行为都将被撤销。如果您想了解更多关于删除帖子的信息，请参阅：How does deleting work?

【解决方案1】：

我会选这个。

<ul>
     <li> ... </li>
     <li class='separator'> ... </li>
     <li> ... </li>
     <li> ... </li>
  </ul>

我选择的理由是，如果菜单项属于同一类别，则更容易设置它们的样式。例如，如果你想为整个 ul 添加一个边框，这比尝试将特定类添加到 2 个 ul 并执行左边框、右边框等操作要容易。

【讨论】：

【解决方案2】：

由于您将其标记为可访问性，因此我一直在徘徊。如果这些项目都是相关的，并且您希望屏幕阅读器将它们作为同一集合的一部分宣布，则第二个选项更好：

<ul>
     <li> ... </li>
     <li class='separator'> ... </li>
     <li> ... </li>
     <li> ... </li>
 </ul>

但是，屏幕阅读器用户会听到高于实际菜单项数的计数（假设它没有内容）。如果分隔符严格是可视的，则考虑将其隐藏在辅助技术中，可能在<li> 上使用aria-hidden。

这假设您的<li class='separator'> ... </li> 没有有意义的菜单内容。如果它确实有内容，那么您的第二个选项会更好，因为现在您可以设置它的样式以显示一个根本不会对屏幕阅读器用户说的可见分隔符（如边框）。

如果您仍想向屏幕阅读器用户宣布分隔符，您可以依靠您在视觉上隐藏的分隔符列表项中的内容，或者您可以添加 aria-label、aria-labelledby 或 aria-describedby 属性，具体取决于关于你的情况（如果你告诉我，我可以指导你）。

【讨论】：