`,
- Digitale Inklusion
**Praktisch:**
-- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
+- Bessere UX für **alle** (SEO, Mobile, ältere Menschen, temporäre Einschränkungen)
- Größerer Markt (~15% der Bevölkerung)
+
+
+
# WCAG: Der Standard
-**W**eb **C**ontent **A**ccessibility **G**uidelines
+**W**eb **C**ontent **A**ccessibility **G**uidelines · Herausgeber: **W3C** / WAI · **WCAG 2.2** (Okt. 2023) verbindlich · WCAG 3 Working Draft (März 2026)
**4 Prinzipien (POUR):**
@@ -1650,6 +1653,8 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
| **Understandable** | Verständlich – Inhalte müssen klar sein |
| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
+**Konformitätslevel:** A · AA (gesetzlicher Standard) · AAA · [w3.org/WAI/WCAG22/quickref](https://www.w3.org/WAI/WCAG22/quickref/)
+
+
+
+
# Operable: Bedienbar

**Tastaturzugänglich:**
```css
-/* Fokus-Indikator NIE entfernen! */
-:focus {
- outline: 2px solid blue;
- outline-offset: 2px;
+/* Fokus-Ring nur bei Tastatur-Navigation */
+button:focus-visible {
+ outline: 3px solid #d63384;
+ outline-offset: 3px;
+ border-radius: 4px;
}
-/* Wenn custom styling: */
-button:focus-visible {
- box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
-}
+/* Anti-Pattern: Tastatur-Nutzer sind "blind" */
+button:focus { outline: none; }
```
**Genügend Zeit:** Session-Timeouts ankündigen, Verlängerung ermöglichen
diff --git a/slides/223015c/assets/demos/a11y-focus.html b/slides/223015c/assets/demos/a11y-focus.html
index 59b5cb5..a5e22d6 100644
--- a/slides/223015c/assets/demos/a11y-focus.html
+++ b/slides/223015c/assets/demos/a11y-focus.html
@@ -4,19 +4,17 @@
Fokus-Indikator
- Tab-Taste drücken:
+ Tab-Taste drücken:
diff --git a/slides/223015c/assets/demos/a11y-focus.png b/slides/223015c/assets/demos/a11y-focus.png
index e95465c..7a2b1bb 100644
Binary files a/slides/223015c/assets/demos/a11y-focus.png and b/slides/223015c/assets/demos/a11y-focus.png differ
diff --git a/slides/223015c/assets/demos/hex-dec-table.html b/slides/223015c/assets/demos/hex-dec-table.html
new file mode 100644
index 0000000..afcd365
--- /dev/null
+++ b/slides/223015c/assets/demos/hex-dec-table.html
@@ -0,0 +1,67 @@
+
+
+
+
+Hex → Dezimal
+
+
+
+ Hex → Dezimal
+ Dezimalwert = (Zeile × 16) + Spalte
+
+
+
+ | ×16 / + |
+ 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
+ 8 | 9 | A (10) | B (11) | C (12) | D (13) | E (14) | F (15) |
+
+
+
+
+
+
+
+ ASCII (0–127)
+ Non-ASCII (128–255)
+
+
+
+ Beispiel: 4D → Zeile 4 × 16 + Spalte D = 64 + 13 = 77 (= "M" in ASCII)
+
+
+
+
+
diff --git a/slides/223015c/assets/demos/hex-dec-table.png b/slides/223015c/assets/demos/hex-dec-table.png
new file mode 100644
index 0000000..69bc308
Binary files /dev/null and b/slides/223015c/assets/demos/hex-dec-table.png differ