Accessibility issues with main nav leaves US sites in danger of lawsuits :(

Hey dfpg,

What exactly do you need to change, and what are the guidelines?

Best regards,
Rikard

Hi,

Sorry for the delay. The main menu is not fully accessible without a mouse, but it’s already inside a nav tag and the menu items are wrapped inside an unordered list, so they should be properly recognized by assistive technologies as described in the documentation and you should be able to navigate using a keyboard.

// https://www.w3.org/WAI/tutorials/menus/structure/

If you want to add the role and aria-label attribute to the nav tag, edit the wp-content\themes\enfold\includes\helper-main-menu.php file and look for this code around line 170..

 $main_nav = "<nav class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";

.., then replace it with:

 $main_nav = "<nav role='navigation' aria-label='Primary'  class='main_menu' data-selectname='".__('Select a page','avia_framework')."' ".avia_markup_helper(array('context' => 'nav', 'echo' => false)).">";

// https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA6

We can also add the role attribute to menu items by editing the wp-content\themes\enfold\includes\helper-responsive-megamenu.php, look for this code around line 270:

$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

Below, add the role and tabindex attribute:

$attributes .= ' role="menuitem" tabindex="0"';

Best regards,
Ismael

Hi,

The menu is already usable with a keyboard, but you can’t use the arrow keys to move to the previous and next menu items, only the Tab key to navigate and space to access the link.

If you want to use a different menu, other users usually integrate the Ubermenu plugin with the theme in place of the default menu, but we are not really sure if it has accessibility features. It looks like the menu is keyboard accessible based on this article.

// https://sevenspark.com/docs/ubermenu-3/faqs/accessibility-blue-glow

Best regards,
Ismael

Hi,

Thank you for the clarifications.

To make the sub menu visible on tab focus, please edit the file that Lance mentioned above (avia-snippet-megamenu.js), look for this block of code..

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

.. and replace it with:

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

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

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

And add this css if you want to see an indicator:

#top .av-main-nav ul a:focus {
	text-decoration: underline;
}

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.

We’ll forward the issue to our channel.

Best regards,
Ismael

Hi,

@dfpg: Is the Performance > File Compression settings enabled? Try to disable it temporarily and make sure that the scripts are not cached.

@Mitch: We might have to dequeue the original script, copy it to the child theme, then enqueue it back using the new path or directory.

avia_enqueue_script_conditionally( $condition , 'avia-megamenu', $template_url."/js/avia-snippet-megamenu.js", array('avia-default'), $vn, true);

// https://developer.wordpress.org/reference/functions/wp_dequeue_script/
// https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Best regards,
Ismael

Hi,

@dfpg: Thank you for the update. So is it working for you now? If it still doesn’t work, post the login details in the private field so that we can check the site. Also, please make sure that the Appearance > Editor panel is accessible so that we can edit the files if necessary.

Best regards,
Ismael