TIL wie man ein Menü serviert

051dbe29a972707cde167602b38c9778?s=47 Gunnar Bittersmann
November 02, 2020
Programming
0
8

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

051dbe29a972707cde167602b38c9778?s=128

Gunnar Bittersmann

November 02, 2020
Tweet

More Decks by Gunnar Bittersmann

See All by Gunnar Bittersmann
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
8
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
1
20
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
27
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
2
16
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
23
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
47
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
58
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
45
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
20

Other Decks in Programming

See All in Programming
35761e3936deba2f8189c2d20982c771?s=48 getify
1
550
9e9eb825c69d719f2d3c32bdd3bc971e?s=48 atp
1
250
3f2e97dc4e6a5daaf1cb8a406c533176?s=48 knqyf263
2
370
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
2
280
0eba807ea367a2b648480d20f52d3af3?s=48 haco
0
210
75cf8176bf14811428f77d8fe737f0d5?s=48 konstantin_diener
0
110
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
0
150
0227f6274b8a6cce078d7f8a91460c41?s=48 eminetto
4
350
B1bddcb899ec3060fe9913f3cb70dbb6?s=48 lmt_swallow
7
1.9k
9e9eb825c69d719f2d3c32bdd3bc971e?s=48 atp
1
180
7c9b8b368924556d8642bdaed3ded1f5?s=48 danilop
1
230
827dbd19908541482bac51ace8b86426?s=48 anchorcable
1
130

Featured

See All Featured
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
255
19k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
284
18k
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
155
6.3k
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
5
570
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
190
17k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
295
39k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
186
14k
B6a8f005f39d23ffc930508ac9da68b9?s=48 vanstee
116
4.8k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
251
11k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
258
16k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
52
2.7k

Transcript

  1. wie man ein Menü serviert TIL

  2. Damast قشمد

  3. None

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

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

  6. None

  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