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
40

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
6
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
7
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
8
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
7
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
7
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
13
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
4
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
6
051dbe29a972707cde167602b38c9778?s=48 gunnarbittersmann
0
10

Other Decks in Programming

See All in Programming
Ae7a5166a7b7776ffdd5676c2d6ab42f?s=48 aseiide
1
240
D3be793aaf76ed1915295001712ce0f1?s=48 jrfk
0
310
Fc59401781a26b10f5d4fc5b758fb3b7?s=48 andrewradev
0
100
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
220
30e63a1ad21d3944b288fc3d33d1e920?s=48 amrrs
0
140
64fb973c47087ece7fb9b45d5b8593a4?s=48 yag_ays
7
5.3k
C69a66be00bc04081feb1674c9085ca2?s=48 n_makoto
2
250
72a2082c6a4dd79ad68befb3db911616?s=48 mraible
PRO
2
330
Cb504213a5310e01faabbc0b3fca3d39?s=48 napple29
0
160
44df43ecb9d8ae00cafee6b804db3fcd?s=48 kentatada
2
190
B3b2139e4f2c0eca4efe2379fcebc1c5?s=48 afilina
PRO
1
470
E7526ec3e801f8ba99f6746498a154a6?s=48 rakyll
1
1.3k

Featured

See All Featured
5f83ef806155b403c3393160ce51f955?s=48 jlugia
218
16k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.6k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
29
5.1k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
263
11k
245cee81a9c424266e5e401d844ea881?s=48 lara
596
62k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
73
7.7k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
35
3.8k
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
25
930
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
235
960k
Af6a12710770ad9a7cfd08c97efd40d3?s=48 pedronauck
655
120k
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
633
49k

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