Can a visually hierarchical menu be accessible when markup is not? - drop-down-menu

Question

We're trying to build a very particular interaction/animation with a mega menu that is leading us to a solution where we need to pull the top level items out of the hierarchy.
So, for example, the ideal markup is often something like this:
<ul>
<li>Fruit
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Radish</li>
<li>Potato</li>
</ul>
</li>
<li>Meat
<ul>
<li>Chicken</li>
<li>Beef</li>
</ul>
</li>
</ul>
It's hierarchical and fairly easy to navigate via keyboard as well as voice feedback.
For the interaction we're hoping to create, we really need something like this where the two levels are entirely separated:
<ul>
<li>Fruit</li>
<li>Vegetables</li>
<li>Meat</li>
</ul>
<div>
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<ul>
<li>Radish</li>
<li>Potato</li>
</ul>
<ul>
<li>Chicken</li>
<li>Beef</li>
</ul>
</div>
Can this still be made as accessible as the former? If so, what needs to be done to ensure good keyboard navigation as well as screen reader compatibility?

Answer 1

You will need to mark this up as an ARIA menu. The correct markup would be the following:
<ul role="menubar">
<li role="menuitem" aria-haspopup="true" aria-owns="fruitmenu" tabindex="0">Fruit</li>
<li role="menuitem" aria-haspopup="true" aria-owns="vegmenu" tabindex="-1">Vegetables</li>
<li role="menuitem" aria-haspopup="true" aria-owns="meatmenu" tabindex="-1">Meat</li>
</ul>
<div>
<ul role="menu" id="fruitmenu" aria-expanded="true" >
<li role="menuitem" tabindex="-1">Apple</li>
<li role="menuitem" tabindex="-1">Banana</li>
</ul>
<ul role="menu" id="vegmenu" aria-expanded="false" >
<li role="menuitem" tabindex="-1">Radish</li>
<li role="menuitem" tabindex="-1">Potato</li>
</ul>
<ul role="menu" id="meatmenu" aria-expanded="false" >
<li role="menuitem" tabindex="-1">Chicken</li>
<li role="menuitem" tabindex="-1">Beef</li>
</ul>
</div>
Then you need to use JavaScript to implement the controls to manage the expand/collapse of the menus and manipulate the tabindex attribute for focus management (plus move the focus around) and aria-expanded (although depending on the JavaScript keyboard handling this might be superfluous.
Here is an example of an accessible ARIA menu implementation in Polymer although because of the issues with the namespacing in Polymer's shadow DOM emulation, the IDs are not unique as they should be.
A jQuery ARIA menu library
Native Web Components, Polymer and Angular2 ARIA menu implementations