[Resolved] Keyboard tab order mobile menu on desktop.

[Laura]

Hi,

We’re currently using the off-canvas menu for a mobile-only navigation, but it’s causing some issues with our cookies banner and keyboard accessibility.

The cookie banner is an overlay that appears at the bottom of the page, and *should* be the last thing you can tab to… but the off canvas menu is making it look like it’s not working properly. You must run through the entire menu (which is invisible on desktop) to interact with the Cookie settings.

Is there any way to hide the mobile menu from tabbing on the Desktop, or move it in the page structure so it’s the very last thing?

Many thanks
Laura

[Ying]

Hi Laura,

Is there any way to hide the mobile menu from tabbing on the Desktop

I’m unsure what this means, as the off-canvas menu only shows on mobile, do you mean to hide it on mobile until the users interact with the cookie setting?

If so, I don’t think there’s an easy solution, custom JavaScript will be required.

Let me know if that’s not what you mean.

[Laura]

Hi Ying,

Sorry – this is WCAG 2.1AA accessibility, specifically keyboard navigation. (Tabbing through the site to get to the links you want).

The Off-Canvas mobile menu is still appearing in the page, so you have to tab through it to get to our cookie banner settings.

If you visit the footer of the site and click on the social links, then use tab to get to the cookie settings you’ll get a bunch of tabs that look like nothing is happening before the cookie settings is tabbed to. That’s because you’re going through the off canvas menu.

Really, if it’s not visible on desktop you shouldn’t be able to tab to it. (You should be able to tab to a button to open it and then go through it maybe, but if it’s mobile-only, it shouldn’t be there interfering with the keyboard tab journey through the links).

On our site, as the off-canvas nav is a mobile menu (duplicating the links) it should ideally, be tabindex=”-1″ on desktop so the keyboard ignores it.

[Laura]

Actually, I found a quicker method.

Hide the off canvas menu on desktop.

@media screen and (min-width: XXXXpx) {

#generate-slideout-menu
{
display:none;
}
}

Takes it out of the tab flow.

[David]

Hi Laura,

thanks for reporting this, we do have an open git issue to resolve this.
Ill see if i can that moved up the to do list.

[Author]

Posts