Navigationsname in WordPress als Landmark verwenden

Veröffentlicht: 28. August 2025 von Matze – 3 Kommentare

Wenn du „klassische“ Navigationsmenüs in Design > Menüs verwendest, kannst du ihren Namen als Bezeichnung für die Menüs verwenden, die in Landmarks angezeigt werden. Das verbessert die Barrierefreiheit deiner Menüs und ist deshalb empfehlenswert.

Was sind Landmarks?

Landmarks, oder im Deutschen auch Orientierungspunkte genannt, sind bestimmte Bereiche auf einer Website, zu denen sich ein direkter Sprunkt lohnen kann. Für Screenreader gibt es spezifische Funktionen, um schnell alle Landmarks einer Seite anzuzeigen und dorthin zu navigieren. Das kann der Hauptinhalt sein, der Footer oder – du dürftest es bereits erraten haben – eine Navigation. Standardmäßig, wenn eine Navigation keinen Namen besitzt, heißt es nur „Navigation“.

Durch das Hinzufügen eines Namens, insbesondere wenn es mehrere Menüs auf derselben Seite gibt, werden selbige in der Liste der Landmarks unterscheidbar. Auf Epiphyt sieht es aktuell so aus:

Die Navigationen für Projekte, Footer, kostenlose Plugins und Social Media besitzen ihren zugewiesenen Namen. Und es ist immer noch Raum für das Benennen der Hauptnavigation (die aktuell nur „Navigation“ heißt) und das mobile Menü (das aktuell „Menü leeres Objekt: Navigation“ heißt, da es eigentlich „Menü“ heißt, aber als leer deklariert wird – weil es ausgeblendet ist¹).

Wie kann man den Namen des Menüs als Landmark verwenden?

Für meine Navigation „Projekte“ sieht der Code in meinem Theme folgendermaßen aus:

<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-Sprache: HTML, XML (xml)

In Zeile 3 – 8 wird die normale Funktion wp_nav_menu ausgeführt, um das Menü anzuzeigen, und wird von einem <nav>-Tag umgeben. Um dessen Namen anzuzeigen, werden das aria-labelledby und Zeile 2 verwendet.

Das aria-labelledby benötigt die ID eines Elements als Referenz und verwendet den Inhalt dieses referenzierten Elements als den Namen. Wird das so an einem <nav>-Tag verwendet, führt dazu, dass die Navigation einen Namen erhält, das dann für Screenreader angezeigt wird.

In Zeile 2 setze ich diese ID auf ein Element und gebe ihm den Namen, den ich unter Design > Menüs für dieses Menü verwendet habe, via wp_get_nav_menu_name( 'projects' ). Diese Funktion benötigt die Theme-Position des Menüs, die auch bei wp_nav_menu verwendet und zuvor via register_nav_menus registiert wurde. Wenn du jetzt die Navigation mit einem Screenreader auswählst, erhältst du direkt den zugewiesenen Namen:

Der Suffix „Navigation“ wird normalerweise automatisch zu allen Navigationen in jedem Screenreader hinzugefügt. Stelle demnach sicher, es nicht noch explizit hinzuzufügen.

Ebenso wird der Name jetzt in der Liste der Landmarks innerhalb deines Screenreaders angezeigt.

Fußnoten

1. Diese Probleme ist zum Zeitpunkt der Veröffentlichung dieses Beitrags bereits behoben. ↩︎