When navigating a website menu with a keyboard using tab, how do I prevent the tab sequence from selecting the submenu items? I would like the tab focus order to only access the top level links. If a user wants to access the submenu links, then they should be able to press the down arrow key to access them.
Please beware Alexander’s comment that the ARIA Authoring Practices Guide (APG) is discouraging the menubar pattern for navigation
CAUTION! Before considering use of the ARIA menubar pattern for site navigation, it is important to understand:
The menubar pattern requires complex functionality that is unnecessary for typical site navigation that is styled to look like a menubar with expandable sections or "fly outs".
A pattern more suited for typical site navigation with expandable groups of links is the disclosure pattern. For an example, see Example Disclosure Navigation Menu.
You can take a look at the Disclosure Navigation Menu for guidelines and examples of what you are looking for.
Otherwise, if you really have the need of focus navigation inside a component by means other than tab, you will need some JavaScript to establish a Roving tab index.
That means you programmatically set tabindex=0 to only one element, which should have focus—i.e. your sub menu item—and tabindex=-1 to all others (inside the composite component).
<ul class="menubar">
<li>Main menu item X
<ul>
<li>Sub menu item 1</li>
<!-- currently focused -->
<li>Sub menu item 2</li>
…
</ul>
</li>
</ul>
See Keyboard Navigation Inside Components for the JavaScript necessary.
Please beware as well that you will need some ARIA properties and states to indicate that a menu item can be opened, like aria-haspopup="menu"and aria-expanded, along with the proper roles.
See the AGP Menu pattern
Related
I am building a website in Joomla, and I'm trying to make a menu in which some menu items should not have any article associated with it; clicking on them should only reveal the sub-menu items, but the rest of the page should stay static. So, I set that parent menu item to Separator, and added some sub-menu items to it. However, for some reason, the parent menu item is not clickable, meaning that I cannot reveal the sub-menu items.
Here is my website: http://vaterlinija.lt/
The parent menu item that has sub-menu items is the second one from the bottom (as you can see, it is non-clickable).
How do I fix this? I tried using Menu Header and URL (set to #) instead, but the result is the same. The only way to make these sub-menu items to show is to set that parent menu item to something like Single Article or similar, which is precisely what I want to avoid. I am using my own template, made from scratch. Do I need to add something to CSS, maybe?
Im not really a pro in bootstrap. Im trying to set a bootstrap navbar menu with dropdowns, I found on line a great exemple: mega dropdown menu that actually satisfies my needs [the link to mega dropdown menu]15351 . The problem is, when I try to add another menu element (dropdown), the dropdown is displayed in a wrong position ! (under an other existing menu element). I tried editing the css but I haven't achieved my aim yet !
To test what Im talking about you try to add a drop down menu element and see what happens.
I would appreciate it if you guys could help me with that.
place the dropdown between last endindgs.
</li>
<li class="dropdown dropdown-large">
-----place any lists-----
</ul>
</div><!-- /.nav-collapse -->
I have a jsfiddle here - http://jsfiddle.net/s8sq38y8/2/
It's a bootstrap tabbed menu that displays content under each tab and a triangle under the tab to display which tab is selected.
I need to control the tabbed menu from another navigation which (the second nav will be in a different location on the page)is working but I need to also move the triangle to the correct tab when the second navigation is clicked. How can I place the triangle under the correct tab on the on thr red menu when the second nav is used.
Second Nav
<nav>
<ul class="top-nav" >
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</nav>
I would probably not let the bootstrap tab javascript be triggered by the clicks on your top navigation. It feels just wrong. This can easily be done by removing the data-toggle attribute. I would then add a few lines of js that would delegate a click in the top navigation to the matching link in the tab navigation. Something like this:
$('.top-nav a').on('click', function(e) {
var ariaControls = $(this).attr('aria-controls');
$('.blocks').find('[aria-controls="' + ariaControls + '"]').click();
})
As you can see, the triangle follows nicely now, as this just mimics a click on the actual tab. http://jsfiddle.net/s8sq38y8/4/
My Question is a sequel to this question
Keyboard accessible web dropdown menus?
While the above questions says that
We figured out how to show the menu
with a keyboard shortcut, but I'm not
sure how to select one of the entries
I have figured out how to select single menu items using accesskeys(and by underlining the key letter), but I do not know how to pop up a menu on keypress.
The menu is a XHTML/CSS only menu, XHTML being
<ul>
<li>Menu 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
You can't.
Using accesskey will either activate or focus a link (depending on the browser).
Once a link has focus, you could get the menu to show up with something like:
ul#mainMenu > li > a:focus + ul { display: block }
But then you wouldn't be able to interact with anything inside the menu, as it would vanish as soon as the focus moved away.
CSS is a nice tool for describing presentation — which is what it is designed for — it is a very poor tool for describing interaction logic. JavaScript is designed for that, so use the right tool for the job.
The least problematic drop down menu script I've come across is UDM4 but I'd usually try to avoid drop downs entirely.
Spudley: The reason focus isn't working like hover is that the hover action is assigned to the ul or li containing the link. The pop-up menu is a child inside of that ul/li so you are still hovering over an element inside of the ul/li. Focus can only be placed on keyboard interactive objects like links and form fields. This means when the link has focus you can show your menu using the CSS3 selector mentioned by Quentin, but the menu is not a child of the anchor tag, in order for it to be a child your sub menu would have to be inside of the a tag. This will as you might imagine cause problems with the links inside the sub menu. Try putting your hover tag on the a instead of the element inclosing the a and you will get the same results as the focus method.
Quentin: one reason I am currently looking into this is the combination of responsive design and accessibility. I have my menu at full screen size fully expanded, but when you shrink the screen the menu becomes a small button on the page that expands on hover/focus to save screen room on mobile/phone screens. I am also trying to avoid javascript and make it keyboard accessible as per accessibility requirements. I don't think there is a way to do it right now for the reason you listed. So my fall back is hide the menu and show using javascript and when it's not enabled always show the menu. Less user friendly for mobile users (with js disabled), but they can still access everything for accessibility requirements.
I've got a horizontal menu with UL/LI markup that I want to convert to an ASP:Menu in .net 3.5.
I'd like choices in the submenu to be rendered in a horizontal menu below the main menu when the main menu option is clicked. I also want to:
indicate which menu option is chosen by highlighting/bolding both the main menu and submenu,
check on rendering (or via some other mechanism) the role of the user to show only the proper menu options.
Use the CSS friendly adapters: http://www.asp.net/CssAdapters/
These will allow you to keep the ul/li markup and give you the ability to highlight via css and control the rendering just like you would with a normal asp:Menu with the roles.