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?
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.
<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>
<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.
<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.
<section> elements have been given the role=presentation to negate the implicit role semantics but not affect the contents.<div> elements have been given role=listitem.
Authors MUST ensure elements with
role=listitemare contained in, or owned by, an element with the role list or group.
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."
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments