Axe devtools throwing unnecessary violations

Question

So I have this navigation bar with the following structure:

click for code snippet

I am following the same structure that is present in https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/ (standard for accessibility)

However when I run Axe devtools it throws the following errors:

• Certain Aria roles must contain particular children

  • Ensures elements with an ARIA role that require child roles contain them
  • To solve this problem, you need to fix at least (1) of the following: - Element has children which are not allowed: [role=none] - Element uses aria-busy="true" while showing a loader

• Certain aria roles must be contained by particular parents (showing the error for span element)

  • Ensures elements with an ARIA role that require parent roles are contained by them
    • Required ARIA parents role not present: menu, menubar, group

When I run axe devtools in w3.org site it throws no such error. I am not able to understand where I am going wrong. I am following the same semantic structure as mentioned in the site. The only difference I can see that I have a span element. Is that's what's causing the issue? And why is role none not allowed when its the same in w3.org site. I am not able to find much info in this topic. Any inputs will be highly appreciated.

Answer 1

The reason axe-core is throwing the error is due presentational role conflict. Essentially any element that has a global ARIA attribute or is focusable must be made available to assistive technologies. Since role=presentation and role=none would remove the element from assistive technologies, they instead completely ignore the role and use the element's implicit role as if the role attribute wasn't there.

Because of this, the last li in your list which has the aria-labelledby attribute (which is a global ARIA attribute) is not presentational, so the menu contains a child that it doesn't support (listitem), and the menuitem of the li has a parent it doesn't allow (listitem again).