de:modul:m291:learningunits:lu05:theorie:c_accessibility

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu05:theorie:c_accessibility [2026/03/08 21:16] – gkochde:modul:m291:learningunits:lu05:theorie:c_accessibility [2026/03/08 22:22] (aktuell) – gkoch
Zeile 1: Zeile 1:
 ====== LU05c – Accessibility Basics (A11y) ====== ====== 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> </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. 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? ==== ==== 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: Barrierefreiheit ist kein «Nice-to-have» mehr – sie ist aus drei Gründen relevant:
Zeile 30: Zeile 35:
 ===== WCAG – Der internationale Standard ===== ===== 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 ====+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.
  
-^ Stufe ^ Bedeutung ^ Einsatz ^ 
-| **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 ==== ==== 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: Die WCAG sind um vier Grundprinzipien aufgebaut, die unter dem Kürzel **POUR** zusammengefasst werden:
  
 === 1. Wahrnehmbarkeit (Perceivable) === === 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. Inhalte müssen für Augen, Ohren oder Screenreader erkennbar sein.
  
   * Bilder brauchen aussagekräftige ''alt''-Attribute   * 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)   * Texte müssen ausreichend Kontrast zum Hintergrund haben (Mindest-Verhältnis: **4,5:1** für Fliesstext)
  
 === 2. Bedienbarkeit (Operable) === === 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. Die Website muss ohne Maus – also nur mit Tastatur oder Sprachsteuerung – vollständig nutzbar sein.
Zeile 62: Zeile 67:
  
 === 3. Verständlichkeit (Understandable) === === 3. Verständlichkeit (Understandable) ===
 +
 +{{:de:modul:m291:learningunits:lu05:theorie:language_4x.png?nolink&300|}}
  
 Sprache und Aufbau müssen logisch und vorhersehbar sein. Sprache und Aufbau müssen logisch und vorhersehbar sein.
Zeile 70: Zeile 77:
  
 === 4. Robustheit (Robust) === === 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. Inhalte müssen auf verschiedenen Geräten und mit Hilfstechnologien (Screenreader, Braille-Ausgabegeräte) zuverlässig funktionieren.
Zeile 95: Zeile 104:
   * Für Screenreader als «Schaltfläche» erkennbar   * 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%> <WRAP round box 80%>
  • de/modul/m291/learningunits/lu05/theorie/c_accessibility.1773001004.txt.gz
  • Zuletzt geändert: 2026/03/08 21:16
  • von gkoch