Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TIL wie man ein Menü serviert

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

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
7
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
5
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
3
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
8
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
48
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
16
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
1
34
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
36
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
2
24

Other Decks in Programming

See All in Programming
F458220c21b5a3508485f7eddaa26cca?s=48 onsd
5
1.9k
28410ec97da16f250a154d9b335c8a32?s=48 quannt
1
130
Ff07ba188f0dccc30e7a90a5ebd1a386?s=48 taogawa
0
140
A0aae1297a0593c1316abdcdb4131e3a?s=48 toedter
11
12k
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
0
170
Df3a0444cb4726fd231a5d5ea4fe0a34?s=48 hiddenest12
0
290
C2abb398ab4bf22ad488d050ffddbd1c?s=48 tuka
1
620
15ea8d31e84f0b229ebd4aea87f02d30?s=48 canisterism
0
130
B49933741d74e122bc1314b2975e9fc9?s=48 mrtc0
1
330
069a861584701a8b5f72a838bd7e0f2e?s=48 jschaedl
2
140
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
1.4k
1a517fb4f2fe1ad4c6bbfc0cbb17ba10?s=48 kasai441
0
240

Featured

See All Featured
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
81
3.5k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
195
15k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
192
17k
E43f8dfd01057f8304f5f8fb9a294d7d?s=48 jeffersonlam
330
16k
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
347
20k
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
402
20k
11c84dff30266b907714802088852677?s=48 jasonvnalue
82
8.2k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
120k
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
73
270k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
502
36k
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
495
110k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
193
8.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