Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu05:theorie:c_accessibility [2026/03/08 22:15] – gkoch
+++ de:modul:m291:learningunits:lu05:theorie:c_accessibility [2026/03/08 22:22] (aktuell) – gkoch
@@ Zeile 24: / Zeile 24: @@
 ==== Warum ist A11y wichtig? ====
-{{:de:modul:m291:learningunits:lu05:theorie:inclusion_0.5x.png?nolink&400|}}
+{{: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 34: / Zeile 34: @@
 ===== 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.
@@ Zeile 46: / Zeile 48: @@
 === 1. Wahrnehmbarkeit (Perceivable) ===
-{{:de:modul:m291:learningunits:lu05:theorie:chatgpt_image_mar_8_2026_09_46_15_pm.png?nolink&600|}}
+{{: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.
@@ Zeile 56: / Zeile 58: @@
 === 2. Bedienbarkeit (Operable) ===
-{{:de:modul:m291:learningunits:lu05:theorie:focus-indicators-example-2048x768.png?nolink&400|}}
+{{: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 66: / Zeile 68: @@
 === 3. Verständlichkeit (Understandable) ===
-{{:de:modul:m291:learningunits:lu05:theorie:language_4x.png?nolink&400|}}
+{{:de:modul:m291:learningunits:lu05:theorie:language_4x.png?nolink&300|}}
 Sprache und Aufbau müssen logisch und vorhersehbar sein.
@@ Zeile 76: / Zeile 78: @@
 === 4. Robustheit (Robust) ===
-{{:de:modul:m291:learningunits:lu05:theorie:elizabeth-woolner-9xxnzcjz8ba-unsplash.jpg?nolink&600|}}
+{{: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 102: / 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%>