public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y vertiefung: keyboard-demo, input-devices, mdn-links vereinheitlicht

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-21 20:58:52 +02:00
parent cedda338df
commit 67857b9bfd
18 changed files with 306 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
slides/223015c/assets/demos/contrast-levels.html
View File

@@ -4,11 +4,11 @@
<meta charset="UTF-8">
<title>Kontrast-Stufen</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; margin: 0; }
body { font-family: system-ui, sans-serif; padding: 1.6rem; margin: 0; }
.row {
background: #fff;
padding: 14px 16px;
margin-bottom: 10px;
padding: 22px 20px;
margin-bottom: 14px;
border-radius: 6px;
border: 1px solid #e5e7eb;
display: flex;
@@ -17,7 +17,7 @@
gap: 14px;
}
.sample {
font-size: 1.2rem;
font-size: 1.5rem;
font-weight: 600;
flex: 1;
}

BIN
slides/223015c/assets/demos/contrast-levels.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 73 KiB

After

Width:  |  Height:  |  Size: 76 KiB

178
slides/223015c/assets/demos/keyboard-a11y.html Normal file
View 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>

BIN
slides/223015c/assets/demos/keyboard-a11y.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 104 KiB

BIN
slides/223015c/assets/eye-tracking.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
slides/223015c/assets/hdm-homepage-16x9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 MiB

BIN
slides/223015c/assets/hdm-homepage-qr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 459 B

BIN
slides/223015c/assets/hdm-homepage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 MiB

BIN
slides/223015c/assets/hdm-link-preview.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
slides/223015c/assets/keyboard.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 MiB

BIN
slides/223015c/assets/mouse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 MiB

BIN
slides/223015c/assets/ps-controller.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
slides/223015c/assets/switch-microsoft.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
slides/223015c/assets/wave-tab-order-16x9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
slides/223015c/assets/wave-tab-order-qr-only.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 550 B

BIN
slides/223015c/assets/wave-tab-order-qr.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 MiB

BIN
slides/223015c/assets/web-disability-simulator.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB