alex-mueller/it-praxisportal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
it-praxisportal/courses/html_css/04_barrierefreiheit_und_aria
History
Alex Mueller 2571cb8847 feat(ux): responsive kurs-sidebar und kapitel-drawer für alle 13 kurse & web-ide 
- Dynamic Sidebar mit window.COURSES_MANIFEST für 13 Kurse (216 Kapitel)
- Kurswechsler Dropdown mit Direktnavigation
- Fortschrittsanzeige mit Solved-Checkmarks (✓) aus localStorage
- Responsive Off-Canvas Drawer mit Floating Action Button (☰ Kapitel) & Backdrop auf Mobile/Tablets
- Web-IDE Topbar Drawer-Button (☰ Kapitel) für unterbrechungsfreien Vollbild-Editor
- Saubere Bereinigung redundanter statischer Legacy-Sidebars
2026-09-12 13:49:46 +02:00
..
aufgabe.html Branding-Update für it-praxisportal.de: Neuer Hero-Bereich, SVG-Favicon, OpenGraph-Metadaten und Plattform-Titel 2026-09-12 13:26:06 +02:00
index.html feat(ux): responsive kurs-sidebar und kapitel-drawer für alle 13 kurse & web-ide 2026-09-12 13:49:46 +02:00
musterloesung.html Branding-Update für it-praxisportal.de: Neuer Hero-Bereich, SVG-Favicon, OpenGraph-Metadaten und Plattform-Titel 2026-09-12 13:26:06 +02:00
README.md Vollständige Umsetzung von Phase A bis C: (1) SQL & Data Analytics Master (16 Module), (2) HTML5 & Modern CSS3 (16 Module) und (3) Go Cloud Microservices (16 Module). Plattform umfasst nun 131 Module über 7 Sprachen 2026-08-30 13:10:38 +02:00
test_aufgabe.js Vollständige Umsetzung von Phase A bis C: (1) SQL & Data Analytics Master (16 Module), (2) HTML5 & Modern CSS3 (16 Module) und (3) Go Cloud Microservices (16 Module). Plattform umfasst nun 131 Module über 7 Sprachen 2026-08-30 13:10:38 +02:00

README.md

HTML 04: Barrierefreiheit (A11y) & ARIA ♿

Willkommen in Modul 04!

In dieser Lerneinheit lernst du, wie Webseiten barrierefrei (WCAG 2.2 konform) gestaltet werden und wie WAI-ARIA Screenreadern und Tastatur-Nutzern Orientierung gibt.

💡 1. Das Wichtigste in Kürze

Skip-Links & Tastatur-Fokus

  • Ermöglichen Tastatur-Nutzern das direkte Überspringen langer Navigationsmenüs zum Hauptinhalt (#main-content).
  • Interaktive Steuerelemente müssen echte <button>- oder <a>-Tags sein, niemals klickbare <div>s.

Wichtige ARIA-Attribute

  • aria-label: Eindeutiger Name für Icons oder Buttons ohne sichtbaren Text.
  • aria-expanded: Zeigt an, ob ein Dropdown/Accordion ein- oder ausgeklappt ist ("true" / "false").
  • aria-controls: Verweist auf die id des gesteuerten Elements.
  • aria-hidden="true": Versteckt rein dekorative Elemente vor Screenreadern.
  • aria-describedby: Verknüpft Eingabefelder mit Hilfetexten oder Fehlermeldungen.
  • role="status" & aria-live="polite": Kündigt dynamische Inhaltsänderungen für Screenreader an.

🎯 Teilziele in aufgabe.html

  1. Skip-Link: Erstelle <a href="#main-content"> ganz oben im <body> und <main id="main-content">.
  2. Icon-Button: Erstelle <button type="button" aria-label="Modal schließen"> mit einem Icon, das aria-hidden="true" hat.
  3. Accordion: Baue einen Button mit aria-expanded="false" und aria-controls="faq-answer" mit zugehörigem Content-Container.
  4. Hilfetext-Verknüpfung: Erstelle ein Input-Feld mit aria-describedby="password-hint" und den zugehörigen Hinweistext.
  5. Live Region: Richte einen Benachrichtigungsbereich mit role="status" und aria-live="polite" ein.