为辅助技术在HTML中连接单独的列表

Question

在我的HTML中，我有一个描述列表，为了表示的目的，我不得不将它分开。

让我们假设以下HTML：

<div class="styling-1">
  <dl id="list-1">
    <dt>Item 1</dt>
    <dd>Description 1</dd>

    <dt>Item 2</dt>
    <dd>Description 2</dd>
  </dl>
</div>
<div class="styling-2">
  <dl id="list-2">
    <dt>Item 3</dt>
    <dd>Description 3</dd>

    <dt>Item 4</dt>
    <dd>Description 4</dd>
  </dl>
</div>

编辑：边注澄清:我不能使用CSS网格，列布局，.获取一个语义列表并调整其项的分布。这些列表需要在HTML中单独保存。

现在，macOS‘VoiceOver自然地将此声明为两个描述列表。这不是一个交易的破坏者，但由于它们是--语义上--一个单一的列表，最好是将它们作为一个整体来宣布。

因此，我的问题是:WAI ARIA(或任何其他声明性工具)是否提供了一种方法来告诉辅助技术list-2是list-1的延续。

Answer 1

现在，macOS‘VoiceOver自然地将此声明为两个描述列表。这不是一个交易的破坏者，但由于它们是--语义上--一个单一的列表，最好是将它们作为一个整体来宣布。

你以错误的方式对待这个问题。文档的显示不应指定其语义。

如果两个列表都在一个列表中，那么就这样做，并在屏幕上找到一种“分离”它们的方法。

根据MDN的说法，在<div>中包装<dt>, <dd>对是可以的

WHATWG HTML允许在元素中的元素中包装每个名称-值组。当使用微数据时，或者当全局属性应用于整个组时，或者用于样式设置时，这都是非常有用的。

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

因此，您应该能够“将”这一单列表分成两部分：

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div class="new-column">
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>