Accessibility Issue for Menu with Sub-items of sub-items

Hey xfilegirl,
Thank you for your patience, can you link to the thread you found about the edit you tried, I didn’t find it and would like to try it. It sounds like the issue you are having is only with the third child-level menu correct?

Best regards,
Mike

Hi,

Thank you for the update.

As we stated on the previous thread, the modification there will only work properly on a single level sub menu.

This should open the sub menu on tab focus and hide it back after focusing out on the very last menu item in the list. This should work properly on items with single sub menu, but not on items with multiple levels of child menu items.

// https://kriesi.at/support/topic/accessibility-issues-with-main-nav-leaves-us-sites-in-danger-of-lawsuits/#post-1226327

What happens when you remove this block of code?

sublist.find('li:last-child').on('focusout', function () {
							sublist.stop().animate({ opacity: 0 }, function () {
								sublist.css({ visibility: 'hidden' });
							});
						});

Please toggle or temporarily disable the Enfold > Performance > File Compression settings after changing the file.

Best regards,
Ismael

Hi,

Thank you for following up.

After this block of code, we may need to check if there is still an element or another menu item next to the parent container, which is the currentItem or the li tag, and add a function that will manually focus that menu item.

currentLink.on('focus', function () {
						sublist.stop().css({ visibility: 'visible' }).animate({ opacity: 1 });

If you could provide the WP and FTP details, we will try to modify the code and get that behavior to work.

Best regards,
Ismael

Hi,

Thank you for the info.

Would you mind disabling the server cache? The modifications are not taking effect in the front end, even after we purge the cache. Please include the FTP details in the private field as well.

Best regards,
Ismael

Hi,

Thank you for the update.

We modified the script in the parent theme and it should be working properly now. Tabbing should open the submenus properly until the last menu item and move on to the next menu item if there is any.

// bind events for dropdown menu
			dropdownItems.find('li').addBack().each(function()
			{
				var currentItem = $(this),
					sublist = currentItem.find('ul').first(),
					showList = false;

				if(sublist.length)
				{
					sublist.css({display:'block', opacity:0, visibility:'hidden'});
					var currentLink = currentItem.find('>a');

					currentLink.on('mouseenter', function()
					{

						sublist.stop().css({visibility:'visible'}).animate({opacity:1});
					});

					currentLink.on('focus', function () {
						sublist.stop().css({ visibility: 'visible' }).animate({ opacity: 1 });
						currentItem.css("z-index", 1000);

						sublist.find('li:last-child').on('focusout', function () {
							var parent = sublist.parent(".menu-item");
							var nextMenu = parent.next();
							var submenu = $(this).parent(".sub-menu");

							if(nextMenu) {
								nextMenu.trigger("mouseenter").focus();
								submenu.stop().animate({ opacity: 0 }, function () {
									submenu.css({ visibility: 'hidden' });
								});
								return;
							}

							sublist.stop().animate({ opacity: 0 }, function () {
								sublist.css({ visibility: 'hidden' });
							});
						});
					});

					currentItem.on('mouseleave', function()
					{
						sublist.stop().animate({opacity:0}, function()
						{
							sublist.css({visibility:'hidden'});
						});
					});

				}

			});

Best regards,
Ismael

Hi,

It looks like you’re not tabbing but then the next menu will pop open.

Yes, it will continue to jump to the next item as long as it is available, going through sub menu items first before jumping back to the next parent item. However, it will not focus or scroll to that item and make it visible in the view port if that is what you are expecting. People who are using accessibility tools such as voice prompts or screen readers are usually the ones who will tab through these items, so it is not really necessary to make them visible in the view port.

Also, if a person has started navigating the menu using tabs and then tries to use the mouse after that,

Yes, it is one of the limitations but I am not sure if there is anyone who uses a tab key when they have a mouse. That is time consuming and unnecessary.

You should also consider restructuring your whole menu, limiting the sub menu to first or second level and consider moving some of the navigation to a sub page instead.

There are also third party plugins such as UberMenu or Max Mega Menu if you want to build a more complex menu, which does not rely on deeply nested drop downs.

Best regards,
Ismael