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 Default WordPress Nav Menu
For many websites making your navigation menu accessible can be accomplished by using the latests Bootstrap Nav Walker. Complete instructions are provided in the GitHub readme, linked above. If you need help, for a fee one of our accessibility expects can install the latests Bootstrap Nav Walker on your website. Please let us know how we can help.
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 when your menu has only one level of dropdowns.
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 spacebar keypress triggering page slide
jQuery("body").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') && jQuery(':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()
});
});
Include the following code in your theme’s scripts file to improve the accessibilty of the Elementor Nav Menu Widget when your menu is more 2 or more levels deep.
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();
});
// disable opening on submenu on focus
$(document).on("focus", "a.has-submenu:not(.elementor-sub-item)", function(event) {
event.preventDefault();
if($( this ).attr('aria-expanded') === 'true'){
$( this ).trigger( "click" );
}
});
// disable subitem links and add expanded notice
$(document).on("click", "ul.sub-menu>li>a.has-submenu", function(event) {
event.preventDefault();
return false;
});
$(document).on("focus", "ul.sub-menu>li>a.has-submenu", function(event) {
event.preventDefault();
if($(this).find('.expandedNotice' ).length === 0){
$( this ).append(' <span class="expandedNotice screen-reader-text">expanded menu</span> ');
}
if($( this ).attr('aria-expanded') === 'true'){
}else{
$('.expandedNotice').detach();
}
return false;
});
$(document).on("keypress", "a.has-submenu", function(event) {
event.preventDefault();
var key = event.key;
if(key === ' '){
if($( this ).attr('aria-expanded') === 'false'){
$( this ).trigger( "click" );
}
}
});
// correct elementor mobile menu not opening on keypress
jQuery("body").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') && jQuery(':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()
});
});
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');
}
});
}
});
// correct spacebar keypress triggering page slide
jQuery("body").on("keypress", "a.dropdown-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') && jQuery(':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()
});
});
