a11y feinschliff, hex-dec-table neu, operable-folie verbessert, anatomie klausur

slides/223015c/01-geschichte-grundlagen-html.md

@@ -1039,14 +1039,7 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot
 <!-- _header: '' -->
 <!-- _footer: '' -->
 
-![bg fit](./assets/hex-dec-lookup-table.png)
+![bg fit](./assets/demos/hex-dec-table.png)
-
----
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-![bg fit](./assets/8bit-P-character.png)
 
 ---
 
@@ -1161,6 +1154,11 @@ Formattierungssprache
     
 ---
 
+<!-- _class: klausur -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _backgroundColor: #fce4ec -->
+
 # HTML-Anatomie (2/2)
 
 * Wir unterscheiden zwischen **umschließende** und **selbst-schließende** HTML-Tags
@@ -1283,7 +1281,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
 ![bg right:35%](./assets/demos/input-date.png)
 
 ```html
-<input type="" />
+<label>Geburtsdatum</label>
+<input type="date" />
 ```
 
 | Teil | Bezeichnung |
@@ -1520,7 +1519,7 @@ Accessibility ist eingebaut
 |---------|---------------|
 | **Maus** | Klicken, Scrollen |
 | **Tastatur** | Tab-Navigation, Enter, Pfeiltasten |
-| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, JAWS) |
+| **Screenreader** | Vorlesen von Inhalten (NVDA, VoiceOver, TalkBack, Orca) |
 | **Sprachsteuerung** | "Klicke auf Anmelden" |
 | **Augensteuerung** | Eye-Tracking |
 | **Switch-Geräte** | Ein-/Aus-Schalter |
@@ -1553,7 +1552,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
 
 # Web-Zugänglichkeit – Vertiefung
 
-**a11y** = Accessibility (a + 11 Buchstaben + y). Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.
+Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.
 
 **Arten von Einschränkungen:**
 
@@ -1565,7 +1564,7 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
 | Kognitiv | Legasthenie | Müdigkeit | Ablenkung |
 
 **Assistive Technologien:**
-- **Screenreader:** NVDA (Windows, kostenlos), VoiceOver (Apple, integriert), JAWS (kommerziell)
+- **Screenreader:** NVDA & Narrator (Windows), VoiceOver (macOS/iOS), TalkBack (Android), Orca (Linux) – überwiegend builtin oder Open Source; JAWS (Windows) kommerziell
 - **Braillezeilen:** Taktile Ausgabe, ~40–80 Zeichen
 - **Switch-Geräte:** Ein-Knopf-Steuerung für motorische Einschränkungen
 - **Eye-Tracking:** Blicksteuerung für Bewegungsunfähige
@@ -1585,7 +1584,7 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,
 - 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)
 
 <!--
@@ -1637,9 +1636,13 @@ Der **European Accessibility Act (EAA)** trat am 28. Juni 2025 in Kraft und betr
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # WCAG: Der Standard
 
-**W**eb **C**ontent **A**ccessibility **G**uidelines
+<small>**W**eb **C**ontent **A**ccessibility **G**uidelines · Herausgeber: **W3C** / WAI · **WCAG 2.2** (Okt. 2023) verbindlich · WCAG 3 Working Draft (März 2026)</small>
 
 **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  <small>· [w3.org/WAI/WCAG22/quickref](https://www.w3.org/WAI/WCAG22/quickref/)</small>
+
 <!--
 WCAG vom W3C (World Wide Web Consortium)
 Aktuelle Version: WCAG 2.2 (2023)
@@ -1665,7 +1670,11 @@ Gesetzlich meist Level AA gefordert
 
 **Textalternativen für Nicht-Text:**
 ```html
-<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
+<img src="tankman.jpg"
+     alt="Ein Mann mit Einkaufstüten steht
+          allein vor einer Reihe Panzer –
+          Tiananmen-Platz, Peking,
+          5. Juni 1989">
 ```
 
 * **Kontrast:** Mindestens 4,5:1 für Text
@@ -1680,22 +1689,25 @@ Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)
 
 ---
 
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
 # Operable: Bedienbar
 
 ![bg right:35%](./assets/demos/a11y-focus.png)
 
 **Tastaturzugänglich:**
 ```css
-/* Fokus-Indikator NIE entfernen! */
+/* Fokus-Ring nur bei Tastatur-Navigation */
-:focus {
+button:focus-visible {
-    outline: 2px solid blue;
+  outline: 3px solid #d63384;
-    outline-offset: 2px;
+  outline-offset: 3px;
+  border-radius: 4px;
 }
 
-/* Wenn custom styling: */
+/* Anti-Pattern: Tastatur-Nutzer sind "blind" */
-button:focus-visible {
+button:focus { outline: none; }
-    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
-}
 ```
 
 **Genügend Zeit:** Session-Timeouts ankündigen, Verlängerung ermöglichen

slides/223015c/assets/demos/a11y-focus.html

