mit java-script class ändern

[Gunnar Bittersmann]

@@einsiedler

.js-enabled [aria-expanded="false"] + .nav-group { display:none !important;}

.js-disabled [aria-expanded="false"] + .nav-group { display:block !important;}

Zwischen diesen beiden classes möchte ich umzwitschen

Nei-en. Letzteres ist wohl grundverkehrt, wenn .navgroup sichtbar ist, aber das aria-expanded-Attribut des zugehörigen Buttons angibt, dass es nicht sichtbar ist. Das dürfte etliche Screenreader-Nutzer verwirren.

Wenn JavaScript nicht ausgeführt wird, sollte das aria-expanded-Attribut nicht den Wert "false" haben, sondern "undefined". [WAI-ARIA] Oder gar nicht vorhanden sein. Das hieße also: aria-expanded erst mit JavaScript auf "true" setzen.

Allerdings sind die Buttons, wenn JavaScript nicht ausgeführt wird, ohne Funktion. Dann sollten sie aber gar nicht zu sehen sein: <button hidden="">. (Wenn die Buttons hidden sind, könnten sie auch aria-expanded="true" haben.) Mit JavaScript wird das hidden-Attribut entfernt.

Oder die Buttons werden mit CSS display: none ausgeblendet (und wenn JavaScript läuft, eingeblendet).

Was du nicht brauchst: zwei Klassen js-enabled und js-disabled. Eine reicht. Mit JavaScript setzst du js-enabled. Ohne JavaScript ist die Klasse nicht da.

.js-enabled [aria-expanded="false"] + .nav-group { display:none !important;} wie gehabt. Die andere Regel brauchst du nicht.

LLAP 🖖