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

2026-04-21 20:58:52 +02:00
parent cedda338df
commit 67857b9bfd
18 changed files with 306 additions and 68 deletions
--- a/slides/223015c/01-geschichte-grundlagen-html.md
+++ b/slides/223015c/01-geschichte-grundlagen-html.md
@@ -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>*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>
 ```

-<small>→ [MDN: `<details>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details)</small>
+<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details)</small>

 ---

@@ -1403,7 +1395,7 @@ Accessibility ist eingebaut
 </details>
 ```

-<small>→ [MDN: `<details open>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/details#erstellen_einer_offenen_disclosure-box)</small>
+<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 @@ Accessibility ist eingebaut
 <button>Add to favorites</button>
 ```

-<small>→ [MDN: `<button>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button)</small>
+<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/button)</small>

 ---

@@ -1431,7 +1423,7 @@ Accessibility ist eingebaut
  size="10" />
 ```

-<small>→ [MDN: `<input>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input)</small>
+<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/input)</small>

 ---

@@ -1448,7 +1440,7 @@ Accessibility ist eingebaut
 </dialog>
 ```

-<small>→ [MDN: `<dialog>`](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog)</small>
+<small>Dokumentation auf [developer.mozilla.org](https://developer.mozilla.org/de/docs/Web/HTML/Reference/Elements/dialog)</small>


 ---
@@ -1460,9 +1452,57 @@ Accessibility ist eingebaut

 ---

+<!-- _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)

 ---

@@ -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
@@ -1729,6 +1769,71 @@ div-Button braucht JavaScript für Enter/Space

 ---

+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Barrierefreiheit testen – Vertiefung
+
+Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.
+
+**Tastatur-Test** – Maus weglegen, nur diese Tasten nutzen:
+
+![w:1050 center](./assets/demos/keyboard-a11y.png)
+
+---
+
+<!-- _class: erklaerung -->
+<!-- _header: '' -->
+<!-- _footer: '' -->
+
+# Barrierefreiheit testen – Werkzeuge
+
+**Automatisierte Tools:**
+
+| Tool | Typ | Findet |
+|------|-----|--------|
+| [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)
+- Windows: NVDA installieren (kostenlos)
+- Augen schließen, nur zuhören: Ist die Seite verständlich?
+
+**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.
+
+---
+
+<!-- _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: '' -->
@@ -1756,51 +1861,6 @@ Echte NutzerInnen einbeziehen = Gold-Standard

 ---

-<!-- _class: erklaerung -->
-<!-- _header: '' -->
-<!-- _footer: '' -->
-
-# Barrierefreiheit testen – Vertiefung
-
-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?
-
-**Automatisierte Tools:**
-
-| Tool | Typ | Findet |
-|------|-----|--------|
-| [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)
- Windows: NVDA installieren (kostenlos)
- Augen schließen, nur zuhören: Ist die Seite verständlich?
-
-**Gold-Standard:** Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.
-
---
-
-<!-- _header: '' -->
-<!-- _footer: '' -->
-<!-- _paginate: false -->
-
-![bg fit](./assets/wave-tab-order-qr.png)
-
-<!--
-WAVE Tab-Reihenfolge: visualisiert DOM-Reihenfolge als Tab-Pfad.
-Wenn Pfad kreuz und quer → schlechte Struktur für Tastatur-/Screenreader-Nutzer.
-->
-
---
-

 <!-- _class: lead -->

--- a/slides/223015c/assets/demos/contrast-levels.html
+++ b/slides/223015c/assets/demos/contrast-levels.html
@@ -4,11 +4,11 @@
  <meta charset="UTF-8">
  <title>Kontrast-Stufen</title>
  <style>
-    body { font-family: system-ui, sans-serif; padding: 1.2rem; margin: 0; }
+    body { font-family: system-ui, sans-serif; padding: 1.6rem; margin: 0; }
    .row {
      background: #fff;
-      padding: 14px 16px;
-      margin-bottom: 10px;
+      padding: 22px 20px;
+      margin-bottom: 14px;
      border-radius: 6px;
      border: 1px solid #e5e7eb;
      display: flex;
@@ -17,7 +17,7 @@
      gap: 14px;
    }
    .sample {
-      font-size: 1.2rem;
+      font-size: 1.5rem;
      font-weight: 600;
      flex: 1;
    }
--- a/slides/223015c/assets/demos/contrast-levels.png
+++ b/slides/223015c/assets/demos/contrast-levels.png
--- a/slides/223015c/assets/demos/keyboard-a11y.html
+++ b/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>
--- a/slides/223015c/assets/demos/keyboard-a11y.png
+++ b/slides/223015c/assets/demos/keyboard-a11y.png
--- a/slides/223015c/assets/eye-tracking.png
+++ b/slides/223015c/assets/eye-tracking.png
--- a/slides/223015c/assets/hdm-homepage-16x9.png
+++ b/slides/223015c/assets/hdm-homepage-16x9.png
--- a/slides/223015c/assets/hdm-homepage-qr.png
+++ b/slides/223015c/assets/hdm-homepage-qr.png
--- a/slides/223015c/assets/hdm-homepage.png
+++ b/slides/223015c/assets/hdm-homepage.png
--- a/slides/223015c/assets/hdm-link-preview.png
+++ b/slides/223015c/assets/hdm-link-preview.png
--- a/slides/223015c/assets/keyboard.png
+++ b/slides/223015c/assets/keyboard.png
--- a/slides/223015c/assets/mouse.png
+++ b/slides/223015c/assets/mouse.png
--- a/slides/223015c/assets/ps-controller.jpg
+++ b/slides/223015c/assets/ps-controller.jpg
--- a/slides/223015c/assets/switch-microsoft.jpg
+++ b/slides/223015c/assets/switch-microsoft.jpg
--- a/slides/223015c/assets/wave-tab-order-16x9.png
+++ b/slides/223015c/assets/wave-tab-order-16x9.png
--- a/slides/223015c/assets/wave-tab-order-qr-only.png
+++ b/slides/223015c/assets/wave-tab-order-qr-only.png
--- a/slides/223015c/assets/wave-tab-order-qr.png
+++ b/slides/223015c/assets/wave-tab-order-qr.png
--- a/slides/223015c/assets/web-disability-simulator.png
+++ b/slides/223015c/assets/web-disability-simulator.png