search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.66k stars 5.48k forks source link

Accordion Accessibility Issue #11980

Open skytonnessen opened 4 years ago

skytonnessen commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

DanielRuf commented 4 years ago

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

skytonnessen commented 4 years ago

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

fernakr commented 3 years ago

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 commented 3 years ago

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 commented 1 year ago

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 commented 1 year ago

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