a11y vertiefung: keyboard-demo, input-devices, mdn-links vereinheitlicht
This commit is contained in:
178
slides/223015c/assets/demos/keyboard-a11y.html
Normal file
178
slides/223015c/assets/demos/keyboard-a11y.html
Normal file
@@ -0,0 +1,178 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tastatur-Navigation</title>
|
||||
<style>
|
||||
html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
|
||||
body { padding: 24px; display: inline-block; }
|
||||
|
||||
.kb {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 12px;
|
||||
align-items: end;
|
||||
}
|
||||
.main { display: flex; flex-direction: column; gap: 4px; }
|
||||
.row { display: flex; gap: 4px; }
|
||||
.nav { display: grid; grid-template-columns: repeat(3, 42px); gap: 4px; }
|
||||
|
||||
.k {
|
||||
height: 38px;
|
||||
min-width: 38px;
|
||||
padding: 0 8px;
|
||||
border: 1.5px solid #d1d5db;
|
||||
border-radius: 5px;
|
||||
background: #f9fafb;
|
||||
color: #cbd5e1;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.45;
|
||||
}
|
||||
.k.active {
|
||||
background: #fce7f3;
|
||||
border-color: #d63384;
|
||||
color: #7c2d12;
|
||||
opacity: 1;
|
||||
box-shadow: 0 2px 0 #d63384, 0 3px 6px rgba(214,51,132,0.18);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.k.tab { min-width: 64px; }
|
||||
.k.caps { min-width: 74px; }
|
||||
.k.shift { min-width: 92px; }
|
||||
.k.shift-r { min-width: 110px; }
|
||||
.k.enter { min-width: 84px; }
|
||||
.k.backspace { min-width: 78px; }
|
||||
.k.space { flex: 1; min-width: 260px; height: 38px; }
|
||||
.k.mod { min-width: 48px; }
|
||||
.k.mod-space { min-width: 48px; }
|
||||
.k.arrow { height: 38px; min-width: 38px; }
|
||||
|
||||
.legend {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding-left: 12px;
|
||||
font-size: 0.9rem;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
.legend .item { display: flex; align-items: center; gap: 10px; }
|
||||
.legend .mini {
|
||||
display: inline-flex;
|
||||
min-width: 32px;
|
||||
height: 28px;
|
||||
padding: 0 7px;
|
||||
border-radius: 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fce7f3;
|
||||
border: 1.5px solid #d63384;
|
||||
color: #7c2d12;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 2px 0 #d63384;
|
||||
}
|
||||
.legend .text { font-size: 0.88rem; line-height: 1.2; }
|
||||
.legend .text b { color: #d63384; }
|
||||
|
||||
.title {
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
color: #1a1a2e;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="kb">
|
||||
<div class="main">
|
||||
<!-- Row 1: Function/digit -->
|
||||
<div class="row">
|
||||
<div class="k">`</div>
|
||||
<div class="k">1</div><div class="k">2</div><div class="k">3</div><div class="k">4</div>
|
||||
<div class="k">5</div><div class="k">6</div><div class="k">7</div><div class="k">8</div>
|
||||
<div class="k">9</div><div class="k">0</div>
|
||||
<div class="k">-</div><div class="k">=</div>
|
||||
<div class="k backspace">⌫</div>
|
||||
</div>
|
||||
<!-- Row 2: Tab QWERTY -->
|
||||
<div class="row">
|
||||
<div class="k tab active">⇥ Tab</div>
|
||||
<div class="k">Q</div><div class="k">W</div><div class="k">E</div><div class="k">R</div>
|
||||
<div class="k">T</div><div class="k">Y</div><div class="k">U</div><div class="k">I</div>
|
||||
<div class="k">O</div><div class="k">P</div>
|
||||
<div class="k">[</div><div class="k">]</div><div class="k">\</div>
|
||||
</div>
|
||||
<!-- Row 3: Caps ASDF Enter -->
|
||||
<div class="row">
|
||||
<div class="k caps">Caps</div>
|
||||
<div class="k">A</div><div class="k">S</div><div class="k">D</div><div class="k">F</div>
|
||||
<div class="k">G</div><div class="k">H</div><div class="k">J</div><div class="k">K</div>
|
||||
<div class="k">L</div>
|
||||
<div class="k">;</div><div class="k">'</div>
|
||||
<div class="k enter active">↵ Enter</div>
|
||||
</div>
|
||||
<!-- Row 4: Shift ZXCV Shift -->
|
||||
<div class="row">
|
||||
<div class="k shift active">⇧ Shift</div>
|
||||
<div class="k">Z</div><div class="k">X</div><div class="k">C</div><div class="k">V</div>
|
||||
<div class="k">B</div><div class="k">N</div><div class="k">M</div>
|
||||
<div class="k">,</div><div class="k">.</div><div class="k">/</div>
|
||||
<div class="k shift-r active">⇧ Shift</div>
|
||||
</div>
|
||||
<!-- Row 5: Ctrl/Alt/Space -->
|
||||
<div class="row">
|
||||
<div class="k mod">Ctrl</div>
|
||||
<div class="k mod">⌘</div>
|
||||
<div class="k mod">Alt</div>
|
||||
<div class="k space active">␣ Leertaste</div>
|
||||
<div class="k mod">Alt</div>
|
||||
<div class="k mod">⌘</div>
|
||||
<div class="k mod">Ctrl</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arrow cluster -->
|
||||
<div class="nav">
|
||||
<div></div>
|
||||
<div class="k arrow active">↑</div>
|
||||
<div></div>
|
||||
<div class="k arrow active">←</div>
|
||||
<div class="k arrow active">↓</div>
|
||||
<div class="k arrow active">→</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 28px; margin-top: 26px;">
|
||||
<div class="legend">
|
||||
<div class="title">Navigation</div>
|
||||
<div class="item">
|
||||
<span class="mini">⇥</span>
|
||||
<span class="text"><b>Tab</b> – zum nächsten fokussierbaren Element</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="mini">⇧⇥</span>
|
||||
<span class="text"><b>Shift + Tab</b> – ein Element zurück</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="mini">↑↓←→</span>
|
||||
<span class="text"><b>Pfeiltasten</b> – scrollen, innerhalb Listen/Menüs navigieren</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<div class="title">Aktion</div>
|
||||
<div class="item">
|
||||
<span class="mini">↵</span>
|
||||
<span class="text"><b>Enter</b> – Link/Button aktivieren</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="mini">␣</span>
|
||||
<span class="text"><b>Leertaste</b> – Checkbox toggle, Dropdown öffnen, scrollen</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user