Search code examples
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

    • 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."