Submenu not keyboard accessible when Screen Reader is running
<a class="menu-toggle" href="#" role="link" aria-label="Toggle submenu Mieten" tabindex="0"></a>
Works in Safari (Mac), Firefox (Win) and Chrome (Win). But if NVDA (Screen Reader, Windows) is running, it is impossible to open the submenu with the keyboard. Not in Chrome and not in Firefox. So blind users are blocked here and keyboard support first of all should support the two main screen readers (JAWS and NVDA). This is a major accessibility issue.
JS will not receive the event for this event listener if NVDA runs in browse mode (in your accessibility.js):
document.addEventListener('keydown', function(e) {
What was missing was role="menuitem" on the a-links in the submenu:
<a class="menu-toggle" href="#" role="menuitem" aria-label="Toggle submenu Mieten" tabindex="0"></a>
If you add role="menu item" the submenu is keyboard accessible when NVDA is running. You also have to add role="menu" to the parent element (it works without but you html is not valid).
That should be a quick and important fix for you.
Also it is not a good way to separate the menu item into two linked elements. One for the main menu and one to toggle the submenu:
<ul id="menu-hauptmenue" class="menu menu-main"><li id="menu-item-12395" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-12395 submenu"><a href="https://www.mydomain.de/mieten/" tabindex="0"><span>Mieten</span></a>
<ul class="sub-menu" aria-expanded="false" style="display: none;">
<li id="menu-item-21779" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21779"><a href="/somwhere/wohnen/" tabindex="0"><span>Mietwohnungen</span></a></li>
...
</ul>
<a class="menu-toggle" href="#" role="link" aria-label="Toggle submenu Mieten" tabindex="0"></a></li>
...
</ul>
Comments
Hi,
I have passed it on to the dev team, and we will correct that in the upcoming updates.
Thanks