From 79aaa14c29bac85053a5727fe507035d85d18afe Mon Sep 17 00:00:00 2001 From: Michael Czechowski Date: Wed, 22 Apr 2026 11:54:51 +0200 Subject: [PATCH] a11y feinschliff, hex-dec-table neu, operable-folie verbessert, anatomie klausur --- .../223015c/01-geschichte-grundlagen-html.md | 58 +++++++++------ slides/223015c/assets/demos/a11y-focus.html | 14 ++-- slides/223015c/assets/demos/a11y-focus.png | Bin 36623 -> 38196 bytes .../223015c/assets/demos/hex-dec-table.html | 67 ++++++++++++++++++ slides/223015c/assets/demos/hex-dec-table.png | Bin 0 -> 281458 bytes 5 files changed, 108 insertions(+), 31 deletions(-) create mode 100644 slides/223015c/assets/demos/hex-dec-table.html create mode 100644 slides/223015c/assets/demos/hex-dec-table.png diff --git a/slides/223015c/01-geschichte-grundlagen-html.md b/slides/223015c/01-geschichte-grundlagen-html.md index c90f16a..8f74655 100644 --- a/slides/223015c/01-geschichte-grundlagen-html.md +++ b/slides/223015c/01-geschichte-grundlagen-html.md @@ -1039,14 +1039,7 @@ CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot -![bg fit](./assets/hex-dec-lookup-table.png) - ---- - - - - -![bg fit](./assets/8bit-P-character.png) +![bg fit](./assets/demos/hex-dec-table.png) --- @@ -1161,6 +1154,11 @@ Formattierungssprache --- + + + + + # 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 - + + ``` | 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 (`