[Support request] Off-canvas panel menu accessibility query

[Nick]

Hey, I’m a recent convert over from Genesis and custom building everything, so forgive my ignorance.

I have been testing the off-canvas panel for use as a mobile menu, and have published a two-level (parent>child) menu into it from the menu manager. It works as expected on touch. When I tab through it using the keyboard however, only the top level menus are reachable, not their children. I would usually expect either the toggle to be tabbable or the menus to be traversable in sequence on tab.

If I’ve understood how this is working correctly, it would indicate an accessibility issue for users of mobile assistive technology.

My client on this project is a screenreader user himself, so I can ask him to test it, but I’d like to understand the implementation better myself first! Any thoughts/guidance?

Thank you 🙂

[David]

Hi there,

correct there are a couple of ‘bugs’ regarding accessibilty with the Off Canavs.
The issue you have sounds the same as this user:

https://generatepress.com/forums/topic/keyboard-tab-order-mobile-menu-on-desktop/#post-2270964

The CSS they provided will take it out of Tab Flow on desktop screens.

All the related issues have been patched for GP Premium 2.2 – which will be release very soon.

[Nick]

Thanks David,

I’m not sure it is quite the same issue actually… I hadn’t spotted this one! My issue is that a user cannot traverse the full menu hierarchy using the tab key, or a voice command – it will only allow access to the top-level items.

If you take this site for example, https://hernehillschool.co.uk/, the user can tab the whole mobile menu, including opening the sub menus. I think the default behaviour in Kadence is similar (if their own site is using the standard functionality). I can do a screen recording if it’s helpful?

[David]

Ok, can i see the site you’re having the issue on ?

[Nick]

It’s just a wireframe at the moment, but I have added the url to the private info field. See if you can access a submenu using only the keyboard…

[Tom]

Hi there,

Thanks for reporting this! Definitely a bug.

We’ll have it fixed in GPP 2.2.0.

For now, you can always set up your Off-Canvas Panel menu with no sub-menus as you can create a separate menu for it.

Thanks again!

[Nick]

Thanks @tom for the speedy response! When is 2.2.0 due to ship, roughly?

Are you able to share what a11y testing has been done on the theme and block components? It would be really helpful to understand more when speaking to clients about it. I have one live project for which the project manager is a non-sighted screenreader user, and another at proposal stage for a site aimed at providing medical information to a user-base whom many are assistive technology users. I was confident knowing the ins and outs of Genesis blended with my ACF-driven templates, less so with GP+GB!

Thanks again,
Nick

[Tom]

Hey Nick,

We’ve had a couple of internal a11y reviews by third-party specialists, but it’s hard to catch everything when there are so many combinations of options. We always put priority on a11y issues to make sure things are as accessible as possible. It’s close to time for another review.

2.2.0 is planned for early fall (September, early October).

[Nick]

Hi Tom, fair enough. Thanks for responding so positively. It’s one of those things that is never ‘done’ isn’t it. As soon as you touch the markup there’s the potential to bork something that’s not at all obvious!

[Tom]

It’s definitely a tough one to get to 100%! 🙂

[Nick]

Hey Tom, just wondered if you have a release date for this fix yet? I’m about to launch a site for a client who himself is a screenreader user, so it would be nice to use the off-canvas if possible.

[Ying]

Hi Nick,

The date is not fixed yet but should be in Oct.

[Author]

Posts