display:none wird zurückgesetzt durch history.back() in Chrome

[Gunnar Bittersmann]

@@Kunst-eyids

Ich blende ein Menu (<nav id="navID>) durch click-Event auf einem A-Tag mit Bild ein oder aus.

<a id="hamburgerLink"> ist dafür falsch. Ein a-Element ohne href-Attribut ist kaum mehr als ein span – es ist kein interaktives Element; es ist per Tastatur nicht bedienbar.

Aber auch mit href-Attribut wäre ein a-Element falsch. Für Interaktionen auf einer Seite ist das button-Element zu verwenden. Den Button kannst du mit CSS so stylen, dass er keinen Rahmen einen transparenten Rahmen^[1] und transparenten Hintergrund hat.

Und der Button muss unbedingt mit ins nav-Element rein! (Sonst finden ihn Screenreader-Nutzer schlecht.) Das heißt dann, du blendest dann nicht das nav-Element ein/aus, sondern das ul-Element darin.

Zu deinem JavaScript: Das sollte nicht nur das Menü ein- und ausblenden, sondern den Zustand ein- bzw. ausgeblendet auch am Button anzeigen: aria-expanded="false" bzw. "true". Screenreader sagen das dann an. Außerdem könntest du das auch nutzen, um bei geöffnetem Menü das Hamburger-Icon durch ein Kreuz × zu ersetzen.

	function menuEinAus(){
		document.getElementById("navID").style.display=(document.getElementById("navID").style.display=="block"?"none":"block");
	}

Es macht auch wenig Sinn, das Element „navID“ bei jedem Auf- und Zuklappen erneut im DOM zu suchen. Das sollte einmalig nach dem Laden der Seite geschehen (also außerhalb der Funktion menuEinAus()) und in einer Variablen gespeichert werden.

Brauchst du aber auch gar nicht, wenn du wie oben gesagt aria-expanded verwendest. Dann kast du das dem Button folgende ul-Element per CSS ein- und ausblenden:

[aria-expanded="false"] + ul {
  display: none;
}

Eine weitere Möglichkeit wäre das Ändern des hidden-Attributs - wie in diesem Beispiel. Es ist sowieso i.a.R. keine gute Idee, CSS-Eigenschaften direkt mit JavaScript zu ändern.

---

Was bei dir auch nicht stimmt, sind die Hierarchie-Ebenen der Überschriften. Nach h1 muss h2 kommen, nicht h6. (Auch wichtig für Screenreader-Nutzer.) Die Schriftgrößen gibst du per CSS an.

---

Wenn ich den Zurück-Button benutze - oder history.back() - bleibt das Menu im Chrome immer geöffnet.

Zu den Eigenarten der Browser beim Zurückgehen kann ich wenig beitragen.

🖖 Живіть довго і процвітайте

---

1. Rahmen von Buttons nicht entfernen wegen forced-colors mode. Siehe Tweet, Artikel Windows High Contrast Mode, Forced Colors Mode And CSS Custom Properties von Eric Bailey und Vortrag Practical Styling in Forced Colors Mode von Mike Herchel ↩︎