Accordion Group - List of Accordions?

[HerinHentry]

Regarding Accordion Group in https://designsystem.gov.au/components/accordion/

Hi, As you have given in the accordion group example - the visual information I am getting are 2 groups of accordions each with 2 accordions in each. If we use link list, this information is available to screen reader as well. But, in this case accordion group does not convey the same information.

Do you think there is a way to communicate the same information using aria role="group"?

<ul class="au-link-list">
  <li><a href="#">Options</a></li>
  <li><a href="#">Help</a></li>
  <li><a href="#">Sign Out</a></li>
</ul>

Reference https://www.w3.org/WAI/PF/aria/roles#group

[alex-page]

I'll have a look into this @HerinHentry sounds valid!

[alex-page]

For this issue we need to investigate if using role="group" makes the group of accordions easier to distinguish with a screen reader.

If it does we need to update the group documentation, if it doesn't we need to share our findings.

[sukhrajghuman]

Hey all 😃. I've done some testing. Adding a <div role="group"> outside the group of accordions doesn't affect the screen reader output. I've tested using VoiceOver+Safari and ChromeVox + Chrome

i.e.

<div role="group">
    <section>
        <!-- Accordion code -->
    </section>
    <section>
        <!-- Accordion code -->
    </section>
</div>

Another option is adding <div role="tablist"> as the parent, and moving the role="tab" from the <a> to the <section>.

Something like this:

<div role="tablist">
    <section role="tab">
        <!-- Accordion code -->        
    </section>
    <section role="tab">
        <!-- Accordion code -->        
    </section>
</div>

Using VoiceOver and Safari gets the screen reader output of:

"[Title of first accordion], Tab 1 of 2"

"[Title of second accordion], Tab 2 of 2";

Using ChromeVox on Chrome:

"Tablist, Tab 1 of 2, [Title of first accordion], internal link collapsed not selected"

"Tab 2 of 2, [Title of first accordion], internal link collapsed not selected"

Using Using NVDA on Edge

"[Title of first accordion], collapsed link tab"

"[Title of second accordion], collapsed link tab"

[alex-page]

Thanks @sukhrajghuman it makes sense to me that we should use an unordered list <ul> for the markup of the accordion group then. This will require some additional work to be done in the accordion group html and react.

We will share this back with the a11y experts as well and see their opinion before implementing this.

[sukhrajghuman]

Hi @HerinHentry we have changed our approach to use an unordered list <ul> for the markup of the accordion group. Please see the updated markup on the documentation website. Thank you for bringing this up 😄