Use WordPress’ navigation menu name as landmark

Published: August 28, 2025 by Matze – Leave a comment

If you use “classic” navigation menus in Appearance > Menus, you can use their name there as label for your menus, which are used in landmarks. This improves accessibility of your menus and thus is recommended.

What are landmarks?

Landmarks are certain areas on a website, which usually is worth jumping to directly. For screen readers, there are dedicated functions to quickly access all landmarks on a website. This can be the content, the footer or – you guessed it – a navigation. By default, if a navigation has no name, it is just called “Navigation”.

Giving it a name, especially if there are multiple menus on the same page, can make it distinguishable in the list of landmarks. On Epiphyt, it currently looks like this:

The navigations for projects, footer, free plugins and social media got their dedicated name. And there’s still room for naming the main navigation (which is currently simply called “Navigation”) and the mobile menu (which is currently called “Menu empty Navigation“, since it’s called “Menu”, but is considered as empty – due to it being hidden¹).

How to use the navigation menu name as landmark?

For my “Projects Navigation”, the code in my theme looks like this:

<nav class="content-navigation projects-navigation" aria-labelledby="projects-navigation-label">
	<p id="plugin-navigation-label"><strong><?php echo \esc_html( \wp_get_nav_menu_name( 'projects' ) ); ?></strong></p>
	<?php
	\wp_nav_menu( [
		'theme_location' => 'projects',
		'menu_id' => 'project-menu',
	] );
	?>
</nav>
Code language: HTML, XML (xml)

In line 3 – 8, the regular wp_nav_menu function is called to display the menu, and it’s surrounded by a <nav> tag. What makes it to display its name is in the aria-labelledby and line 2.

The aria-labelledby takes the ID of an element as a reference and uses the content of this reference element as the name. Using this on a <nav> tag results in the navigation getting a name, which is then displayed for screen readers.

In line 2, I set this ID on an element and give it the name that I used in Appearance > Menus for this menu via wp_get_nav_menu_name( 'projects' ). This function takes the theme location of the menu, which also has been added to wp_nav_menu and previously been registered via register_nav_menus. If you now select the navigation with a screen reader, you get the name you’ve assigned it to:

The suffix “Navigation” is usually added automatically to all navigations across each screen reader. So make sure to not add it explicitly.

Also, the name is now properly displayed when opening the landmarks list in your screen reader.

Footnotes

1. These issues have already been fixed at the time of publishing this post. ↩︎