2

我做了一些环顾四周，正在寻找在列表中插入分隔符的最语义化的方式，其中分隔符有意义。

项目列表是一个菜单，不足以分成两个单独的列表，但我想有一种方法来显示有一个额外的分组层。

<h1>Our menu:
<ul>
 <li> Duck ala orangé
 <li> Chicken ala Banana
 <li> Beef
 <!-- Some kind of separator here -->
 <li> Chocolate mousse
 <li> Wafer thin mints
</ul>

因为我希望它适用于屏幕阅读器，所以像在“牛肉”项目中添加一个纯 CSS 的解决方案border-bottom并不能真正起作用。我可以更改 HTML，但我宁愿没有最终将两个列表包装在另一个元素中的解决方案，但可以相信否则。

那么是否有一种很好的语义/WCAG 兼容方式来表示列表中的语义分隔符？

4

2 回答 2

2

您可以尝试使用子菜单：

<h1>Our menu:</h1>
<ul id="menu">
    <li><ul>
        <li> Duck ala orangé</li>
        <li> Chicken ala Banana</li>
        <li> Beef</li>
    </ul></li>
    <li><ul>
        <li> Chocolate mousse</li>
        <li> Wafer thin mints</li>
    </ul></li>
</ul>

风格与

#menu {
    list-style: none;
    padding-left: 0;
}
#menu > li:not(:first-child) { /* or #menu > li:nth-child(n+2) */
    border-top: 1px solid;
}

演示

于 2014-03-29T00:28:37.753 回答
0

Anul可能只包含li元素（和script/template元素，但它们与这个问题无关）。

使用附加li分隔符似乎不合适，因为分隔符几乎不是“列表项”。

如果一个列表可以分成几个组（或者，好吧，列表），我会使用几个ul元素，可选地使用标题。

<h1>Our menu</h1>

<h2>Meat</h2>
<ul>
  <li>Duck ala orangé</li>
  <li>Chicken ala Banana</li>
  <li>Beef</li>
</ul>

<h2>Dessert</h2>
<ul>
  <li>Chocolate mousse</li>
  <li>Wafer thin mints</li>
</ul>

由于标题，这允许用户代理（例如，具有大纲访问权限的屏幕阅读器）直接跳转到感兴趣的列表。
如果您不想提供明确的标题，您可以使用section以便仍然有大纲条目（但未标记）（和/或在视觉上隐藏标题）：

<h1>Our menu</h1>

<section>
  <ul>
    <li>Duck ala orangé</li>
    <li>Chicken ala Banana</li>
    <li>Beef</li>
  </ul>
</section>

<section>
  <ul>
    <li>Chocolate mousse</li>
    <li>Wafer thin mints</li>
  </ul>
</section>

当然可以只使用一个列表（如Oriol 建议的那样）：

<h1>Our menu</h1>

<ul>

  <li>
    <ul>
      <li>Duck ala orangé</li>
      <li>Chicken ala Banana</li>
      <li>Beef</li>
    </ul>
  </li>

  <li>
    <ul>
      <li>Chocolate mousse</li>
      <li>Wafer thin mints</li>
    </ul>
  </li>

</ul>

但就我个人而言，我认为拥有那些未标记的顶级li.

如果可以使用标题，则绝对应该使用显式section元素（否则标题范围包括下一个列表项的开头）：

<h1>Our menu</h1>

<ul>

  <li>
    <section>
      <h2>Meat</h2>
      <ul>
        <li>Duck ala orangé</li>
        <li>Chicken ala Banana</li>
        <li>Beef</li>
      </ul>
    </section>
  </li>

  <li>
    <section>
      <h2>Dessert</h2>
      <ul>
        <li>Chocolate mousse</li>
        <li>Wafer thin mints</li>
      </ul>
    </section>
  </li>

</ul>

但为什么？这为您提供了第一级的类别列表（而实际项目在第二级）。但这有用吗？可能取决于上下文，但通常我更喜欢使用标题/部分（对于每个类别）+单独的列表。

这可能主要是个人口味。

于 2014-03-29T06:03:57.553 回答