TIL wie man ein Menü serviert

Workshop zu einem barrierefreien Hamburger-Menü

Codepens:
❌ https://codepen.io/gunnarbittersmann/pen/MWepOza

❌ https://codepen.io/gunnarbittersmann/pen/gOrQWYw

❌ https://codepen.io/gunnarbittersmann/pen/LYNXWBa

❌ https://codepen.io/gunnarbittersmann/pen/xxVQrvp

⚠️ https://codepen.io/gunnarbittersmann/pen/abdMLKJ

✅ https://codepen.io/gunnarbittersmann/pen/wvGMZjd

✅ https://codepen.io/gunnarbittersmann/pen/RwaMoWd

Transcript

1. wie man ein Menü serviert TIL
2. Damast قشمد
4. DAMAST DEUTSCHES DAMAST- & FROTTIERMUSEUM GROẞSCHÖNAU
5. DALLAS DEUTSCHES DAMAST- & FROTTIERMUSEUM GROẞSCHÖNAU
7. • interaktive Elemente (tastaturbedienbar, werden von Screenreadern mit ihrer Rolle angesagt): • <a> für Links zu anderen Seiten • <button> für Aktionen auf der Seite • Verknüpfung von Button und Menü: • <button> zum Öffnen/Schließen gehört ins <nav>-Element • aria-controls verknüpft Button mit Menü • aria-expanded gibt aktuellen Zustand an
8. • Tastatursteuerung: • bei geschlossenem Menü dürfen Links nicht erreichbar sein: tabindex="-1" für jeden Link oder hidden-Attribut fürs Menü bzw. display: none oder visibility: hidden • Escape-Taste schließt Menü • beim Verlassen des Menüs muss Menü schließen oder Focus trap (Tastaturfokus innerhalb des Menüs halten)
9. Oberlausitzer Gericht TIL: Teichlmauke