Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu05:theorie:c_accessibility [2026/03/08 21:13] – gkoch
+++ de:modul:m291:learningunits:lu05:theorie:c_accessibility [2026/03/08 22:22] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
 ====== LU05c – Accessibility Basics (A11y) ======
-<WRAP info>
+{{:de:modul:m291:learningunits:lu05:theorie:1655410107982.jpeg?nolink&800| Illustration for Accessibility}}
-**Weiterführende Ressource:** Dieser Block stützt sich auf den Google-Kurs [[https://web.dev/learn/accessibility|web.dev – Learn Accessibility]].
+<WRAP box round 80% center>
+**Weiterführende Informationen:** Dieser Block stützt sich auf den Google-Kurs [[https://web.dev/learn/accessibility|web.dev – Learn Accessibility]].
 </WRAP>
@@ Zeile 18: / Zeile 20: @@
 Eine schlecht zugängliche Website kann für jemanden, der einen Screenreader benutzt, komplett unbenutzbar sein – genau wie eine fehlende Rampe jemanden im Rollstuhl ausschliesst.
 ==== Warum ist A11y wichtig? ====
+{{:de:modul:m291:learningunits:lu05:theorie:inclusion_0.5x.png?nolink&300|}}
 Barrierefreiheit ist kein «Nice-to-have» mehr – sie ist aus drei Gründen relevant:
@@ Zeile 30: / Zeile 35: @@
 ===== WCAG – Der internationale Standard =====
-Die **Web Content Accessibility Guidelines (WCAG)** werden vom World Wide Web Consortium (W3C) entwickelt und gelten als internationaler Goldstandard für digitale Barrierefreiheit. Sie bieten Entwickler:innen klare, prüfbare Kriterien dafür, wie eine zugängliche Website aussehen muss.
+{{youtube>7C-KHXPnDF0?}}
-==== Konformitätsstufen ====
-^ Stufe ^ Bedeutung ^ Einsatz ^
+Die **Web Content Accessibility Guidelines (WCAG)** werden vom World Wide Web Consortium (W3C) entwickelt und gelten als internationaler Standard für digitale Barrierefreiheit. Sie bieten Entwickler:innen klare, prüfbare Kriterien dafür, wie eine zugängliche Website aussehen muss.
-| **A** | Mindestanforderungen | Ohne diese ist die Nutzung fast unmöglich |
-| **AA** | Internationaler Standard | Pflicht für Unternehmen und öffentliche Stellen |
-| **AAA** | Höchste Stufe | Oft schwer vollständig umsetzbar |
-Für die meisten Projekte gilt **Stufe AA** als Ziel.
 ==== POUR – Die vier Grundprinzipien ====
+{{:de:modul:m291:learningunits:lu05:theorie:digital-accessibility-standards-scaled.jpg?nolink&800|}}
 Die WCAG sind um vier Grundprinzipien aufgebaut, die unter dem Kürzel **POUR** zusammengefasst werden:
 === 1. Wahrnehmbarkeit (Perceivable) ===
+{{:de:modul:m291:learningunits:lu05:theorie:chatgpt_image_mar_8_2026_09_46_15_pm.png?nolink&300|}}
 Inhalte müssen für Augen, Ohren oder Screenreader erkennbar sein.
   * Bilder brauchen aussagekräftige ''alt''-Attribute
-  * Videos benötigen Untertitel
+  * Videos benötigen Untertitel oder Transkripte
   * Texte müssen ausreichend Kontrast zum Hintergrund haben (Mindest-Verhältnis: **4,5:1** für Fliesstext)
 === 2. Bedienbarkeit (Operable) ===
+{{:de:modul:m291:learningunits:lu05:theorie:focus-indicators-example-2048x768.png?nolink&600|}}
 Die Website muss ohne Maus – also nur mit Tastatur oder Sprachsteuerung – vollständig nutzbar sein.
@@ Zeile 62: / Zeile 67: @@
 === 3. Verständlichkeit (Understandable) ===
+{{:de:modul:m291:learningunits:lu05:theorie:language_4x.png?nolink&300|}}
 Sprache und Aufbau müssen logisch und vorhersehbar sein.
@@ Zeile 70: / Zeile 77: @@
 === 4. Robustheit (Robust) ===
+{{:de:modul:m291:learningunits:lu05:theorie:elizabeth-woolner-9xxnzcjz8ba-unsplash.jpg?nolink&400|}}
 Inhalte müssen auf verschiedenen Geräten und mit Hilfstechnologien (Screenreader, Braille-Ausgabegeräte) zuverlässig funktionieren.
@@ Zeile 79: / Zeile 88: @@
 ===== Screenreader =====
-Ein **Screenreader** ist ein Hilfsprogramm, das den Bildschirminhalt vorliest. Der Browser baut parallel zum DOM-Baum einen **Accessibility Tree** auf – eine vereinfachte Darstellung der Seite mit Rollen, Zuständen und Namen aller Elemente. Der Screenreader liest diesen Tree aus.
+Ein **Screenreader** ist ein Hilfsprogramm, das den Bildschirminhalt vorliest. Der Browser baut parallel zum DOM-Baum einen **Accessibility Tree** auf – eine vereinfachte Darstellung der Seite mit Rollen, Zuständen und Namen aller Elemente. Der Screenreader liest diesen Tree aus. Unter Mac gibt es in den System-Einstellungen zur "Accessibility" (Bedienungshilfen) die Möglichkeit VoiceOver zu aktivieren. Unter Windows heisst es Sprachausgabe.
-^ Screenreader ^ Plattform ^ Kosten ^
-| **VoiceOver** | macOS / iOS | integriert (kostenlos) |
-| **NVDA** | Windows | kostenlos (Open Source) |
-| **JAWS** | Windows | kostenpflichtig |
-| **TalkBack** | Android | integriert (kostenlos) |
-==== Live-Demo: Alarado Landingpage mit VoiceOver ====
-In der Lektion demonstrieren wir, was ein Screenreader auf der Alarado Landingpage vorliest. Die Beobachtungen:
-  * **Navigation:** Die Links in der Nav-Bar werden korrekt erkannt und vorgelesen, z. B. «Features, Link».
-  * **Buttons:** Die Haupt-Buttons im Hero-Bereich sind per Tab erreichbar und werden vorgelesen.
-  * **Dark-/Light-Mode-Switch:** ❌ **Nicht erreichbar!** Der Switch erscheint für den Screenreader nicht – er kann ihn weder finden noch bedienen.
@@ Zeile 108: / Zeile 104: @@
   * Für Screenreader als «Schaltfläche» erkennbar
-Ein ''%%<div>%%'' mit ''onclick'' hat **keine** dieser Eigenschaften von Haus aus.
-<WRAP center round box 80%>
-<code html>
-<!-- ❌ Nicht barrierefrei ohne viel Zusatzarbeit -->
-<div onclick="openPanel()">Frage anzeigen</div>
-<!-- ✅ Semantisch korrekt – sofort barrierefrei -->
-<button onclick="openPanel()">Frage anzeigen</button>
-</code>
-</WRAP>
 <WRAP round box 80%>
@@ Zeile 164: / Zeile 150: @@
 Nicht alle Nutzenden arbeiten mit einer Maus. Menschen mit motorischen Einschränkungen, Sehbehinderungen oder temporären Verletzungen navigieren mit der Tastatur.
-^ Taste ^ Aktion ^
-| ''Tab'' | Zum nächsten fokussierbaren Element springen |
-| ''Shift + Tab'' | Zum vorherigen Element springen |
-| ''Enter'' / ''Space'' | Button oder Link aktivieren |
-| ''Esc'' | Dialog oder Dropdown schliessen |
-| Pfeiltasten | Navigation innerhalb von Komponenten |
-==== Focus-Styles nicht entfernen! ====
-Der sichtbare Fokusrahmen (''outline'') ist für Tastaturnutzende das einzige visuelle Feedback, wo sie sich auf der Seite befinden. Ihn zu entfernen ist einer der häufigsten Barrierefreiheitsfehler überhaupt:
-<WRAP center round box 80%>
-<code css>
-/* ❌ Nie so – macht Tastaturnavigation unsichtbar */
-button:focus {
-  outline: none;
-}
-/* ✅ Eigenes Design anbieten, aber nie einfach weglassen */
-button:focus-visible {
-  outline: 3px solid var(--violet-600);
-  outline-offset: 3px;
-  border-radius: 4px;
-}
-</code>
-</WRAP>
-<WRAP tip round center 80%>
-**'':focus-visible'' statt '':focus'':** Die Pseudo-Klasse '':focus-visible'' zeigt den Fokusrahmen nur bei Tastaturnavigation – nicht beim Mausklick. So bleibt das Design sauber, ohne Tastaturnutzende zu benachteiligen.
-</WRAP>