title: Connect separate lists in HTML for assistive technology
body: <p>In my HTML, I have a description list which I had to split up for presentational purposes.</p>
  
  <p>Let's assume the following HTML:</p>
  
  <pre><code>&lt;div class="styling-1"&gt;
    &lt;dl id="list-1"&gt;
      &lt;dt&gt;Item 1&lt;/dt&gt;
      &lt;dd&gt;Description 1&lt;/dd&gt;
  
      &lt;dt&gt;Item 2&lt;/dt&gt;
      &lt;dd&gt;Description 2&lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/div&gt;
  &lt;div class="styling-2"&gt;
    &lt;dl id="list-2"&gt;
      &lt;dt&gt;Item 3&lt;/dt&gt;
      &lt;dd&gt;Description 3&lt;/dd&gt;
  
      &lt;dt&gt;Item 4&lt;/dt&gt;
      &lt;dd&gt;Description 4&lt;/dd&gt;
    &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>EDIT:</strong> 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 <em>in HTML</em>.</p>
  </blockquote>
  
  <p>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.</p>
  
  <p>Hence my question: Does WAI-ARIA (or any other declarative tool) offer a way to tell assistive technology that <code>list-2</code> is a continuation of <code>list-1</code>?</p>