@@Michael53 > Dieses Navigationsmenü hab ich von einem Video nachgebaut Bau es lieber von einem Tutorial nach, das ich zu meinem verlinkten Beispiel geschrieben habe. Allerdings musst du dazu in die Zukunft reisen – ich hoffe, in nicht allzu ferne. 😉 > und es funktioniert auch so wie es soll. Für dich mag es das (gegenwärtig noch) tun. Für andere – insb. Nutzer, die auf Screenreader angewiesen sind – funktioniert es nicht. Die wissen ja nichts von dem Font-Awesome-Icon, und ein entsprechender Text fehlt. Außerdem wird die Schaltfläche nicht als Button, sondern als Checkbox angesagt, was zu Verwirrung führen dürfte. > Ich hab da einfach keine Ahnung wie man das am besten umsetzen kann. So wie in meinem gezeigten Beispiel. Bei dir wäre das so: ~~~html <nav> <button> <i class="fas fa-ellipsis-h"></i> <span class="visually-hidden">Menü öffnen/schließen</span> </button> <ul class="menu"> <li><a href="index.html">Home</a></li> <li><a href="#">Über mich</a></li> <li><a href="fotos.html">Fotos</a></li> <li><a href="#">Panoramen</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> ~~~ (Die fehlenden `li` hab ich korrigiert, die Verwendung des Iconfonts nicht.) Das JavaScript solltest du [von mir](https://codepen.io/gunnarbittersmann/pen/jYaRJM) übernehmen können. Die Stile für `.visually-hidden` (Element wird nicht visuell angezeigt, aber vom Screenreader vorgelesen) findest du auch in jenem Pen: ~~~css .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; white-space: nowrap; } ~~~ Statt „Menü öffnen/schließen“ könnte auch einfach nur „Menü“ reichen. Wenn du zwei getrennte Buttons „Menü öffnen“ und „Menü schließen“ haben willst, brauchst du ein zusätzliches `div`, in welches du die `ul` und den Schließen-Button hineinpackt, und müsstest das JavaScript evtl. etwas anpassen. Wenn du das Menü auch auf großen Viewport nicht ausklappen willst (warum eigentlich nicht?), die *media queries*{:@en} weglassen. LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling

@@Michael53 > Dieses Navigationsmenü hab ich von einem Video nachgebaut Bau es lieber von einem Tutorial nach, das ich geschrieben zu meinem verlinkten Beispiel habe. Allerdings musst du dazu in die Zukunft reisen – ich hoffe, in nicht allzu ferne. 😉 > und es funktioniert auch so wie es soll. Für dich mag es das (gegenwärtig noch) tun. Für andere – insb. Nutzer, die auf Screenreader angewiesen sind – funktioniert es nicht. Die wissen ja nichts von dem Font-Awesome-Icon, und ein entsprechender Text fehlt. Außerdem wird die Schaltfläche nicht als Button, sondern als Checkbox angesagt, was zu Verwirrung führen dürfte. > Ich hab da einfach keine Ahnung wie man das am besten umsetzen kann. So wie in meinem gezeigten Beispiel. Bei dir wäre das so: ~~~html <nav> <button> <i class="fas fa-ellipsis-h"></i> <span class="visually-hidden">Menü öffnen/schließen</span> </button> <ul class="menu"> <li><a href="index.html">Home</a></li> <li><a href="#">Über mich</a></li> <li><a href="fotos.html">Fotos</a></li> <li><a href="#">Panoramen</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> ~~~ (Die fehlenden `li` hab ich korrigiert, die Verwendung des Iconfonts nicht.) Das JavaScript solltest du [von mir](https://codepen.io/gunnarbittersmann/pen/jYaRJM) übernehmen können. Die Stile für `.visually-hidden` (Element wird nicht visuell angezeigt, aber vom Screenreader vorgelesen) findest du auch in jenem Pen: ~~~css .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; white-space: nowrap; } ~~~ Statt „Menü öffnen/schließen“ könnte auch einfach nur „Menü“ reichen. Wenn du zwei getrennte Buttons „Menü öffnen“ und „Menü schließen“ haben willst, brauchst du ein zusätzliches `div`, in welches du die `ul` und den Schließen-Button hineinpackt, und müsstest das JavaScript evtl. etwas anpassen. Wenn du das Menü auch auf großen Viewport nicht ausklappen willst (warum eigentlich nicht?), die *media queries*{:@en} weglassen. LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling

@@Michael53 > Dieses Navigationsmenü hab ich von einem Video nachgebaut Bau es lieber von einem Tutorial nach, das ich geschrieben zu meinem verlinkten Beispiel habe. Allerdings musst du dazu in die Zukunft reisen – ich hoffe, in nicht allzu ferne. 😉 > und es funktioniert auch so wie es soll. Für dich mag es das (gegenwärtig noch) tun. Für andere – insb. Nutzer, die auf Screenreader angewiesen sind – funktioniert es nicht. Die wissen ja nichts von dem Font-Awesome-Icon, und ein entsprechender Text fehlt. Außerdem wird die Schaltfläche nicht als Button, sondern als Checkbox angesagt, was zu Verwirrung führen dürfte. > Ich hab da einfach keine Ahnung wie man das am besten umsetzen kann. So wie in meinem gezeigten Beispiel. Bei dir wäre das so: ~~~html <nav> <button> <i class="fas fa-ellipsis-h"></i> <span class="visually-hidden">Menü öffnen/schließen</span> </button> <ul class="menu"> <li><a href="index.html">Home</a></li> <li><a href="#">Über mich</a></li> <li><a href="fotos.html">Fotos</a></li> <li><a href="#">Panoramen</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> ~~~ Das JavaScript solltest du [von mir](https://codepen.io/gunnarbittersmann/pen/jYaRJM) übernehmen können. Die Stile für `.visually-hidden` (Element wird nicht visuell angezeigt, aber vom Screenreader vorgelesen) findest du auch in jenem Pen: ~~~css .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden; white-space: nowrap; } ~~~ Statt „Menü öffnen/schließen“ könnte auch einfach nur „Menü“ reichen. Wenn du zwei getrennte Buttons „Menü öffnen“ und „Menü schließen“ haben willst, brauchst du ein zusätzliches `div`, in welches du die `ul` und den Schließen-Button hineinpackt, und müsstest das JavaScript evtl. etwas anpassen. Wenn du das Menü auch auf großen Viewport nicht ausklappen willst (warum eigentlich nicht?), die *media queries*{:@en} weglassen. LLAP 🖖 -- *„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“ „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“* —Marc-Uwe Kling