For accessibility, what is the best/correct aria-label of a submenu. Should there be a general label followed by the purpose of the menu? Or should the aria-label be the same for all submenus?
Example: The image shows an example menu for book settings. When the user focus the menu trigger button. should the aria-label be: "submenu book settings" or just "submenu".
Open for suggestion!
It depends if you are using aria-haspopup="true". Having that attribute will already notify the screen reader user that you have a submenu. Different screen readers might announce it differently but the gist of it is that there's a submenu so you don't have to include that in your aria-label. You can just have aria-label="book settings".
Note, however, if you use aria-haspopup, then you are committing to supporting up/down arrow key navigation through your menu, rather than tabbing through the submenu list. See an example of the menu button pattern.
Alternatively, instead of using aria-haspopup, you could use aria-expanded. You can support either tabbing through the submenu or arrowing up/down through the submenu, or both. See the Disclosure Navigation Menu example. With aria-expanded, the screen reader will hear "collapsed" when they navigate to the 3-dots icon so they'll know they can press enter/space to expand the menu so, again, you don't need to say "submenu" in your aria-label.
Related
I have made the menu with CSS {overflow:hidden} and use JQUERY to lift up menu when hover on it. But there is one issue occur in google chrome browser. When I press tab key from keyboard to select menu, all the menus are lifted up and showed. If I not use {overflow:hidden} in menu CSS, then can select menu with tab key and design is OK. So kindly advise me how should I handle for this case? Thank You.
I need to set the Material Design Lite drawer menu so that the hamburger menu is displayed permenantly. The menu must be shown only on click.
There is no documentation available about this. Thank you!
link
I'm going to be honest with you and say I'm not sure what your asking, however.
If you are referring to the hamburger not displaying at all assure that your mdl-layout has the mdl-js-layout
Did you add the menu at runtime? If so, assure that the dom is updated after the fact
//yourCodeThatModifiedTheElement
componentHandler.upgradeDom();
Or is the navigation not showing up at all? Certain breakpoints will hide the navigation in which case you can have the header fixed which will display on all screen sizes by adding mdl-layout--fixed-drawer to your mdl-layout
I am using a drop-down menu written in CSS. Been able to get it to my liking but one thing seems to elude me. I want the drop-down menu to close upon mouse click on an item. Fiddling around with :target for some time, just cannot make it work.
http://www.jsfiddle.net/DAtLC/
I have edited the CSS on my menu on this site:
So it would display completely across at the font size I want (previously it was turning into a two layer menu). However, now for some reason the submenu under "Show Your Support" is very difficult to click on. When you hover and try to move your mouse down to an option it disappears half the time before you can click on anything.
I have played around with the code in Chrome (inspect element) and I can't seem to find out what is wrong. Can someone assist me, please?
Thank you.
There is a gap between the menu and where the sub-menu appears. See Image below:
When you hover away from the menu item and the mouse is on its way to the sub-menu, the mouse ceases to be on 'hover' (while crossing over the gap) - making the sub-menu disappear.
If you can eliminate the gap (i.e. place where the sub-menu is positioned higher up the page), the 'hover' state will remain on mouse-move and the sub-menu will stay 'shown' for clicking.
Does that help?
PS
posted as an answer (instead of comment) so I could include the image in my explanation.
In your show your support tag, inside add this style
style="padding-bottom:10px;"
So that I am able to operate now without any hover before on click issue. try and let me know. I tried in IE.
my website is using a pure CSS3 dropdown menu. The problem is when the website is view on touch screen device, some of the menu item with hover property doesn't auto drop down.
How can I change it to be like, if the menu item has a hover dropdown, in touch screen devices you have to touch it then the menu will drop down where else in our PC it will still remain the hover effect.
Can it be done by using CSS only?
Have you tried using aria-haspopup to simulate hover on touch-enabled devices
Take a look at this article.
On a page element such as a menu, set the element's aria-haspopup
property to "true". When an Internet Explorer 10 user on a
touch-enabled device first taps the page element, the user's
experience will be identical to that of a user who hovers over the
element with a cursor.
I'm not sure what the browser support for this is like though.
"hover" is not really a feature of touchscreens since it needs to have a mouse pointer involved. If you are using a good library that supports touchscreens, it should also work. If not, try another library or write something your own.