@@ -4,19 +4,17 @@
   <meta charset="UTF-8">
   <title>Fokus-Indikator</title>
   <style>
-    body { font-family: system-ui, sans-serif; padding: 1.2rem; }
+    body { font-family: system-ui, sans-serif; padding: 1.4rem; font-size: 1rem; }
-    :focus, .is-focused {
+    button { font: inherit; padding: 10px 18px; margin: 8px 0; display: block; border: 1.5px solid #d1d5db; background: #fff; border-radius: 4px; cursor: pointer; }
-      outline: 2px solid blue;
-      outline-offset: 2px;
-    }
     button:focus-visible, button.is-focused {
-      box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
+      outline: 3px solid #d63384;
+      outline-offset: 3px;
+      border-radius: 4px;
     }
-    button { font: inherit; padding: 6px 14px; margin: 6px 0; display: block; }
   </style>
 </head>
 <body>
-  <p>Tab-Taste drücken:</p>
+  <p><strong>Tab-Taste drücken:</strong></p>
   <button class="is-focused">Erster Button</button>
   <button>Zweiter Button</button>
   <button>Dritter Button</button>

slides/223015c/assets/demos/hex-dec-table.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8">
+<title>Hex → Dezimal</title>
+<style>
+  html, body { margin: 0; padding: 0; background: #fff; font-family: system-ui, -apple-system, sans-serif; }
+  body { padding: 28px; }
+  h1 { text-align: center; margin: 0 0 4px; font-size: 1.6rem; color: #1a1a2e; }
+  .sub { text-align: center; color: #6b7280; margin-bottom: 18px; font-size: 0.95rem; }
+  table { border-collapse: collapse; margin: 0 auto; font-variant-numeric: tabular-nums; }
+  th, td { border: 1px solid #cbd5e1; padding: 7px 10px; text-align: center; font-size: 0.95rem; }
+  thead th { background: #1a1a2e; color: #fff; }
+  tbody th { background: #334155; color: #fff; font-weight: 600; }
+  tbody td.ascii { background: #f3f4f6; }
+  tbody td.nonascii { background: #fff; color: #6b7280; }
+  .corner { background: #0f0f23; color: #d63384; }
+  .legend { display: flex; justify-content: center; gap: 24px; margin-top: 16px; font-size: 0.9rem; color: #374151; }
+  .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid #cbd5e1; vertical-align: middle; margin-right: 6px; }
+  .example { margin: 20px auto 0; max-width: 720px; padding: 14px 18px; background: #fef3f8; border-left: 4px solid #d63384; border-radius: 4px; font-size: 1rem; color: #1a1a2e; }
+  code { background: #1a1a2e; color: #d63384; padding: 2px 6px; border-radius: 3px; font-family: ui-monospace, monospace; font-weight: 700; }
+</style>
+</head>
+<body>
+  <h1>Hex → Dezimal</h1>
+  <div class="sub">Dezimalwert = (Zeile × 16) + Spalte</div>
+  <table>
+    <thead>
+      <tr>
+        <th class="corner">×16 / +</th>
+        <th>0</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th>
+        <th>8</th><th>9</th><th>A <small style="opacity:.7;font-weight:400">(10)</small></th><th>B <small style="opacity:.7;font-weight:400">(11)</small></th><th>C <small style="opacity:.7;font-weight:400">(12)</small></th><th>D <small style="opacity:.7;font-weight:400">(13)</small></th><th>E <small style="opacity:.7;font-weight:400">(14)</small></th><th>F <small style="opacity:.7;font-weight:400">(15)</small></th>
+      </tr>
+    </thead>
+    <tbody>
+    </tbody>
+  </table>
+
+  <div class="legend">
+    <span><span class="sw" style="background:#f3f4f6"></span>ASCII (0–127)</span>
+    <span><span class="sw" style="background:#fff"></span>Non-ASCII (128–255)</span>
+  </div>
+
+  <div class="example">
+    <strong>Beispiel:</strong> <code>4D</code> → Zeile <code>4</code> × 16 + Spalte <code>D</code> = 64 + 13 = <strong>77</strong> (= "M" in ASCII)
+  </div>
+
+<script>
+  const rows = '0123456789ABCDEF';
+  const tb = document.querySelector('tbody');
+  for (let r = 0; r < 16; r++) {
+    const tr = document.createElement('tr');
+    const th = document.createElement('th');
+    th.innerHTML = r >= 10 ? rows[r] + ' <small style="opacity:.7;font-weight:400">('+r+')</small>' : rows[r];
+    tr.appendChild(th);
+    for (let c = 0; c < 16; c++) {
+      const td = document.createElement('td');
+      const v = r*16 + c;
+      td.textContent = v;
+      td.className = v <= 127 ? 'ascii' : 'nonascii';
+      tr.appendChild(td);
+    }
+    tb.appendChild(tr);
+  }
+</script>
+</body>
+</html>