ARIA attributes do not match their roles on Canvas Toggle

[sguilliard]

Hi,

The following is always thrown up in the Lighthouse report:

What should the valid attributes be?

[marc_a]

Hi @sguilliard,

Thanks for reaching out!

I just check your account and you have so many websites associated with it. Would you mind sharing the site URL so that we can check what’s going on? To do that, please give us information in a Secure Note.

• Website URL

You can find the Secure Note button at the bottom of your posts.

Thank you.

[sguilliard]

Hi @marc_a

It does this on pretty much every site, but the one in this instance is in the private note …

[marc_a]

Hi @sguilliard,

I just check your website on Google Page speed and I don’t see any issue with ARIA.

Please let us know how we can replicate your issue so that we can check it on our end.

Thank you.

[sguilliard]

Just scroll down further to the ‘Accessibility’ section; it’s right there…

[friech]

Hi @sguilliard,

Have you resolved the issue? I don’t see that “ARIA attributes do not match their roles” on my test. On the secure note is the site’s Lighthouse Accessibility score on my end.

Please clarify.
Thanks,

[sguilliard]

Hi @friech,

A score of 93% on the Accessibilty is not what I get no matter how many times it’s run…

[tristup]

Hi @sguilliard,

It seems that the role attribute is missing where the ARIA attribute is used, and that might be the reason behind your issue. I would suggest you add the role attribute through the Toggle Custom Attribute and check if that resolved the issue.

I would also suggest you go through the following article on ARIA mismatch issues.

[aria-*] attributes do not match their roles

https://www.w3.org/TR/wai-aria-1.1/#role_definitions

Hope it helps.
Thanks

[sguilliard]

Hi @tristup,

That partially helps. I can add the role to the toggle/menu but the role of menu, also requires sub-items:

Adding role="menuitem" as a custom attribute to the menu, only adds it to the containing <ul>:

Additionally, because the containing <ul> is in the off canvas container, it’s not a ‘child’ of the item with the role of menu. Some of this maybe shortcomings of Lighthouse not recognising aria-controls="e149169-6-off-canvas"?

[sguilliard]

UPDATE: adding the role of “button” solves the problem.

[tristup]

Hi @sguilliard,

Glad that we are able to help you.

Thanks