Accordion Accessibility Issue

[skytonnessen]

What is missing?

What is missing:
The Foundation Accordion is getting flagged by our Accessibility Assessment scan. Finding is: "The trigger elements for the disclosure widgets (show/hide) are elements with a role="tab" attribute. The tab role is not appropriate for show/hide, especially in combination with the aria-expanded attribute. The trigger should either be a button, or have a role="button" attribute."

What is wrong now ?

Currently, I can override with $('a.accordion-title').attr("role", "button"); in my JS and it seems to work, but this is not ideal.
...

Possible Solution

Solution*
Change the markup to use a <button role='tab'> rather than using an <a> to trigger an accordion so that the accordion is truly in compliance with Accessibility standards, or change the .accordion-title from role=tab to role=button.
...

Context

...

Your Environment

• Foundation version(s) used:
• Browser(s) name and version(s):
• Device, Operating System and version:

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.

[DanielRuf]

Hi @skytonnessen,

Thanks for reporting this.

I guess switching to <button> would be a breaking change (styles, markup and JS).

Changing the role would be sufficient or is that not ok?

For reference: https://www.w3.org/TR/wai-aria-practices-1.1/examples/accordion/accordion.html

[skytonnessen]

I assume so. The Accessibility Scan Company listed an "either or" solution (either role="button" or changing the to a ).

I've only moderately tested the override--I am not sure if it breaks the responsive accordion.

[DanielRuf]

Do you want to provide a PR for the <a> option? That would be great and very helpful.

[skytonnessen]

Sure, I'll give it a go later this afternoon.

[fernakr]

Any updates on this? I tested versions of accordion and tabs where the <a> are replaced with <button> with minimal modification to the code and functionality seems to still be working. Some minor styling issues but seems like it would just be a selector change to fix.

[utsw-philp]

According to SiteImprove, the issue seems to be associated with the role="tab" not being a direct child within role="tablist".

<ul role="tablist">
...
<li role="tab">...</li>
...
</ul>

[angelicochris]

According to SiteImprove, the issue seems to be associated with the role="tab" not being a direct child within role="tablist".

<ul role="tablist">
...
<li role="tab">...</li>
...
</ul>

Yea we are having this issue as well, but on tabs not accordions. Anyone know if the element with the tab role not being the direct child is an accessibility violation/issue?

[zoltan-dulac]

This has been a problem for three years -- and as someone who is working on a project using Foundation for such a long time, it is quite disappointing there has been no traction here.

Please consider making this a priority. Anyone who uses a screen reader would be very confused. I would recommend using the ARIA version of the drawer that is outlined on this page as a modal to fix:

https://www.useragentman.com/enable/dropdown.php

(You could also use the HTML5 version, which requires no JavaScript at all)

Roles of tablist/tab/tabpanel are only used for a tab component, which is a totally different animal. An example of this is here:

https://www.useragentman.com/enable/tabs.php

[florianschieder]

+1