Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu06:theorie:c_accessibility [2026/03/14 22:06] – gkoch
+++ de:modul:m291:learningunits:lu06:theorie:c_accessibility [2026/03/16 16:47] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
-====== LU06a – Accessibility Basics (A11y) ======
+====== LU06b – Accessibility (A11y) ======
 {{:de:modul:m291:learningunits:lu05:theorie:1655410107982.jpeg?nolink&800| Illustration for Accessibility}}
@@ Zeile 42: / Zeile 42: @@
 ==== POUR – Die vier Grundprinzipien ====
-{{:de:modul:m291:learningunits:lu05:theorie:digital-accessibility-standards-scaled.jpg?nolink&800|}}
+{{:de:modul:m291:learningunits:lu06:theorie:accessability_small.png?direct|}}
 Die WCAG sind um vier Grundprinzipien aufgebaut, die unter dem Kürzel **POUR** zusammengefasst werden:
@@ Zeile 48: / Zeile 48: @@
 === 1. Wahrnehmbarkeit (Perceivable) ===
-{{:de:modul:m291:learningunits:lu05:theorie:chatgpt_image_mar_8_2026_09_46_15_pm.png?nolink&300|}}
+{{:de:modul:m291:learningunits:lu06:theorie:venngage-3.png?nolink&500|}}
 Inhalte müssen für Augen, Ohren oder Screenreader erkennbar sein.
@@ Zeile 54: / Zeile 54: @@
   * 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) -> das Kontrastverhältnis von zwei Farben kann z.B. mittels diesem Online-Tools herausgefunden werden: [[https://coolors.co/contrast-checker/112a46-7992ac|Coolers.co Text-Hintergrund-Kontrastrechner]]
+  * Texte müssen ausreichend Kontrast zum Hintergrund haben (Mindest-Verhältnis: **4.5:1** für Fliesstext) -> das Kontrastverhältnis von zwei Farben kann z.B. mittels diesem Online-Tools herausgefunden werden: [[https://colorffy.com/contrast-checker|colorffy.com Text-Hintergrund-Kontrast-Checker]]
+{{:de:modul:m291:learningunits:lu06:theorie:screenshot_2026-03-14_at_22.51.18.png?nolink&600|}}
 === 2. Bedienbarkeit (Operable) ===
-{{:de:modul:m291:learningunits:lu05:theorie:focus-indicators-example-2048x768.png?nolink&600|}}
+{{:de:modul:m291:learningunits:lu06:theorie:tab_browsing.gif?nolink| Alarado Homepage interagieren mit Tastatur}}
 Die Website muss ohne Maus – also nur mit Tastatur oder Sprachsteuerung – vollständig nutzbar sein.
-  * Focus-Styles beibehalten (nie ''outline: none'' setzen)
+  * Focus-Styles beibehalten
   * 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
@@ Zeile 75: / Zeile 77: @@
   * Die Sprache des Dokuments muss im ''<html>'' deklariert sein: ''<html lang="de">''
   * Interaktionen sollen sich erwartungsgemäss verhalten
+{{:de:modul:m291:learningunits:lu05:theorie:focus-indicators-example-2048x768.png?nolink&800|}}
 === 4. Robustheit (Robust) ===
@@ Zeile 89: / Zeile 93: @@
 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.
+<WRAP center round info 80%>
+**Windows**: Sprachausgabe einschalten -> [[https://support.microsoft.com/de-de/windows/kapitel-1-einf%C3%BChrung-in-die-sprachausgabe-7fe8fd72-541f-4536-7658-bfc37ddaf9c6|Anleitung für Windows-Computer]] \\
+**Mac**: VoiceOver einschalten -> [[https://support.apple.com/de-ch/guide/voiceover/mchlp2687/mac|Anleitung für Mac]]
+</WRAP>