From 3c05765f6b6bd46a88f3c337dcac772890ae9617 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Wed, 24 Dec 2025 00:49:17 +0100
Subject: [PATCH] add accessibility section with wcag, a11y, and input methods

---
 ...01-10-termin-2-netzwerke-protokolle-css.md | 207 +++++++++++++++++-
 1 file changed, 205 insertions(+), 2 deletions(-)

diff --git a/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md b/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
index 1f76985..d1938ff 100644
--- a/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
+++ b/slides/2026-01-10-termin-2-netzwerke-protokolle-css.md
@@ -94,8 +94,9 @@ Fragen klären
 
 **Nachmittag:**
 - CSS-Grundlagen
+- Barrierefreiheit (a11y, WCAG)
 - Selektoren & Spezifität
-- Hands-On: Wir bauen uns einen eigenen Caption Generator
+- Hands-On: Styling
 
 ---
 
@@ -995,6 +996,205 @@ vw/vh = Viewport (sichtbarer Bereich)
 
 ---
 
+<!-- _class: lead -->
+
+# Barrierefreiheit
+## a11y – Accessibility
+
+---
+
+# Wie nutzen Menschen das Web?
+
+| Eingabe | Nutzungsweise |
+|---------|---------------|
+| **Maus** | Klicken, Scrollen |
+| **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
+| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
+| **Sprachsteuerung** | "Klicke auf Anmelden" |
+| **Augensteuerung** | Eye-Tracking |
+| **Switch-Geräte** | Ein-/Aus-Schalter |
+
+→ **Nicht alle nutzen Maus + Bildschirm!**
+
+<!--
+a11y = Accessibility (a + 11 Buchstaben + y)
+15% der Weltbevölkerung haben eine Behinderung
+Temporäre Einschränkungen: gebrochener Arm, helle Sonne
+Situative Einschränkungen: laute Umgebung, Baby auf dem Arm
+-->
+
+---
+
+# Warum Barrierefreiheit?
+
+**Rechtlich:**
+- EU: European Accessibility Act (seit Juni 2025 in Kraft!)
+- DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen
+
+**Ethisch:**
+- Teilhabe für alle Menschen
+- Digitale Inklusion
+
+**Praktisch:**
+- Bessere UX für **alle** (SEO, Mobile, ältere Menschen)
+- Größerer Markt (~15% der Bevölkerung)
+
+<!--
+European Accessibility Act: gilt jetzt für private Unternehmen
+Barrierefreiheit = gutes Design für alle
+Curb-Cut-Effekt: Rampen helfen auch Kinderwagen, Koffern...
+-->
+
+---
+
+# WCAG: Der Standard
+
+**W**eb **C**ontent **A**ccessibility **G**uidelines
+
+**4 Prinzipien (POUR):**
+
+| Prinzip | Bedeutung |
+|---------|-----------|
+| **Perceivable** | Wahrnehmbar – Inhalte müssen erkennbar sein |
+| **Operable** | Bedienbar – Funktionen müssen nutzbar sein |
+| **Understandable** | Verständlich – Inhalte müssen klar sein |
+| **Robust** | Robust – Funktioniert mit verschiedenen Technologien |
+
+<!--
+WCAG vom W3C (World Wide Web Consortium)
+Aktuelle Version: WCAG 2.2 (2023)
+Level: A (minimal), AA (Standard), AAA (optimal)
+Gesetzlich meist Level AA gefordert
+-->
+
+---
+
+# Perceivable: Wahrnehmbar
+
+**Textalternativen für Nicht-Text:**
+```html
+<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
+```
+
+**Kontrast:** Mindestens 4.5:1 für Text
+
+**Untertitel:** Videos brauchen Captions
+
+**Responsive:** Inhalte bei 200% Zoom nutzbar
+
+<!--
+Leeres alt="" für dekorative Bilder
+Contrast-Checker: WebAIM Contrast Checker
+Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
+-->
+
+---
+
+# Operable: Bedienbar
+
+**Tastaturzugänglich:**
+```css
+/* Fokus-Indikator NIE entfernen! */
+:focus {
+    outline: 2px solid blue;
+    outline-offset: 2px;
+}
+
+/* Wenn custom styling: */
+button:focus-visible {
+    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
+}
+```
+
+**Genug Zeit:** Keine automatischen Timeouts ohne Warnung
+
+**Keine Blitze:** Nichts blinkt mehr als 3x pro Sekunde
+
+<!--
+Tab-Reihenfolge = DOM-Reihenfolge
+Skip-Links: "Zum Hauptinhalt springen"
+:focus-visible = nur bei Tastatur-Navigation
+-->
+
+---
+
+# Understandable: Verständlich
+
+**Sprache angeben:**
+```html
+<html lang="de">
+```
+
+**Konsistente Navigation:** Gleiche Elemente an gleicher Stelle
+
+**Fehler erklären:**
+```html
+<input type="email" aria-describedby="email-error">
+<p id="email-error" role="alert">
+    Bitte geben Sie eine gültige E-Mail-Adresse ein.
+</p>
+```
+
+<!--
+Screenreader nutzen lang für korrekte Aussprache
+Konsistenz reduziert kognitive Last
+Fehlermeldungen: konkret, hilfreich, am Feld
+-->
+
+---
+
+# Robust: Technisch solide
+
+**Semantisches HTML:**
+```html
+<!-- Schlecht -->
+<div class="button" onclick="...">Klick mich</div>
+
+<!-- Gut -->
+<button type="button">Klick mich</button>
+```
+
+**ARIA nur wenn nötig:**
+```html
+<!-- Nötig: Custom-Komponente -->
+<div role="tablist" aria-label="Produktkategorien">
+    <button role="tab" aria-selected="true">Schuhe</button>
+    <button role="tab" aria-selected="false">Jacken</button>
+</div>
+```
+
+<!--
+ARIA = Accessible Rich Internet Applications
+Erste Regel von ARIA: Wenn möglich, natives HTML nutzen!
+button hat eingebaute Tastatur-Unterstützung
+div-Button braucht JavaScript für Enter/Space
+-->
+
+---
+
+# Schnellcheck: Ist meine Seite barrierefrei?
+
+**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
+
+**Automatische Tools:**
+- Browser-Extension: axe DevTools, WAVE
+- Lighthouse (Chrome DevTools)
+
+<!--
+Automatische Tests finden ~30% der Probleme
+Manuelles Testen unverzichtbar
+Echte NutzerInnen einbeziehen = Gold-Standard
+-->
+
+---
+
 # Hands-On: Erste Styles (30 Min)
 
 **Erstellt `style.css` für eure HTML-Seite:**
@@ -1508,12 +1708,15 @@ Variablen machen's einfach
 - DNS: Namen → IP-Adressen
 - HTTP: Request/Response, Status-Codes
 
+**Barrierefreiheit:**
+- WCAG: Perceivable, Operable, Understandable, Robust
+- Tastatur-Navigation, Screenreader, Kontrast
+
 **CSS:**
 - Selektoren (Element, Klasse, ID)
 - Box-Modell (Content, Padding, Border, Margin)
 - Flexbox für Layouts
 - Responsive Design mit Media Queries
-- Transitions für Animationen
 
 ---