The Problem: Menu items on the hidden menu are still spoken by VoiceOver
See the prototype in action: mobile-menu.html
Our website has a slideIn mobile menu for tablet and narrower viewports. In Chrome, Keyboard accessibility behaviors include clicking on the "close-X" button in the expanded mobile menu to hide the menu; navigating beyond the menu hides the menu; Esc on the keyboard hides the menu.
In Safari on iOS using VoiceOver, using an external keyboard, QuickNav correctly stops on the dropdown toggle, and selecting it correctly expands the hidden menu. The menuitems can be chosen. Navigating off the end of the menu hides the menu. Selecting "close-x" also hides the menu.
When the menu is hidden, the desired behavior is to walk ONLY through the page's visible links.
VoiceOver has a quirk: if the menu was hidden by selecting "close-X", then only the visible links on the page are audible. If the menu was hidden by a virtual click - jQuery's .click() behavior triggered by exiting the menu - then VoiceOver continues to treat the hidden links as if they are visible.
The Question: How can I get VoiceOver to make a virtual click behave like a physical click - and ignore the hidden links on the collapsed slide-in menu?
In your code example I see this:
<div class="nav-mobile dropdown-menu dropdown-menu-right" role="menu" aria-hidden="false">
The aria-hidden starts with a value of true, but after I start toggling the menu and hide it again it never switches back to true. Since that is the technique you rely on to hide the menu from a screen reader, it will not be hidden.
In short, this appears to have nothing to do with a click event and more to do with something in your function failing to toggle that value when the menu toggles.
I am not testing on VoiceOver, I am seeing this on NVDA. You should test on more screen reader combinations and maybe replace your jQuery function with vanilla JavaScript to confirm your assertion.
While I am here, I suggest you take a look at focus management for the menu. Since the first tab-stop is to close the menu, which the hamburger already does, you may want to just move focus to the close link.
Also, the role="navigation" could be replaced just by using the <nav> element.
Further, the role="menu" can be confusing for users unless you want to replicate an OS-style menu and implement all the expected keyboard shortcuts. I suggest you just remove it.
Related
Is there a way in the Safari Developer menu to show triggered/executed JS functions/code on events on a web page (for instance a button is clicked)?
Yes, it posible, first you have to enable the Inspect Element:
here a tutorial:
Choose Safari > Preferences, and click Advanced.
At the bottom of the pane, select the “Show Develop menu in menu bar” checkbox.
then open the Inspect Element and go to the 'Sources' tab
here you will see the Breakpoints and start play.
I have a web-app. There are some elements with the click event bound to them. It works fine on a desktop. But on a tablet when I touch the element it will first not do anything but instead just show that it's hovered with styles. And on the second click it works. How do I disable hover-on-touch and enable clicking on every first touch for the entire app?
These would also trigger on clicking the right mouse button. ---> this is :active state of the element
Maybe this link will help you:
iPad/iPhone hover problem causes the user to double click a link
(sorry, I'm not allowed to add comment yet)
The android tablets generally have a "back button". It displays like an arrow that did a U-turn. For most native programs this means "return to some previous screen".
In my tablet I'm showing a custom HTML5 web page. I have an HTML5 SELECT control on my page. When the user selects a value from it the control is hidden (change CSS visibility, etc.) through Javascript on the onchange event. I also trap the onkeyup event in case the user hits the Escape button on a desktop device, etc. I also trap the onblur event if the user taps outside of the control.
On the tablet the user can click on the tablet "back button". The effect of this is to exit from the display of options to show the web page with a closed SELECT control. This "back button" isn't being detected by my Javascript handlers.
Is there an event for this that I can hook into in Javascript so I can hide my SELECT control?
UPDATE 09/07: Here is an example of the behavior. I have a place in a SVG graphic that responds to a touch event. An HTML SELECT control is made visible and it is expanded automatically. Rather than show the option list as a HTML list in the web page, a full-screen tablet option list is shown. If I click on the back button of the tablet (not the browser) the select control is still shown displayed on the web page. If I click on the select control itself the tablet option list is shown again. If I click on the tablet back button again the original logic I programmed in is completed. Very strange.
Thanks,
Jerome.
I am n00b to watir and I'm testing a web app that uses extjs. The app has a main menu with several items that have sub items. One of the main menu items has the same text as one of its submenus. In watir webdriver I have this code:
jobs_menu = d.p(:text => "Jobs")
jobs_menu.when_present.flash
jobs_menu.click
jobs_submenu_item = d.a(:text => "Jobs")
jobs_submenu_item.when_present.flash
jobs_submenu_item.click
This is supposed to flash and click the first menu and cause the submenu to drop. Then it should flash and click the submenu item. I get 3 results in 3 different browsers with this:
Firefox - 1st menu flashes and drops, submenu item flashes, but does not get clicked
Chrome - 1st menu flashes and drops, submenu item flashes and clicks OK - yay!
IE - 1st menu flashes and drops, then it goes away and the submenu item cannot be found with ElementNotVisibleError
Interesting to note for a different menu where the drop down text is different than the submenu text then Firefox and Chrome both work OK. IE still gives the ElementNotVisibleError.
How can I get this to work the same in all 3 browsers?
In some cases the display of menus does not require a click, and can be triggered by mousing over the menu. In that case it might work to try .hover instead of .click to get the menu to appear.
A problem with a lot of these custom controls is that they work differently on different browsers, which means your automation code MAY have to take that into account, this is the downside to custom controls like this and not using basic HTML elements
I have a page with "main tabs" which behaves as follows;
1. On hover of these, I show "sub tabs"
2. On click of any of the main tabs, it goes to one of the default sub tab pages.
$(".mainlink_href").mouseover(function(){...}
Now these behaves as expected on desktop browsers. But on the iPad, when user clicks on any of the main tabs, it always does the hover method execution i.e. shows the sub tabs and does not go the sub tabs page (as in the desktop)
Now I agree, that this is as per expected iPad behavior since there is no mouse cursor to track for hover event otherwise...
But is there any way that I can update the code such that "only for the iPad" it does not go through the hover method for the first click and instead does the click event and directly takes the user to the default sub tab page (i.e. similar to point 2 above in desktop browsers)
Please help me. Thank you.
You could just assign both event handlers, and have the ontouchstart handler remove the onmouseover handler.
$(".mainlink_href").mouseover(function(){...});
$(".mainlink_href").ontouchstart(function(){this.mouseover=function(){};});