在列表中添加分隔符的正确方法

Question

我要在无序列表中添加一个主题中断，我想知道这样做的正确方法是什么，可以使列表可访问且语义正确。

我想做的事情看起来像这样：

<ul>
  <li>These</li>
  <li>Items</li>
  <li>Are of</li>
  <li>One kind</li>

  <hr />

  <li>But these</li>
  <li>Are of</li>
  <li>Another kind</li>
</ul>

然而，<hr> 元素不允许作为 <ul> 的子元素，即使它作为列表项中的主题中断在语义上是正确的。

另一种选择是将 <hr> 包含在无关的 <li>:

中

<li><hr /></li>

然而，关于列表项的数量，这将是谎言。在上面的示例中我只有 7 个项目，但这会宣布 8 个。

我的第三个选择是将 <li> 的角色更改为 separator:

<li role="separator"></li>

这在语义上都是正确的 allowed in the spec，但我想知道这是否可以访问。 IE。辅助技术会宣布列表中项目的正确数量和传达列表项目之间的主题中断。

Answer 1

就我个人而言，我会把它分成 2 个列表，也许还有一个周围的列表以保持它们在语义上的相关性。

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

在列表中添加分隔符的正确方法

The correct way to add separators in lists

html

accessibility