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.

[Felix Riesterer]

Liebe Anne,

ich verstehe Dein Problem nicht ganz. Sowohl das button-Element, als auch das ul-Element lassen sich mittels geeigneter CSS-Regeln positionieren und ausrichten. Suchst Du nach der Erlaubnis von Gunnars Beispiel abweichende Regeln einzusetzen, oder fragst Du konkret nach den für Deine Zielsetzung benötigten Regeln?

Liebe Grüße

Felix Riesterer

[Anne Kaffeekanne]

Hallo,

ich wiederum verstehe deine Frage nicht ganz, habe mein Anliegen eigentlich recht unmissverständlich dargelegt:

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).

Im Endeffekt geht es um eine Möglichkeit, die Elemente genau positionieren zu können, ohne dabei [auch unter Berücksichtigung der Aspekte der Accessibility] semantische Regeln zu brechen, was die Textfluss-Lösung [text-align: justify] nicht zuzulassen scheint (bitte mich eines Besseren belehren, sollte ich da etwas übersehen haben!).

Fasse ich das Menü zusammen nach Schema:

<h1>ÜBERSCHRIFT</h1>
<nav>
  <button>Ich klappe das Menü auf und zu!</button>
  <ul>
    <li>Menüpunkt</li>
    <li>Menüpunkt</li>
  </ul>
</nav>

...und will ich nun, dass sich <h1> und <button> eine "Zeile" teilen, während die klappbaren Menüpunkte die gesamte Breite des Dokuments einnehmen, so kann ich das nur nach der von Gunnar erdachten Methode mit text-align: justify machen (die leider nicht von allen Browsern visuell sauber umgesetzt wird), bzw. könnte ich das button-Element mit position: absolute komplett aus dem Fluss nehmen - übersehe ich vielleicht eine offensichtliche dritte Möglichkeit?

Funktionieren würde es nach Schema:

<h1>ÜBERSCHRIFT</h1>
<button>Ich klappe das Menü auf und zu!</button>
<nav> 
  <ul>
    <li>Menüpunkt</li>
    <li>Menüpunkt</li>
  </ul>
</nav>

<!-- Drei separate Einheiten: <h1>, <button>, <nav> -->

...wäre aber eben semantisch nicht mehr sauber, da button ja eigentlich Teil der Navigation ist...

Danke für eure Ideen! LG.

[Gunnar Bittersmann]

@@Anne Kaffeekanne

...und will ich nun, dass sich <h1> und <button> eine "Zeile" teilen, während die klappbaren Menüpunkte die gesamte Breite des Dokuments einnehmen,

Deshalb ist ul auf display: inline-flex; width: 100% gesetzt, damit h1, button und ul Inline-Elemente sind, wobei ul eine ganze Zeile beansprucht und deshalb h1 und button links bzw. rechts ausgerichtet sind.

Damit das auch so bleibt, wird ul beim Ausblenden nicht auf display: none gesetzt, sondern auf visibility: hidden und die li auf display: none. (Ich denke, das war der Plan; ich hab das aber jetzt nur überflogen.)

so kann ich das nur nach der von Gunnar erdachten Methode mit text-align: justify machen (die leider nicht von allen Browsern visuell sauber umgesetzt wird)

?? In welchen denn nicht?

bzw. könnte ich das button-Element mit position: absolute komplett aus dem Fluss nehmen

Wäre denkbar, wenn die Beschriftung nicht „Ich klappe das Menü auf und zu!“ ist 😉, sondern „Menü“ oder gar nur ein Icon (mit Alternativtext).

(Erwähnte ich schon, dass ich das Hamburger Icon für Menüs für ungeeignet halte?)

In dem Fall kannst du die Breite des Buttons ungefähr abschätzen und der Überschrift entsprechendes padding geben, damit der Button die Überschrift nicht überdeckt.

übersehe ich vielleicht eine offensichtliche dritte Möglichkeit?

Grid – wenn Browser denn display: contents vernünftig umsetzen würden.

...wäre aber eben semantisch nicht mehr sauber, da button ja eigentlich Teil der Navigation ist...

Richtig, der button muss sich im nav-Element befinden, damit er von blinden Screenreader-Nutzern beim Anwählen der Navigation auch gefunden wird.

LLAP 🖖