So we have a ul menu with a div under it that shows the tabbed contents.
<uL>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
<div id="content">content here</div>
So when you hover or click one of the menu items, the corresponding content is visible in the div. The displaying of the content is working correctly, however we cannot seem to find the command, or proper structure for the Mac Voiceover to select the content with the keyboard.
Example if you use the arrow keys to activate menu item #2, it works in displaying the content, however if you wanted to drop down into the content, it does not work, using the arrow keys simply takes you to menu item #3.
If you are on menu item #3 and you arrow to the next content, it will drop you down into the content correctly.
Is there a way to structure this to allow the user to drop into the content without having to be on the last menu item? Or is there a command that will break from the ul and move into the content?
Any help would be most appreciated.
We ended up changing everything to clicks only(removed hovers) for ADA users, as well as once the tab/menu item was opened, we sent focus to the content.
This resolved our issue.
To add these options we simply placed an ADA symbol on the page, those who need it click it to gain their functionality, those who do not need to click - nothing changes with their user experience.