Offcanvas-Menü für Mobile
Das Offcanvas ersetzt das aufklappende Navbar-Menü auf kleinen Bildschirmen. Aufbau, Fokusfalle und Schließen per Tastatur.
Die eingeklappte Navbar von Bootstrap schiebt das Menü nach unten auf. Das funktioniert gut, solange die Navigation kurz ist – und schlecht, sobald sie länger wird als der Bildschirm hoch ist. Das…
Interaktion#Tag 2
Aktiven Menüpunkt korrekt auszeichnen
aria-current statt nur einer CSS-Klasse: warum der aktive Zustand auch für Screenreader erkennbar sein muss.
Der aktive Menüpunkt wird üblicherweise über eine Klasse hervorgehoben – fett, andersfarbig, unterstrichen. Wer die Seite nicht sieht, bekommt davon nichts mit. Die Ergänzung ist ein Attribut:…
InteraktionQualität#Tag 2
Die Navbar ist mehr als ein Menü
Eine Navbar bündelt Logo, Hauptnavigation, Suche und Sprachumschalter in einer Leiste, die auf jedem Gerät funktionieren muss. Unterhalb des gewählten Breakpoints klappt sie zusammen – entweder als Collapse-Bereich oder als Offcanvas. Beide Varianten brauchen einen erreichbaren Umschalt-Button und einen sichtbaren Fokuszustand.