Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
67857b9bfd | ||
|
|
cedda338df | ||
|
|
bfe7f3576a | ||
|
|
6b21b45e01 | ||
|
|
aeaeed6867 | ||
|
|
72b7d51af9 |
No files matched your search
@@ -70,13 +70,13 @@ section.aufgabe footer {
|
||||
}
|
||||
section.erklaerung {
|
||||
font-size: 1.1rem;
|
||||
background: repeating-linear-gradient(
|
||||
/**background: repeating-linear-gradient(
|
||||
135deg,
|
||||
#fce4ec,
|
||||
#fce4ec 40px,
|
||||
#fff 40px,
|
||||
#fff 80px
|
||||
) !important;
|
||||
) !important;**/
|
||||
}
|
||||
@media print {
|
||||
section.erklaerung {
|
||||
@@ -1195,30 +1195,22 @@ Formattierungssprache
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _backgroundColor: #fce4ec -->
|
||||
|
||||
# HTML Metadaten
|
||||
|
||||

|
||||
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title>Im Browsertab als Überschrift sichtbar</title>
|
||||
|
||||
<meta name="description" content="" />
|
||||
|
||||
<meta name="og:image" content="https://...." />
|
||||
</head>
|
||||
|
||||
...
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
* <small>*Webseiten werden nicht nur von Menschen besucht, sondern auch von Suchmaschinen, Programmen, Bots etc.*</small>
|
||||
* <small>*Metadaten helfen bspw. auch Screen-Readern beim "Verstehen" der Inhalte*</small>
|
||||
<small>*Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.*</small>
|
||||
|
||||
<!--
|
||||
HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster
|
||||
@@ -1388,7 +1380,7 @@ Accessibility ist eingebaut
|
||||
</details>
|
||||
```
|
||||
|
||||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
|
||||
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details)</small>
|
||||
|
||||
---
|
||||
|
||||
@@ -1403,7 +1395,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details
|
||||
</details>
|
||||
```
|
||||
|
||||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box
|
||||
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box)</small>
|
||||
|
||||
---
|
||||
|
||||
@@ -1416,7 +1408,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstel
|
||||
<button>Add to favorites</button>
|
||||
```
|
||||
|
||||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
|
||||
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button)</small>
|
||||
|
||||
---
|
||||
|
||||
@@ -1431,7 +1423,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button
|
||||
size="10" />
|
||||
```
|
||||
|
||||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
|
||||
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input)</small>
|
||||
|
||||
---
|
||||
|
||||
@@ -1448,7 +1440,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input
|
||||
</dialog>
|
||||
```
|
||||
|
||||
https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
|
||||
<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog)</small>
|
||||
|
||||
|
||||
---
|
||||
@@ -1456,13 +1448,61 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
|
||||
<!-- _class: lead -->
|
||||
|
||||
# "Barrierefreiheit"
|
||||
## a11y – Accessibility
|
||||
## Accessibility (a11y)
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
# Web Disability Simulator
|
||||
# Wie nutzen Menschen das Web?
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
@@ -1482,7 +1522,7 @@ https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog
|
||||
| **Augensteuerung** | Eye-Tracking |
|
||||
| **Switch-Geräte** | Ein-/Aus-Schalter |
|
||||
|
||||
→ **Nicht alle Menschen nutzen Maus oder Touchscreens.**
|
||||
→ **Nicht alle Menschen nutzen Maus oder Touchscreens gleichermaßen.**
|
||||
|
||||
<!--
|
||||
ACCESSIBILITY (a11y): a + 11 Buchstaben + y
|
||||
@@ -1592,10 +1632,10 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
|
||||
| AA | Gesetzlicher Standard | Kontrast 4,5:1, Tastaturnavigation |
|
||||
| AAA | Optimal | Gebärdensprache für Videos |
|
||||
|
||||
**Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.
|
||||
|
||||
**Sanktionen:** Bis zu 100.000 € Bußgeld bei Verstößen
|
||||
|
||||
> ***Curb-Cut-Effekt:** Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.*
|
||||
|
||||
---
|
||||
|
||||
# WCAG: Der Standard
|
||||
@@ -1622,6 +1662,8 @@ Gesetzlich meist Level AA gefordert
|
||||
|
||||
# Perceivable: Wahrnehmbar
|
||||
|
||||

|
||||
|
||||
**Textalternativen für Nicht-Text:**
|
||||
```html
|
||||
<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
|
||||
@@ -1727,34 +1769,6 @@ div-Button braucht JavaScript für Enter/Space
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _backgroundColor: #fce4ec -->
|
||||
|
||||
# Barrieren im Netz vermeiden (a11y)
|
||||
|
||||
**Tastatur-Test:**
|
||||
- Alle Funktionen nur mit Tab + Enter nutzbar?
|
||||
- Fokus immer sichtbar?
|
||||
- Logische Tab-Reihenfolge?
|
||||
|
||||
**Screenreader-Test:**
|
||||
- VoiceOver (Mac): `Cmd + F5`
|
||||
- NVDA (Windows): Gratis-Download
|
||||
|
||||
**Tools:**
|
||||
- axe DevTools, WAVE (Browser-Extensions)
|
||||
- Lighthouse (in Chrome DevTools)
|
||||
|
||||
<!--
|
||||
Automatische Tests finden ~30% der Probleme
|
||||
Manuelles Testen unverzichtbar
|
||||
Echte NutzerInnen einbeziehen = Gold-Standard
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
@@ -1763,20 +1777,26 @@ Echte NutzerInnen einbeziehen = Gold-Standard
|
||||
|
||||
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
|
||||
|
||||
**Tastatur-Test (5 Minuten):**
|
||||
1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen
|
||||
2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!)
|
||||
3. Logische Reihenfolge? (nicht kreuz und quer)
|
||||
4. Alle interaktiven Elemente erreichbar?
|
||||
**Tastatur-Test** – Maus weglegen, nur diese Tasten nutzen:
|
||||
|
||||

