列表的结构

Question

我试图在菜单下面构建，那些项目与相同的上下文有关，边框之间有什么构造菜单的正确方法？

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

OR

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

结束结果菜单：

Answer 1

我会选择这个。

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

我选择的理性是，如果菜单项属于同一类别，则更容易设置样式。例如，如果你想为整个ul添加一个边框，那么比试图将特定类添加到2 ul并且执行border-left，border-right等更容易。

Answer 2

由于你将其标记为辅助功能，我已经徘徊。如果这些项目都是相关的，并且您希望屏幕阅读器将它们作为同一组的一部分宣布，则第二个选项更好：

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

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

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

如果您仍想宣布屏幕阅读器用户的分隔符，您可以依赖于可视化隐藏的分隔符列表项中的内容，或者您​​可以添加aria-label，aria-labelledby或{ {1}}属性取决于您的情况（如果您告诉我，我可以指导您）。