Semantisch saubere Navigationsstruktur 2.0

[Anne Kaffeekanne]

Hallo,

Was bisher geschah:

Ich stellte Ende Mai eine Anfrage bezüglich einer im Sinne der Barrierefreiheit semantisch sinnvollen sowie effektiv navigierbaren Navigationsstruktur und wurde damals für meinen Checkbox-Hack Ansatz [zurecht] ein wenig verrissen:

Hier der ursprüngliche Beitrag (für das Verständnis nicht essenziell notwendig).

Danke nochmal an Gunnar Bittersmann, der nicht nur auf weiterführendes Material zu dem Thema verwies, sondern ein Beispiel gleich frei Haus mitlieferte:

Beispiel einer barrierefreien responsiven Auf-/Zuklapp-Navigationsstruktur

***Mein "Problem" damit:***

In dieser Umsetzung schiebt sich der Auf-/Zuklapp-Button des Klappmenüs auf Höhe der Überschrift *Responsive Design* an den rechten Seitenrand, während das Menü selbst darunter positioniert ist, dieser Effekt wird mit ***text-align: justify*** erreicht. 

Das heißt: da das Menü (*ul li*) zu "groß" ist, um sich rechts neben den Button zu schieben, bleibt es, wie gewollt, sozusagen unter Überschrift und Button.

Nun erscheint mir auch diese Umsetzung ein wenig hacky und wird auch nicht von allen gängigen Browsern sauber implementiert (Edge, etc. positionieren den button eher mittig als - wie eigentlich gewünscht - am rechten Rand).

Als Teil der Navigationsstruktur sollte der Button entsprechend in einem <NAV>-Element mit dem Menü zusammengefasst werden. Dadurch lässt sich eine alternative Positionierung am rechten Rand bei einem gleichzeitig die darunter zur Verfügung stehende volle Breite ausfüllenden Menü aber nur durch ***position:absolute*** realisieren (dadurch hätte ich auch mehr Kontrolle über die exakte Positionierung des Buttons).

Was meint ihr dazu?

Hier nochmals kurz, grafisch aufbereitet, das gewünschte Endresultat:

ÜBERSCHRIFT | BUTTON


M E N Ü P U N K T  1


M E N Ü P U N K T  2


ETC.



Danke!
LG.