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

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

@@ -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
 
+![bg right:40% fit](./assets/hdm-link-preview.png)
+
 ```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>*Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.*</small>
-* <small>*Metadaten helfen bspw. auch Screen-Readern 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 -->
+
+![bg fit](./assets/web-disability-simulator.png)
 
 ---
 
 <!-- _class: lead -->
 
-# Web Disability Simulator
+# Wie nutzen Menschen das Web?
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/mouse.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/keyboard.png)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/switch-microsoft.jpg)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/ps-controller.jpg)
+
+---
+
+<!-- _header: '' -->
+<!-- _footer: '' -->
+<!-- _paginate: false -->
+
+![bg](./assets/eye-tracking.png)
 
 ---
 
@@ -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
 
+![bg right:35% fit](./assets/demos/contrast-levels.png)
+
 **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):**
+**Tastatur-Test** – Maus weglegen, nur diese Tasten nutzen:
-1. Maus weglegen, nur Tab + Enter + Pfeiltasten nutzen
+
-2. Fokus-Indikator immer sichtbar? (kein `outline: none;`!)
+![w:1050 center](./assets/demos/keyboard-a11y.png)
-3. Logische Reihenfolge? (nicht kreuz und quer)
+
-4. Alle interaktiven Elemente erreichbar?
+---
+
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Barrierefreiheit testen – Werkzeuge
 
 **Automatisierte Tools:**
 
 | Tool | Typ | Findet |
 |------|-----|--------|
-| axe DevTools | Browser-Extension | ~30% der WCAG-Verstöße |
+| [WAVE](https://wave.webaim.org/) | Browser-Extension | Struktur-Probleme, Kontrast, Tab-Reihenfolge |
-| WAVE | Browser-Extension | Struktur-Probleme, Kontrast |
+| [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview) | Chrome DevTools | Performance + Accessibility |
-| Lighthouse | Chrome DevTools | Performance + Accessibility |
+| [Pa11y](https://pa11y.org/) | CLI | CI/CD-Integration |
-| Pa11y | 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 -->
+
+![bg](./assets/hdm-homepage-16x9.png)
+
+<!--
+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 -->
+
+![bg](./assets/wave-tab-order-16x9.png)
+
+<!--
+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 -->
 

slides/223015c/assets/demos/contrast-levels-frame.html

@@ -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>

slides/223015c/assets/demos/contrast-levels.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>

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

@@ -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>