Responsives Dropdown/Toggle-Menü mit HTML-Button, aria-expanded: welches JavaScript?

[Martinus33]

Hallo,
beim Umbau meiner Wordpress-Websites auf reines HTML und CSS bin ich soweit fertig mit der ersten Website. Ich nutze VSC.

Es fehlt jetzt noch das responsive Design. Mit den im Titel erwähnten Menü, genauer gesagt zwei (eine horizontale und eine vertikale Nav), brauche ich aber nun zum ersten und einzigen Mal JavaScript. Davon habe ich keine Ahnung. HTML/CSS dazu ist fertig (Navs selbst, Button/ul-Menü ein/ausblenden).

Es geht also um Folgendes:

• responsives DD/Toggle-Menü
• mit HTML-Button und aria-expanded drin
• Toggle-Funktion durch aria-expanded true/false
• desktop-first
• möglichst accessible

Ich habe ein paar wenige Tutorial-Beispiele im Web gefunden, die meinem Menü sehr nahe kommen.
Vermutlich kann ich das JS dort weitgehend übernehmen, ich will es mal probieren. Wenn nicht zu viel geändert werden muss, kann es mit Forumshilfe funktionieren.

Ein ganz gut passendes Beispiel ist
https://www.freecodecamp.org/news/h...tion-bar-with-dropdown-menu-using-javascript/ , wobei da auch noch zwei DD-Untermenüs zusätzlich dabei sind (könnte ich für die zweite Website brauchen).

Ein anderes hat ein ganz kurzes JavaScript und scheint nur das Allernötigste, das Togglen, damit zu machen:
https://xane514.medium.com/aria-controls-for-creating-a-mobile-navbar-6001012153a0

Meine Frage betrifft jetzt zunächst mal nur die Tatsache, dass es zwei solche Navs bei mir sind (auf jeder Seite).
Kann man das sauber trennen, mit zwei Codes, je für eine Nav einen? Weil wenn das nicht geht und man gleichzeitig zwei abhandeln muss, was dann wohl wieder Code-Änderungen/Komplikationen mit sich bringt, die kein Beispiel berücksichtigt, dann wird es wohl zu kompliziert.
Unabhängig davon wären mir zwei einfachere, sauber getrennte Codes für Nav1 und Nav2 auch aus Handhabungsgründen lieber.

Eine andere Sache, die evtl. das Ganze noch aufwendiger macht, ist ein Fallback für die User, die JS deaktiviert haben. Ich glaube nicht, dass meine wenig technikaffine Klientel das oft tut, aber sollte ich das noch berücksichtigen?

 

[Guru-Meditation]

ein Fallback für die User, die JS deaktiviert haben. Ich glaube nicht, dass meine wenig technikaffine Klientel das oft tut, aber sollte ich das noch berücksichtigen?

Man sollte eine Website bzw. wichtige Funktionen nicht von Sachen abhängig machen die ein Benutzer abschalten kann.
Wenn du es aber doch tust, musst du davon ausgehen das du einige Besucher/Interessenten verlierest, denn jeder der z.B. über eine SuMa zu dir kommt, kommt wegen dem Content, hat also Interesse, merkt dann aber, das die Seite ihm vorschreiben will wie er sein Gerät/Browser zu nutzen hat und kommt wahrscheinlich nie mehr wieder weil er das nicht einsieht oder warum auch immer..für mich sind solche Seiten Benutzerunfreundlich weil die meisten sehr schlecht gemachten oder gar keinen Fallback haben, sind aber meistens die WordPress 08/15 Webmaster die absolut keine Ahnung von der Materie haben und denen Besucher s..egal sind weil es nur um Klicks und Werbung also Kohle verdienen geht.

Du brauchst aber nicht unbedingt ein Fallback - mache ich auch nicht, eine einfache Info die dem Besucher sagt das technisch bedingt die Seite aktives JS benötigt und du JS für nichts anderes z.B. Tracker, Werbung usw. nutzt. Das sieht gut aus und ist erlich und der Besucher sieht das du ihn nicht vergessen hast..

 

[Martinus33]

