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
   

   View Slide

2. Damast
   قشمد
   

   View Slide

3. View Slide

4. DAMAST
   DEUTSCHES DAMAST- & FROTTIERMUSEUM GROẞSCHÖNAU
   

   View Slide

5. DALLAS
   DEUTSCHES DAMAST- & FROTTIERMUSEUM GROẞSCHÖNAU
   

   View Slide

6. View Slide

7. • interaktive Elemente
   (tastaturbedienbar, werden von Screenreadern mit ihrer Rolle angesagt):
   • für Links zu anderen Seiten
   • für Aktionen auf der Seite
   • Verknüpfung von Button und Menü:
   • zum Öffnen/Schließen gehört ins -Element
   • aria-controls verknüpft Button mit Menü
   • aria-expanded gibt aktuellen Zustand an
   

   View Slide

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)
   

   View Slide

9. Oberlausitzer Gericht
   TIL: Teichlmauke
   

   View Slide