Axe devtools throwing unnecessary violations

Question

So I have this navigation bar with the following structure:

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.

Please provide enough code so others can better understand or reproduce the problem. — Community
– Community Bot, Commented Nov 23, 2023 at 20:29

Steven Lambert · Accepted Answer · 2023-11-28 15:36:45Z

0

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).

answered Nov 28, 2023 at 15:36

Steven Lambert

5,9612 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Axe devtools throwing unnecessary violations

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related