Accessibility: Parent menu role not iidentified and not keyboard operable

Hey,

I would be happy to look into this. I’m testing on a mac with Voice Over and not seeing any issue. Would it be possible for you to make a little screen recording of what you are seeing so I can try and recreate.

Ben

Hello Ben, here is the video. I used JAWS screen reader, it is same behavior with NVDA.

https://www.dropbox.com/scl/fi/r07gctoend4mj92j8lpx2/Kadence-menu-problem.mp4?rlkey=tq64m616jrydx6joh7syqx595&dl=0

Hello @tarkham

I used Narrator for Windows and did not have a problem on my submenus. I made a video of my experience. In the video, there are two submenus: Levlel 1 and Page A. Level 1 reads as a link and appears as a link when I use the Insert + F7 command. However, I disabled the link for Page A and it doesn’t appear as a link, nor is read by the screen reader. I initially thought maybe the link was disabled through the menu builder and that is why it doesn’t show up as a link. However, Narrator avoids reading Page A and it isn’t listed as a link. Additionally, I tested my site with a screen reader extension for Chrome, which read everything correctly.

So, I tried reading your page with Narrator and the extension and had some interesting results. First, Narrator wouldn’t read your page at all for some reason. However, the chrome extension did and it read the resources page as a link.

Also, I notice you have a child theme on your site. Could you check if the problem happens when you use the parent theme instead? If so, what sort of changes did you make to the child theme?

https://share.getcloudapp.com/Wnu6OQbg

https://share.getcloudapp.com/6quJyjdn

Hello Ben,

I tested the menu on digiala11y.com on Windows with NVDA and also found some inconsistent behaviour of resources link, as Raghavendra has mentioned.

This may be because -for some HTML elements with particular roles cannot have focusable items as their descendants. So, screen readers are not behaving consistently when we use shift + tab because of a mismatch in expected parent-child types.

For instance, digitala11y.com menu, moving button element out of anchor element that is currently inside list item for resource (id=”menu-item-4265″) should solve the issue.

Sample code –

<a ><span class="nav-drop-title-wrap">Resources<span class="dropdown-nav-toggle">
<span class="kadence-svg-iconset svg-baseline"><svg aria-hidden="true" class="kadence-svg-icon kadence-arrow-down-svg" fill="currentColor" version="1.1" xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><title>Expand</title><path d="M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"></path>
</svg></span></span></span>
</a>
<button aria-label="Expand child menu of Resources" class="dropdown-nav-special-toggle" aria-expanded="false"></button>

Best regards,
Rashmi

• This reply was modified 1 year, 6 months ago by Rashmi Katakwar.

Hi, Rashmi.

Thanks for sharing additional information!

I’ll pass it on to our team so we can test/check further.

Regards,
Karla

Thanks for posting! The latest update 1.1.43 should resolve this for you.

Ben