The sites I design require that they meet the Americans with Disabilities Act (ADA) guidelines, which means that they need to be navigable via the keyboard w/o use of a mouse.
Foundry’s Nav. Bar and MegaMenu do a decent job of meeting this requirement for a menu bar UNLESS you have any menu items that have a Drop Down.
If you look at the MegaMenu sample page (Mega Menu | My Website) you can see/test for yourself. Starting with your cursor in the URL bar of your browser, navigate from the top of the page by only using the Tab key (no mouse).
The three “Drop Down >” menu items are simply skipped when tabbing. On the sample page “Home” is selected after hitting Tab once, which is expected. But, the second press of the Tab skips to the “Page Name” link, bypassing all three “Drop Down >” menu items.
Now, if you select the Drop Down with a mouse click, to “open” the drop down, the Tab key will then step through all the selections of the drop down. Unfortunately, that still requires a mouse click.
Any ideas why Drop Downs menu items are skipped when using the Tab key to navigate? Is there any way to correct this behavior?
While the drop down parent items in the navigation are links they do not have an href tag associated with them because they’re placeholders only. This means the use of the tab key bypasses them.
I can look at this further to see if I can add this as a feature of the Navigation Bar stack. Since I’ve not looked at it in depth I can’t promise it will work with how the stack is coded or not.
Thanks Adam! If you can get this working I would be eternally grateful as it would make my work infinitely easier.
The Gator stack from Stacks4Stacks somehow accomplishes this, I’m not sure how. However, sometimes I don’t need a stack with that much granular control, and would just rather stay in the Foundry ecosphere.
Here is a quick, sample site I’ve built that shows the Gator Tabbing in action. If you use the keyboard to Tab, once you get to “New Page Two” page, you will see that the drop down triggers. And, if you continue Tabbing, it will step through the items in the drop down. Then, once you reach the bottom item in the drop down, the next Tab closes the menu and goes to the next item in the Nav. Bar. This is exactly how it should work to meet ADA requirements.
Thanks @RPMD – I get how it should work. What I was saying is that I have to look at it more in depth to make sure it can be worked into how the stack is currently coded as to not cause problems for users who are already using the stack live on their pages. Hope that clears things up.