@Guru-Meditation:
Ein einfacher Hinweis, ja, das klingt ganz in meinem Sinne. Es macht den User explizit darauf aufmerksam und der kann dann die bestmögliche Lösung selbst bewirken, indem er JS aktiviert.
Und bezüglich meines JS für den DD/Toggle-Button wäre dann ein komplizierender Faktor für den JS-Code hinfällig.

Die entscheidende Frage ist, wann und wie dieser Hinweis gegeben wird.

Fragst du wie bei normalen Fallbacks ab, ob JS zur Verfügung steht und wenn nicht, dann wird der Hinweis eingeblendet? Das hätte den Vorteil, dass ihn nur die bekommen, die es betrifft, braucht aber wie bei einem Fallback eine codetechnische Umsetzung.

Oder bekommt jeder Besucher nur einmalig beim ersten Besuch ähnlich dem verbreiteten Cookie-Hinweis ein Fenster mit dem Hinweis?

Eigentlich wäre das ein Fall für das title attribute des Buttons, aber den bekämen fast nur die Maus-User zu lesen, die Zugänglichkeit wäre viel zu schlecht.

 

[Rossie]

Die Grundfunktionalität eines Menüs lässt sich übrigens auch ohne JavaScript umsetzen. Man kann versteckte Checkboxen verwenden, um die Sichtbarkeit der Menüs/Untermenüs zu steuern.

 

[Martinus33]

@Rossie
Ich habe mich mit den Alternativen befasst, aber im Hinblick auf Accessibility, Usability, Stylbarkeit, Browsersupport und Zuverlässigkeit ist ein klickbarer HTML-Button + JavaScript (und aria-expanded) leider klar am besten.

Andernfalls hätte ich gern auf das einzige JS verzichtet, das die Sites brauchen und auf eine fast ebenso gute Alternative zurückgegriffen.

 

[Guru-Meditation]

Die entscheidende Frage ist, wann und wie dieser Hinweis gegeben wird.

Na wenn der User mit abgeschalteten JS kommt. dafür gibt es in HTML sowas:

<noscript>...</noscript>

Das sehen nur Browser die JS deaktiviert haben. Das kannst du dann mit position: fixed am oberen Rand der Seite quasi antackern und gut.
Der Benutzer merkt dann schnell das Sachen nicht oder nicht richtig auf der Seite funktionieren und ganz wichtig, wegen deinem Hinweis, auch warum. Und kann dann selbst entscheiden ob er JS einschaltet oder nicht. Das ist die einfachste Variante..ansonsten ein richtiges Fallback ohne Hinweis, aber das ist nicht so einfach und es gibt diverse Möglichkeiten...ich selbst spare mir diese eher unnötige Arbeit und gefrickel und gebe immer nur den Hinweis aus. Baue aber wichtige Sachen wie z.B. ein Menü usw. aber trotzdem mit CSS, das geht damit wunderbar...

 

[Martinus33]

Es reicht, wenn so ein noscript-tag mit einem Hinweissatz einfach nur vorhanden ist und der script-tag ganz unten auf der Seite gar kein JS hat, sondern nur auf eine externe JS-Datei verweist?

Die Browser wissen dann "JS wird gebraucht --> ich schau mal, ob bei mir JS aktiv ist
a) --> oh, ist deaktiviert --> ich muss den Inhalt des noscript -tags einblenden oder
b) --> ist aktiv --> Inhalt des noscript-tag nicht einblenden.

Da bei mir nur die Menüs im Smartphone-MQ JavaScript brauchen, würde ich den Hinweis wahrscheinlich lokal nur dort platzieren.

Ich vermute, der Hinweis wird dann als überlagerndes Fenster eingeblendet, so ähnlich wie beim title attribute? Das Layout ändern sollte sich dadurch nicht.

Baue aber wichtige Sachen wie z.B. ein Menü usw. aber trotzdem mit CSS, das geht damit wunderbar...

Ich habe die zwei oder drei Artikel zu diesem Thema nicht mehr im Detail im Gedächtnis und du wirst wissen, was du tust, aber speziell beim Thema Accessibility haben die CSS-Alternativen (checkbox und select, input, weiß nicht mehr) relevante Schwächen.