Aufgaben-Python/courses/html_css/04_barrierefreiheit_und_aria/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.