htmlwai-arianarrator

How to indicate two html sections are continuation of each other


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?


Solution

  • 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