Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu06:theorie:c_accessibility [2026/03/14 22:52] – 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 60: / Zeile 60: @@
 === 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 77: / 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 91: / 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>