The W3C provides detailed instructions for creating accessible menus which we have summarized below along with providing some code examples for improving the accessibility of your menus:
- Verify that the menu is marked up using list markup (ul and li).
- If a link to the current page is included in the menu, ensure that it includes the aria-current attribute and that CSS is used to visually identify the page as selected.
- Ensure links that open a submenu include a visual indication that they open a submenu and aria-expanded attributes.
- When activated the triggering links aria-expanded attribute must change to “true”, when deactivate it must change back to “false”.
- Ensure submenus do not open when tabbing to a link, if the triggering link is used to open a webpage in addition to opening a submenu a seperate button must be used to trigger the submenu.
- Ensure that the “enter” or “space” key can be used to open submenus without triggering a link to open.
Improving the Elementor Nav Menu Widget
Include the following code in your theme’s scripts file to improve the accessibilty of the Elementor Nav Menu Widget.
jQuery(document).ready(function($) {
// improve the accessibility of the elementor main menu
setTimeout(function(){
jQuery(".sub-menu").attr('role','menu');
jQuery("a.has-submenu").attr('aria-haspopup','true');
jQuery(".elementor-nav-menu--dropdown .elementor-sub-item").removeAttr('tabindex');
}, 500);
$(document).on("click", "a.has-submenu", function(event) {
event.preventDefault();
jQuery(".elementor-nav-menu--dropdown .elementor-sub-item").removeAttr('tabindex');
});
$(document).on("keypress", "a.has-submenu", function(event) {
event.preventDefault();
var key = event.key;
if(key === ' '){
$( this ).trigger( "click" );
}
});
// correct elementor mobile menu not opening on keypress
$(document).on("keypress", ".elementor-menu-toggle", function (event) {
var code = event.key || event.code; //Get keycode.
if (code != 'Tab' && code != ' ' && code != 'Enter' && code != 'ArrowLeft' && code != 'ArrowUp' && code != 'ArrowRight' && code != 'ArrowDown') //Check each key.
return; //If it isn't any of those, don't worry about it.
if ((code == ' ' || code == 'Enter' || code == 'ArrowLeft' || code == 'ArrowRight') && $(':focus').is('input')) //If a space/enter or left/right arrow is pressed in the input, then allow it to happen as normal.
return;
event.preventDefault()
jQuery('.elementor-menu-toggle').trigger('click');
});
});
Generic Menu
The following example code can be used with some modification to make a navigation menu more accessible. If you need assistance, for a fee one of our accessibility expects can customize this code for your particular website. Please let us know how we can help.
jQuery(document).ready(function($) {
jQuery(".dropdown-menu").attr('role','menu');
jQuery("a.dropdown-toggle").attr('aria-haspopup','true');
jQuery("a.dropdown-toggle").append(' <span class="caret"></span>');
jQuery("a.dropdown-toggle").on("click keypress", function(event)
{
var thisid = jQuery(this).attr("id");
var key = event.key;
if(key === ' '){
event.preventDefault();
$( this ).trigger( "click" );
}else{
if(jQuery(this).attr('aria-expanded') === 'false') {
jQuery(this).attr('aria-expanded','true');
} else{
jQuery(this).attr('aria-expanded','false');
}
$("a.dropdown-toggle").each(function(){
if(jQuery(this).attr("id") !== thisid ){
jQuery(this).attr('aria-expanded','false');
}
});
}
});
});