Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu05:theorie:c_accessibility [2026/03/08 19:29] – gkoch
+++ de:modul:m291:learningunits:lu05:theorie:c_accessibility [2026/03/08 22:22] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
 ====== LU05c – Accessibility Basics (A11y) ======
+{{:de:modul:m291:learningunits:lu05:theorie:1655410107982.jpeg?nolink&800| Illustration for Accessibility}}
-<WRAP info>
+<WRAP box round 80% center>
-**Weiterführende Ressource:** Dieser Block stützt sich auf den Google-Kurs [[https://web.dev/learn/accessibility|web.dev – Learn Accessibility]]. In LU06 vertiefen wir das Thema. Für jetzt behandeln wir die Grundlagen, die direkt für unsere Projekte relevant sind.
+**Weiterführende Informationen:** Dieser Block stützt sich auf den Google-Kurs [[https://web.dev/learn/accessibility|web.dev – Learn Accessibility]].
 </WRAP>
@@ Zeile 21: / Zeile 22: @@
-===== Screenreader – Live-Demo =====
+==== Warum ist A11y wichtig? ====
-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.
+{{:de:modul:m291:learningunits:lu05:theorie:inclusion_0.5x.png?nolink&300|}}
-^ Screenreader ^ Plattform ^ Kosten ^
+Barrierefreiheit ist kein «Nice-to-have» mehr – sie ist aus drei Gründen relevant:
-| **VoiceOver** | macOS / iOS | integriert (kostenlos) |
-| **NVDA** | Windows | kostenlos (Open Source) |
-| **JAWS** | Windows | kostenpflichtig |
-| **TalkBack** | Android | integriert (kostenlos) |
-==== Live-Demo: Alarado Landingpage mit VoiceOver ====
+  * **Inklusion:** Das Hauptziel ist, allen Menschen die uneingeschränkte Teilnahme am digitalen Leben zu ermöglichen.
+  * **Gesetzliche Anforderungen:** Viele Länder haben Gesetze, die auf den WCAG basieren. Seit 2025 ist digitale Barrierefreiheit in der EU für die meisten Websites und Online-Shops gesetzlich vorgeschrieben.
+  * **Bessere UX für alle:** Barrierefreie Massnahmen – wie klare Fehlermeldungen, logischer Aufbau und gute Kontraste – verbessern die Nutzung für **alle** User, nicht nur für Menschen mit Einschränkungen.
+===== WCAG – Der internationale Standard =====
+{{youtube>7C-KHXPnDF0?}}
+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.
+==== 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 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.
+  * Focus-Styles beibehalten (nie ''outline: none'' setzen)
+  * Keine blinkenden Inhalte, die Anfälle auslösen könnten
+  * In unserem Projekt: ''aria-expanded'' beim Accordion und ''aria-checked'' beim Switch machen Zustände für Screenreader lesbar
+=== 3. Verständlichkeit (Understandable) ===
+{{:de:modul:m291:learningunits:lu05:theorie:language_4x.png?nolink&300|}}
+Sprache und Aufbau müssen logisch und vorhersehbar sein.
+  * Fehlermeldungen in Formularen müssen präzise erklären, was falsch ist (statt kryptischer Codes)
+  * Die Sprache des Dokuments muss im ''<html>'' deklariert sein: ''<html lang="de">''
+  * Interaktionen sollen sich erwartungsgemäss verhalten
+=== 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.
+  * Semantisches HTML verwenden statt ''%%<div>%%'' für alles
+  * Schriftgrössen in ''rem'' definieren, damit Browser-Zoom korrekt skaliert
+  * ARIA-Attribute korrekt und sparsam einsetzen
+===== 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. Unter Mac gibt es in den System-Einstellungen zur "Accessibility" (Bedienungshilfen) die Möglichkeit VoiceOver zu aktivieren. Unter Windows heisst es Sprachausgabe.
-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.
-Warum? Das erklären wir im Abschnitt [[#praxisbeispiel_dark_light_mode_switch_in_alarado|Praxisbeispiel]] weiter unten.
 ===== Semantisches HTML als Grundlage =====
@@ Zeile 52: / Zeile 104: @@
   * Für Screenreader als «Schaltfläche» erkennbar
-Ein ''<div>'' mit ''onclick'' hat **keine** dieser Eigenschaften von Haus aus.
-<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 important>
+<WRAP round box 80%>
 **Erste ARIA-Regel:** Verwenden Sie ARIA **nicht**, wenn ein natives HTML-Element denselben Zweck erfüllt. Ein ''<button>'' braucht kein ''role="button"''. ARIA ist nur dann nötig, wenn HTML allein nicht ausreicht.
 </WRAP>
@@ Zeile 71: / Zeile 115: @@
 ARIA ist eine Sammlung von HTML-Attributen, die Screenreadern und Hilfstechnologien zusätzliche Bedeutung kommunizieren – Rollen, Zustände und Eigenschaften, die HTML allein nicht ausdrücken kann.
+<WRAP center round box 80%>
 **Drei ARIA-Konzepte:**
@@ Zeile 77: / Zeile 122: @@
 | **Zustand** | ''aria-*'' | ''aria-expanded="true"'', ''aria-checked="false"'' |
 | **Eigenschaft** | ''aria-*'' | ''aria-label="Menü öffnen"'', ''aria-hidden="true"'' |
+</WRAP>
@@ Zeile 84: / Zeile 130: @@
 Im HTML setzen wir ''aria-expanded="false"'' als Ausgangszustand:
+<WRAP center round box 80%>
 <code html>
 <button class="accordion-btn" aria-expanded="false">
@@ Zeile 93: / Zeile 139: @@
 </p>
 </code>
+</WRAP>
 **Was der Screenreader vorliest:**
   * Zugeklappt: «What is this project, Schaltfläche, zugeklappt»
   * Aufgeklappt: «What is this project, Schaltfläche, aufgeklappt»
-Im JavaScript aktualisieren wir ''aria-expanded'' beim Klick:
-<code javascript>
-buttons.forEach((button) => {
-  button.addEventListener('click', (e) => {
-    const btn          = e.currentTarget;
-    const panelElement = btn.nextElementSibling;
-    const panelIsOpen  = panelElement.classList.contains('open');
-    // Alle Panels schliessen + aria-expanded zurücksetzen
-    buttons.forEach((andererBtn) => {
-      andererBtn.nextElementSibling.classList.remove('open');
-      andererBtn.setAttribute('aria-expanded', 'false'); // ← State kommunizieren
-    });
-    // Dieses Panel öffnen
-    if (!panelIsOpen) {
-      panelElement.classList.add('open');
-      btn.setAttribute('aria-expanded', 'true');         // ← State kommunizieren
-    }
-  });
-});
-</code>
-==== Icon-Wechsel über aria-expanded in CSS ====
-Im finalen Styling nutzen wir ''aria-expanded'' direkt als CSS-Selektor, um das Plus-Icon durch ein Minus-Icon zu ersetzen – **kein zusätzliches JavaScript** nötig:
-<code css>
-/* Plus-Icon: Standardzustand */
-.accordion-btn::after {
-  content: url('./images/icon-plus.svg');
-}
-/* Minus-Icon: wenn Panel offen */
-.accordion-btn[aria-expanded='true']::after {
-  content: url('./images/icon-minus.svg');
-}
-</code>
@@ Zeile 143: / 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:
-<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 tip>
-**'':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>
 ===== Praxisbeispiel: Dark-/Light-Mode-Switch in Alarado =====
 ==== Das Problem ====
+<WRAP center round box 80%>
 Im Alarado-Projekt wurde der ''<input type="checkbox">'' mit ''display: none'' versteckt:
 <code css>
-/* Alarado style.css – bisheriger Code */
+/* Alarado CSS – bisheriger Code */
 .switch input {
   display: none;
@@ Zeile 186: / Zeile 166: @@
 Das entfernt das Eingabefeld **komplett** aus dem Accessibility Tree. Screenreader und Tastaturnavigation überspringen den Switch – er ist für Nutzende von Hilfstechnologien unsichtbar und nicht bedienbar.
+</WRAP>
 ==== Das HTML im Alarado-Projekt ====
+<WRAP center round box 80%>
 <code html>
 <label class="switch">
@@ Zeile 196: / Zeile 177: @@
 </label>
 </code>
+</WRAP>
 ==== Die Lösung: Visuell verstecken, aber zugänglich halten ====
 Statt ''display: none'' verwenden wir eine CSS-Technik, die das Element **optisch unsichtbar** macht, es aber im Accessibility Tree **belässt**. Diese Technik nennt man «Visually Hidden»:
+<WRAP center round box 80%>
 <code css>
-/* ✅ Visuell versteckt, aber für Screenreader sichtbar */
+/* Visuell versteckt, aber für Screenreader sichtbar */
 .switch input {
   position: absolute;
@@ Zeile 250: / Zeile 232: @@
   * «Dark Mode aktivieren, Schalter, ausgeschaltet»
   * Nach Klick: «Dark Mode aktivieren, Schalter, eingeschaltet»
+</WRAP>
-==== Übersicht: Verschiedene Verstecktechniken ====
+===== A11y-Grundsätze für jedes Projekt =====
-^ Methode ^ Visuell sichtbar ^ Im Accessibility Tree ^ Einsatz ^
-| ''display: none'' | ❌ | ❌ | Elemente, die wirklich niemand braucht |
-| ''visibility: hidden'' | ❌ | ❌ | Wie ''display:none'', aber Platz bleibt |
-| ''aria-hidden="true"'' | ✅ | ❌ | Dekorative Elemente (Icons, SVGs) |
-| Visually Hidden (CSS) | ❌ | ✅ | Inhalte nur für Screenreader |
-| ''opacity: 0'' | ❌ | ✅ | Animationen, temporär |
-===== Checkliste: A11y-Basics für jedes Projekt =====
   * Semantische HTML-Elemente verwendet (''<button>'', ''<nav>'', ''<main>'', ...)?
+  * Sprache des Dokuments deklariert: ''<html lang="de">''?
   * Alle interaktiven Elemente per Tastatur erreichbar (Tab-Navigation)?
   * Focus-Styles sichtbar – ''outline: none'' nirgends gesetzt?
+  * Texte haben ausreichend Kontrast (Mindest-Verhältnis 4,5:1)?
+  * Schriftgrössen in ''rem'' definiert (skaliert korrekt bei Browser-Zoom)?
   * Bilder haben ein aussagekräftiges ''alt''-Attribut (oder ''alt=""'' wenn dekorativ)?
   * Interaktive Elemente haben ein zugängliches Label (''aria-label'' oder sichtbarer Text)?