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.
Related
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
I am using Vue.js (which I don't think have anything to do with this issue) and a color picker package vue-color. What I want to achieve is following:
A button or rectangle element have color as selected color when clicked show a menu type dropdown with color picker. User can pick color here, and when they click outside color picker, it collapse. I tried doing this with bootstrap dropdown and everything works fine except when I click to pick color the menu collapse(refer to following code):
<ul>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><sketch-picker v-model="colors" /></li>
</ul>
</li>
</ul>
Above code shows this output, which is same as what I want to achieve but on first click only it collapse, hence user couldn't tune it.
On exploring I found below link, but am not able to translate it into vue.js
https://github.com/react-bootstrap/react-bootstrap/issues/1490
I also tried using select and putting color-picker in it's option, but then no color-picker comes and only r, g, b values are shown.
I also tried to make my own div and show-and-hide using vue. But instead of coming over base div it takes it own space even with z-index (I know this is workable but I couldn't get this working). Any help would be appreciated
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/
At this site when you hover over "service" tab you see a blue drop down, as well a yellow sub nav drop down. The yellow sub nav drop down should not be showing as it needs to be hidden until user hovers over its parent "Repair."
Might anyone know what to add to the code to get this affect or have built something similar?
You have a </li> too much:
<li id="menuCellTop"><img src="images/repairs.gif" alt="repairs" name="repairs" /></li>
should be:
<li id="menuCellTop"><img src="images/repairs.gif" alt="repairs" name="repairs" />
By the way, you have a lot of errors in your html, you might want to fix that to avoid things like this.