连接 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>

EDIT: Side note for clarification: I cannot use a CSS grid, column layout, ... to take one semantic list and adjust the distribution of its items. The lists are required to be kept separate in HTML.

现在 macOS 的 VoiceOver 自然会将其宣布为两个描述列表。这不会破坏交易，但由于它们在语义上是一个列表，因此最好将它们作为一个列表宣布。

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

Answer 1

Now macOS' VoiceOver naturally announces this as two description lists. This is not a deal breaker, but since they are — semantically — a single list, it would be better to have them announced as one.

恕我直言，您正在以错误的方式解决问题。文档的显示不应决定其语义。

如果两个列表都应该在一个列表中，那么就这样做并找到一种方法 "separate" 它们在屏幕上。

根据MDN，可以将<dt>, <dd>对包裹在<div>中：

WHATWG HTML allows wrapping each name-value group in a element in a element. This can be useful when using microdata, or when global attributes apply to a whole group, or for styling purposes.

<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>

因此您应该能够"break"将这个列表一分为二：

<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>

连接 HTML 中的单独列表以获得辅助技术

Connect separate lists in HTML for assistive technology

html

accessibility

wai-aria

screen-readers