|
||||
|
||||
---
|
||||
|
||||
<!-- _class: erklaerung -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
|
||||
# Barrierefreiheit testen – Werkzeuge
|
||||
|
||||
**Automatisierte Tools:**
|
||||
|
||||
| Tool | Typ | Findet |
|
||||
|------|-----|--------|
|
||||
| axe DevTools | Browser-Extension | ~30% der WCAG-Verstöße |
|
||||
| WAVE | Browser-Extension | Struktur-Probleme, Kontrast |
|
||||
| Lighthouse | Chrome DevTools | Performance + Accessibility |
|
||||
| Pa11y | CLI | CI/CD-Integration |
|
||||
| [WAVE](https://wave.webaim.org/) | Browser-Extension | Struktur-Probleme, Kontrast, Tab-Reihenfolge |
|
||||
| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + Accessibility |
|
||||
| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration |
|
||||
| [axe DevTools](https://www.deque.com/axe/devtools/) | Browser-Extension (Pro-Version · Profi-Tool) | ~30% der WCAG-Verstöße |
|
||||
|
||||
**Screenreader-Kurztest:**
|
||||
- macOS: `Cmd + F5` (VoiceOver)
|
||||
@@ -1787,6 +1807,60 @@ Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erf
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||

|
||||
|
||||
<!--
|
||||
Aufgabe: hdm-stuttgart.de öffnen, Maus/Touchpad weglegen.
|
||||
Nur mit Tab/Shift+Tab/Enter/Pfeiltasten navigieren.
|
||||
Fokus-Indikator immer sichtbar? Logische Reihenfolge? Alle Elemente erreichbar?
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _paginate: false -->
|
||||
|
||||

|
||||
|
||||
<!--
|
||||
WAVE Tab-Reihenfolge: visualisiert DOM-Reihenfolge als Tab-Pfad.
|
||||
Wenn Pfad kreuz und quer → schlechte Struktur für Tastatur-/Screenreader-Nutzer.
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
<!-- _class: klausur -->
|
||||
<!-- _header: '' -->
|
||||
<!-- _footer: '' -->
|
||||
<!-- _backgroundColor: #fce4ec -->
|
||||
|
||||
# Barrieren im Netz vermeiden (a11y)
|
||||
|
||||
**Tastatur-Test:**
|
||||
- Alle Funktionen sind nur mit Tab + Enter nutzbar
|
||||
- Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
|
||||
- Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt
|
||||
|
||||
**Screenreader-Test:**
|
||||
- VoiceOver (Mac): `Cmd + F5`
|
||||
- NVDA (Windows): Gratis-Download
|
||||
|
||||
**Tools/Browser-Extensions:**
|
||||
- [WAVE](https://wave.webaim.org/), [axe DevTools](https://www.deque.com/axe/devtools/), [Web Disability Simulator](https://chromewebstore.google.com/detail/web-disability-simulator/olioanlbgbpmdlgjnnampnnlohigkjla)
|
||||
|
||||
<!--
|
||||
Automatische Tests finden ~30% der Probleme
|
||||
Manuelles Testen unverzichtbar
|
||||
Echte NutzerInnen einbeziehen = Gold-Standard
|
||||
-->
|
||||
|
||||
---
|
||||
|
||||
|
||||
<!-- _class: lead -->
|
||||
|
||||
|
||||
|
After Width: | Height: | Size: 164 KiB |
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: Kontrast</title>
|
||||
<style>
|
||||
:root {
|
||||
--hl: #d63384;
|
||||
--dark: #0f0f23;
|
||||
--chrome: #1a1a2e;
|
||||
--muted: #4a4a6a;
|
||||
}
|
||||
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
|
||||
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
|
||||
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
|
||||
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
|
||||
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
|
||||
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
|
||||
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="browser">
|
||||
<div class="window">
|
||||
<div class="chrome">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="url">file:///beispiel/contrast.html</span>
|
||||
</div>
|
||||
<iframe src="./contrast-levels.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kontrast-Stufen</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.6rem; margin: 0; }
|
||||
.row {
|
||||
background: #fff;
|
||||
padding: 22px 20px;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
.sample {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
}
|
||||
.meta {
|
||||
text-align: right;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ratio {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.fail { background: #fee2e2; color: #991b1b; }
|
||||
.aa-large { background: #fed7aa; color: #7c2d12; }
|
||||
.aa { background: #dcfce7; color: #166534; }
|
||||
.aaa { background: #bbf7d0; color: #14532d; }
|
||||
.hint {
|
||||
margin-top: 14px;
|
||||
font-size: 0.78rem;
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
.hint a { color: #d63384; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #aaaaaa;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">2.3:1</div>
|
||||
<span class="badge fail">✗ Fail</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #949494;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">3:1</div>
|
||||
<span class="badge aa-large">AA Large</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #767676;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">4.5:1</div>
|
||||
<span class="badge aa">✓ AA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #595959;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">7:1</div>
|
||||
<span class="badge aaa">✓ AAA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #1a1a1a;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">16:1</div>
|
||||
<span class="badge aaa">✓ AAA+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">Check: webaim.org/resources/contrastchecker</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 76 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 104 KiB |
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 3.3 MiB |
|
After Width: | Height: | Size: 459 B |
|
After Width: | Height: | Size: 3.5 MiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 7.9 MiB |
|
After Width: | Height: | Size: 6.8 MiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 568 B |
|
After Width: | Height: | Size: 550 B |
|
After Width: | Height: | Size: 550 B |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 2.7 MiB |
|
After Width: | Height: | Size: 550 B |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 196 KiB |