How to indicate two html sections are continuation of each other

Question

Are there any attributes or is there a way to indicate that two sections are a continuation of each other. Example below:

<section id="section-top">
    <div>Item 1 </div>
    <div>Item 2 </div>
</section>
<section id="section-bottom">
    <div>Item 3 </div>
    <div>Item 4 </div>
</section>

I need to keep things in separate sections because section-bottom is hidden until an expanding button is pressed. So when it displays, i need to indicate that its a part of the first list so that narrator reads 3/4 when you arrow down into item three instead of 1/2 because its in a separate section.

Is this possible?

Answer 1

The structure of your example HTML is not semantically correct, that said you can use aria roles and attributes to expose the intended meaning to screen-readers.

---

Markup

<section aria-label="Group of things">
  <div role="list">
    <section role="none presentation" id="section-top"> 
      <div role="listitem">
        <p>Thing 1</p>
      </div>
      <div role="listitem">
        <p>Thing 2</p>
      </div>
    </section> 
    <section role="none presentation" id="section-bottom"> 
      <div role="listitem" hidden>
        <p>Thing 3</p>
      </div>
      <div role="listitem" hidden>
        <p>Thing 4</p>
      </div>
    </section> 
  </div>
</section>

Explanation

• Wrap your original <section> elements in a <div> with role=list.

  Lists contain children whose role is listitem, or elements whose role is group which in turn contains children whose role is listitem.

• Wrap the <div> with role=list inside another <section> element, and use the aria-label attribute to transform it into a region, and give it an accessible name.

  <section>, region when it has an accessible name using aria-labelledby, aria-label or title attribute.

• Your original <section> elements have been given the role=presentation to negate the implicit role semantics but not affect the contents.
• Your original <div> elements have been given role=listitem.

  Authors MUST ensure elements with role=listitem are contained in, or owned by, an element with the role list or group.

• Your initially hidden other elements have been given the hidden attribute, and you will need to follow up yourself with the useful answer from codeMonkey on how you show/hide these.

  "…because section-bottom is hidden until an expanding button is pressed."

Answer 2

Plain HTML doesn’t offer a way to convey that one element is the continuation of another element.

I would argue that you should use only one section element, and as many div elements as needed for grouping the content inside that section.

<section>
  <div class="section-top">
    <p>Item 1</p>
    <p>Item 2</p>
  </div>
  <div class="section-bottom" hidden>
    <p>Item 3</p>
    <p>Item 4</p>
  </div>
</section>

As the div element isn’t a sectioning element, it doesn’t separate your content; all of it is part of the same section.