@@FrankMe > ~~~HTML, bad > <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > </button> > … > <div class="collapse navbar-collapse navbar-right" id="myNavbar" >... > ~~~ Das ist nicht die Naviagtion. Das ist ein Button. Und zwar ein unsinniger: * Was sollen die 3 `span`s? Ein Hamburger-Icon zeichen? Ernsthaft? Zum Zeichnen von Icons gibt es SVG. Als Hamburger-Icon können auch die Zeichen ≡ U+2261 IDENTICAL TO oder ☰ U+2630 TRIGRAM FOR HEAVEN herhalten. * Der Button hat keinerlei Beschriftung. Muss er aber haben. Wie sollen sonst Nutzer, die den Seiteninhalt nicht visuell erfassen, erfahren, was der Button bewirken soll?verstanden wird. Denkbar wäre sowas: ~~~HTML <button> <span aria-hidden="true">☰</span> <span class="visually-hidden">Menü</span> </button> ~~~ Die Beschriftung darf nur *visuell* versteckt werden. CSS dazu in [How-to: Hide Content](http://a11yproject.com/posts/how-to-hide-content/){:@en} Experten raten aber davon ab, weil (je nach Zielgruppe) das Hamburger-Icon allein nicht als Symbol für „Navigation öffnen“ verstanden wird. Besser Icon und Text. Das Icon kann man auch im CSS umsetzen, was auch die Möglichkeit eröffnet, das Hamburger-Icon im geöffneten Zustand durch ein `×` zu ersetzen, wie in meinem Beispiel: [responsive menu](https://codepen.io/gunnarbittersmann/pen/MJYeod){:@en} (bei schmalem Viewport) --- > **Warum wird aber hart zu den jeweiligen Ankern geschaltet statt sanft gescrollt?** Weil das Script nur bei Links im Navigationsmenü wirkt: > ~~~JavaScript > $("#myNavbar a").on('click', function(event) { > ~~~ LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@FrankMe > ~~~HTML, bad > <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > </button> > … > <div class="collapse navbar-collapse navbar-right" id="myNavbar" >... > ~~~ Das ist nicht die Naviagtion. Das ist ein Button. Und zwar ein unsinniger: * Was sollen die 3 `span`s? Ein Hamburger-Icon zeichen? Ernsthaft? Zum Zeichnen von Icons gibt es SVG. Als Hamburger-Icon können auch die Zeichen ≡ U+2261 IDENTICAL TO oder ☰ U+2630 TRIGRAM FOR HEAVEN herhalten. * Der Button hat keinerlei Beschriftung. Muss er aber haben. Wie sollen sonst Nutzer, die den Seiteninhalt nicht visuell erfassen, erfahren, was der Button bewirken soll?verstanden wird. Denkbar wäre sowas: ~~~HTML <button> <span aria-hidden="true">☰</span> <span class="visually-hidden">Menü</span> </button> ~~~ Die Beschriftung darf nur *visuell* versteckt werden. CSS dazu in [How-to: Hide Content](http://a11yproject.com/posts/how-to-hide-content/){:@en} Experten raten aber davon ab, weil (je nach Zielgruppe) das Hamburger-Icon allein nicht als Symbol für „Navigation öffnen“ verstanden wird. Besser Icon und Text. Das Icon kann man auch im CSS umsetzen, wie in meinem Beispiel: [responsive menu](https://codepen.io/gunnarbittersmann/pen/MJYeod){:@en} (bei schmalem Viewport) --- > **Warum wird aber hart zu den jeweiligen Ankern geschaltet statt sanft gescrollt?** Weil das Script nur bei Links im Navigationsmenü wirkt: > ~~~JavaScript > $("#myNavbar a").on('click', function(event) { > ~~~ LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@FrankMe > ~~~HTML, bad > <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > </button> > … > <div class="collapse navbar-collapse navbar-right" id="myNavbar" >... > ~~~ Das ist nicht die Naviagtion. Das ist ein Button. Und zwar ein unsinniger: * Was sollen die 3 `span`s? Ein Hamburger-Icon zeichen? Ernsthaft? Zum Zeichnen von Icons gibt es SVG. Als Hamburger-Icon können auch die Zeichen ≡ U+2261 IDENTICAL TO oder ☰ U+2630 TRIGRAM FOR HEAVEN herhalten. * Der Button hat keinerlei Beschriftung. Muss es aber haben. Wie sollen sonst Nutzer, die den Seiteninhalt nicht visuell erfassen, erfahren, was der Button bewirken soll?verstanden wird. Denkbar wäre sowas: ~~~HTML <button> <span aria-hidden="true">☰</span> <span class="visually-hidden">Menü</span> </button> ~~~ Die Beschriftung darf nur *visuell* versteckt werden. CSS dazu in [How-to: Hide Content](http://a11yproject.com/posts/how-to-hide-content/){:@en} Experten raten aber davon ab, weil (je nach Zielgruppe) das Hamburger-Icon allein nicht als Symbol für „Navigation öffnen“ verstanden wird. Besser Icon und Text. Das Icon kann man auch im CSS umsetzen, wie in meinem Beispiel: [responsive menu](https://codepen.io/gunnarbittersmann/pen/MJYeod){:@en} (bei schmalem Viewport) --- > **Warum wird aber hart zu den jeweiligen Ankern geschaltet statt sanft gescrollt?** Weil das Script nur bei Links im Navigationsmenü wirkt. LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)