foundation-sites: AccordionMenu not accessible via VoiceOver on iOS
How can we reproduce this bug?
- Create an Accordion Menu
What did you expect to happen? Menu is accessible via screen reader
What happened instead? VoiceOver on iOS only reads “menu item” for each element, and not the text of the link within the list item. The link is not accessible or clickable.
By using Foundation.Nest, role="menuitem" is added to all of the li elements within the accordion menu. menuitem requires that it is contained within an element with role group, menu, or menubar (reference) but AccordionMenu applies tablist.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 1
- Comments: 17 (6 by maintainers)
Commits related to this issue
- Merge pull request #9283 from zurb/sethkane-v6.3 Cleaned history version of #9033 for #8680 — committed to foundation/foundation-sites by kball 8 years ago
@Owlbertz @gapple There is a whole lot of ARIA going on in that component that might not be right. I will look into it deeper but I think we might want to rework it more more like this: https://www.w3.org/TR/wai-aria-practices/#accordion
If the intent of the clickable object is only to open and not go anywhere it shouldn’t be an AHREF
I would be happy to take a crack and make it more accessible across all platforms and screen readers.
After more review the accordion menu should follow this example: http://oaa-accessibility.org/example/41/ which I am going to start working on this week.
This is the issue that I was looking for, glad I’m not the only one. We run a government website and it is imperative that we have accessible menus.
Another accessibility issue on accordion menu that needs fixed:
http://foundation.zurb.com/sites/docs/accordion-menu.html Click on one of the demo menus and then tab to it. You can only tab between the menu items and it won’t let you tab out of it
From my understanding the issue is that this is an accordion, but also a menu (yes - really!). I feel like in this case it is more important to reflect the functionality of an accordion in the markup, because it is crucial to know what items are expanded. That means I would remove the
role="menuitem". And because the actual trigger for the tabs are theas rather than thelis, I guess the wholearia-controlsand so on should be moved to thea?@gapple what do you think? Maybe @sethkane can also give his opinion?