When a page contains more than one <nav> element, a primary navigation, a footer navigation, and perhaps a breadcrumb or social links menu, screen readers list all navigation landmarks when a user requests a page summary. Without labels, these are announced as “navigation”, “navigation”, “navigation”, indistinguishable from each other. Adding aria-label attributes lets screen readers announce “Primary navigation”, “Footer navigation”, and “Social media links” so users can jump directly to the navigation region they need.
This satisfies WCAG 2.1 success criterion 2.4.6 (Headings and Labels) and improves the overall screen reader experience significantly on multi-nav pages.
The Code
Add this to your functions.php or a site-specific plugin. The wp_nav_menu_args filter fires before each wp_nav_menu() call and receives the full arguments array. The snippet reads the theme_location argument, looks up a human-readable label for that location, and adds it to the container element’s attributes.
The Labels Array
The $labels array maps your registered menu location slugs to human-readable descriptions. Update the keys to match the slugs you registered with register_nav_menus() and the values to descriptions that make sense to a screen reader user. Labels should be concise but descriptive, “Primary navigation” is better than “Main” (too vague) or “Primary site navigation menu” (unnecessarily verbose).
Container Element
The aria-label attribute is added to the menu’s container element. The snippet ensures the container is set to nav when it would otherwise be empty, a <nav> element with an aria-label is the semantically correct combination for a labelled navigation landmark. If your wp_nav_menu() calls use container => false, the filter’s container setting won’t take effect and you’ll need to add the aria-label to the wrapping element in your template directly.
container_attrs
The container_attrs argument was added to wp_nav_menu() in WordPress 5.8 as a key-value array of HTML attributes to add to the container element. The snippet uses array_merge() to preserve any existing container attributes while appending the aria-label. On WordPress versions below 5.8, this argument is ignored, for older installs, use the wp_nav_menu_args filter to pass a custom container class and add the label via a separate action on the container markup.
add_filter( 'wp_nav_menu_args', function( $args ) {
$labels = [
'primary' => 'Primary navigation',
'footer' => 'Footer navigation',
'mobile' => 'Mobile navigation',
'legal' => 'Legal links',
'social' => 'Social media links',
];
$location = $args['theme_location'] ?? '';
if ( $location && isset( $labels[ $location ] ) ) {
// Add aria-label to the container element
$args['container'] = $args['container'] ?: 'nav';
$args['container_attrs'] = array_merge(
$args['container_attrs'] ?? [],
[ 'aria-label' => $labels[ $location ] ]
);
}
return $args;
} );