After writing a blog post in the 24 days before Christmas, I took the month of January off to get some new energy and collect some more and other topics to write about. Since I’m currently preparing for an accessibility certification, I want to have some blog posts around these topics. Today, you will get the first one. But I might blog about different topics in between.
Setting a menu label in a Block Theme
When you have a website with only one navigation using the <nav>
tag, you are probably safe. Still, it can make sense to have a (good) label for your main navigation menu. But as soon as you have two menus, you must add labels.
Many screen readers have the option to jump to “landmarks” on your site, so a visitor can use this to easily find the navigation menu(s) on your page. But they will usually only here how many items are in each menu, not what the menu is about.
The default navigation menu in Twenty Twenty-Five
When you start a new WordPress project using the default theme Twenty Twenty-Five, your navigation menu will only have the “Sample Page” as an entry, and it would have an aria-label
attribute, but it is empty (all other attribute values are replaced with ...
, since their content is not important in this code snippet):
<nav class="..." aria-label="" data-wp-interactive="..." data-wp-context="...">
The navigation menu has a name, though. It is simply “Navigation”. When you navigate to “Appearance > Editor > Navigation”, you should see something like this:
![Screenshot of the Site Editor with the "Navigation" view opened showing the one "Navigation" with one entry "Sample Page".](https://kau-boys.com/wp-content/uploads/2025/02/twenty-twnety-five-editor-navigation.png)
When you click on the three dots next to the title, you can easily “Rename” the existing navigation. Let’s rename it to “Main navigation”. If we now refresh the frontend, we see … no change. Even after changing the title, the aria-label
is empty.
Solution: change the title by duplicating the menu
I don’t really know why the change of the title does not add any aria-label
, but I found a workaround. Instead of using “Rename”, you can use “Duplicate”. This will add a “(Copy)” suffix to the duplicated menu. Now you only have to use this new navigation menu at the position you want to have it. For example, you navigate to “Appearance > Editor > Patterns > Header” then, select the header and click on the navigation block. In the Block settings, you click on the three dots right of “Menu” and then select the new menu you have duplicated and renamed:
![Screenshot of the "Navigation" block sidebar settings with the selection of the available menus opened.](https://kau-boys.com/wp-content/uploads/2025/02/navigation-block-menu-selection.png)
If we now save the header with this new menu, and refresh the frontend, we finally have our aria-label
:
<nav class="..." aria-label="Main Navigation" ... >
In the dropdown in the screenshot above, you can also see the “Create new Menu” option. If you create a new navigation here, it would get a name like “Navigation 2”. This would automatically be used as the label. But you would have to back to the Site Editor to change the label. It would be nice, if that would also be possible here.
Adding a label to a Classic Theme
If you are still using a Classic Theme, you have to manage the label differently. Even though WordPress supports labels since version 5.5, many themes still don’t use them. Or at least not with the new parameter. This is how the label is added in Twenty Twenty:
<nav aria-label="<?php esc_attr_e( 'Footer', 'twentytwenty' ); ?>" ... >
If you want to change the label here, you would need to edit the file – in a Child Theme. Not really ideal, but still possible. If you develop themes yourself, make sure to use the container_aria_label
parameter of the wp_nav_menu()
function.
Conclusion
Adding a label to each navigation menu can make a huge difference for the accessibility of your website. When you use a Block Theme, you can do all of that without touching any code directly in the Site Editor. And since I’ve showed you, that the automatic navigation menu names are not really ideal, you might want to check the labels of your website and give them a better label.