Aria Set-up for Mobile Hamburger Menu

[ablesonh]

Hey there

I have a hamburger menu set-up for smaller screens using the Navigation Modal. I’m checking accessibility in Lighthouse and I keep getting errors for “[aria-*] attributes do not match their roles”. For the regular menu bar I was able to use, Role = Navigation & Aria-label = Navigation, but I know the modal presents a different set of challenges.

I’ve tried a few tutorials on how to fix this, using different aria options, such as below. But I keep coming up with that error. Any help you can provide would be much appreciated.

[tristup]

Hi @ablesonh,

Thanks for reaching out.
I would suggest you go through the following thread on a similar topic, which may help you.

ARIA-label

Hi @Kobber, I would suggest you can add the Role in the Name field and navigation in the Value field. And also add the aria-label with the value mentioned in the article and check if that resolves your problem. [Screenshot 2021-12-22 152831] Hope it helps. Thanks

Thanks

[ablesonh]

Hi

I did that and I got a positive result on Lighthouse, which is great, but is that actually accessible? Every article I’ve read says that you have to use aria-haspopup and aria-expanded to show that it is pop-up and has to expand to show the menu. And also put some coding on it to change states from aria-expanded=false to true when the menu is open.

I just want to make sure the website I’m working on is actually accessible and not just enough to pass a test.

[tristup]

Hi @ablesonh,

Glad that you are getting a positive result on this. And questions on the Accessibility is beyond the scope of Theme Support, I would suggest you avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[JvP]

Why is this outside the scope of support? Accessibility is important and all builder elements should be built to be as accessible as possible. It should be considered a feature of the theme.

[tristup]

Hi @JvP,

The Accessibility, is important and the theme is maintaining accessibility standards and the attribute aria-expanded, aria-haspopup, and other required accessibility attributes are already implemented into the said element.

Thanks

[ablesonh]

Why not say that part to begin with? That the accessibility requirement is already implemented in the element, so there’s nothing more needed to be done. That answered my question.

[ruenel]

Hey @ablesonh,

Sorry for the confusion. Please feel free to create another thread if you need any further information.

Cheers.

[ablesonh]

Okay there’s another issue. When I shrink my browser size so that the hamburger menu replaces the menu bar and I run Lighthouse for Accessibility on desktop it says I have 100%. That’s with the suggested Role - Nav, Aria-Label - Nav setup. When I run it again for mobile, it gives me a score of 92%, saying that:

[aria-*] attributes do not match their roles

Each ARIA role supports a specific subset of aria-* attributes. Mismatching these invalidates the aria-* attributes. Learn more.

Any suggestions to fix this issue?

[christian]

Hey @ablesonh,

We need more contenxt to answer your question. Please tell us what element is producing the error and provide the URL where we can see the element.

Thanks.

[ablesonh]

The element is a navigation modal (hamburger menu) that displays on screen sizes 1200 px and lower. I’m including a secure note with the website link.

[christian]

Hey @ablesonh,

I scanned the page using Lighthouse and no element in the page was flagged as not matching except a browser extension of mine that is not related to Pro.

If you’re sure it’s coming from Pro, please show us a screenshot like that so we could see the actual element causing the message.

Thanks.