Blocs Menu Manger Dropdown nav accessibilty issue generating role='menu'

I Need Help
1

Hi @Norm I’m doing a WAVE accessibility report audit on a site I’m working on and the Blocs Nav that I’m using is flagging an error ‘Broken ARIA menu An ARIA menu does not contain required menu items.’

The code it is focussing on is: <ul class="dropdown-menu" role="menu"> generated by Blocs nav feature and structure when adding a dropdown menu in Menu Manager.

It is saying that it should just be this: <ul class="dropdown-menu"> as role=‘menu’ is for application menus and not web navigation menus and screen readers expect role menu to be interacted with in the same way software menus are with arrow keys etc.

It suggests if I remove the code role=‘menu’ then the audit is happy. I can’t seem to find anyway to do that other than possibly adding manual script such as:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Select all dropdown-menu elements with role="menu" and remove the role
    document.querySelectorAll('ul.dropdown-menu[role="menu"]').forEach(function(menu) {
      menu.removeAttribute('role');
    });
  });
</script>

Adding that script would seem a bit clunky way to do it. Does all of this make sense relevant to yourself?

Is there better way for me to remove role=“menu” in Blocs or is it something that would need to be updated in the Menu Manager?

Thanks

Ben

2

I’ll take a look at this. It looks like it used for some Wordpress menu stuff so I will have to do some testing before its removed.

1 Like
3

Thanks @Norm I’ve used that script for the time being and it has got rid of it, but with websites getting more audited it would be handy if it is possible.