de:modul:m291:learningunits:lu06: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:lu06:theorie:c_accessibility [2026/03/14 22:06] – gkochde:modul:m291:learningunits:lu06:theorie:c_accessibility [2026/03/15 18:34] (aktuell) – gkoch
Zeile 42: Zeile 42:
 ==== POUR – Die vier Grundprinzipien ==== ==== 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: Die WCAG sind um vier Grundprinzipien aufgebaut, die unter dem Kürzel **POUR** zusammengefasst werden:
Zeile 48: Zeile 48:
 === 1. Wahrnehmbarkeit (Perceivable) === === 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. Inhalte müssen für Augen, Ohren oder Screenreader erkennbar sein.
Zeile 54: Zeile 54:
   * Bilder brauchen aussagekräftige ''alt''-Attribute   * Bilder brauchen aussagekräftige ''alt''-Attribute
   * Videos benötigen Untertitel oder Transkripte   * 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) === === 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. 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   * 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   * 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">''   * Die Sprache des Dokuments muss im ''<html>'' deklariert sein: ''<html lang="de">''
   * Interaktionen sollen sich erwartungsgemäss verhalten   * Interaktionen sollen sich erwartungsgemäss verhalten
 +
 +{{:de:modul:m291:learningunits:lu05:theorie:focus-indicators-example-2048x768.png?nolink&800|}}
  
 === 4. Robustheit (Robust) === === 4. Robustheit (Robust) ===
  • de/modul/m291/learningunits/lu06/theorie/c_accessibility.1773522385.txt.gz
  • Zuletzt geändert: 2026/03/14 22:06
  • von gkoch