javascriptcsszurb-foundationtabindexoff-canvas-menu

Off-Canvas Tabbing Links when not in View


The off-canvas navigation menu is being recognized in the tabindex on desktop view. So if a user is viewing on desktop, they tab the "skip to main" as they should for accessibility; but then they tab through 8 non-visible links before reaching the logo of the page.

This site is using Zurb Foundation off-canvas.

I tried adding tabindex="-1" to the off-canvas links as recommended in this thread. While this resolves the desktop issue, it becomes then an off-canvas issue because the links will not tab there instead.

Any thoughts on how to tabindex only the nav menus that are in view?


Solution

  • This issue was resolved by assigning "display: block" and "display: none" to classes within the responsive menu when it was open and closed.