Barrierefreiheit in der Webentwicklung

Dauer: 2 Tage

Zielgruppe

Entwickler, QA-Engineers und technische Rollen (z.B. technische Leads und Product Owner), die inklusive und rechtskonforme digitale Produkte entwickeln möchten. Vorkenntnisse im Bereich Barrierefreiheit sind nicht erforderlich — der Workshop startet von Grund auf und baut Kenntnisse und praktische Fähigkeiten schrittweise auf.

Voraussetzungen

• Grundkenntnisse in HTML, CSS und JavaScript
• Allgemeines Verständnis von Webentwicklungskonzepten
• Keine Vorerfahrung mit Barrierefreiheit erforderlich
• Eigenes Laptop mit folgender Software vor dem Workshop installieren:
  • Ein moderner Browser (Google Chrome oder Microsoft Edge empfohlen)
  • Browser-Erweiterungen: axe DevTools und WAVE Evaluation Tool
  • Ein Screenreader: Windows — NVDA (kostenlos) oder Narrator (integriert); macOS/iOS — VoiceOver (integriert); Android — TalkBack (integriert)
  • Ein Code-Editor (z.B. Visual Studio Code)
  • Node.js (LTS-Version) — für CLI-basierte Barrierefreiheits-Testwerkzeuge

Lernziele

Nach Abschluss dieses Workshops werden die Teilnehmer in der Lage sein:

• Die Kernprinzipien digitaler Barrierefreiheit zu verstehen und zu erklären, warum sie für Nutzer, Unternehmen und die Gesetzgebung relevant sind
• Die zutreffenden gesetzlichen Rahmenbedingungen und Standards zu identifizieren und anzuwenden (WCAG 2.1/2.2, European Accessibility Act 2025, BFSG, W-ADG)
• Verantwortlichkeiten für Barrierefreiheit in verschiedenen Rollen eines Produktteams zu benennen
• Barrierefreiheit frühzeitig im UX/UI-Designprozess zu berücksichtigen
• Barrierefreies HTML, CSS, JavaScript und ARIA zu schreiben und häufige Probleme zu beheben
• Korrekte Focus-Gestaltung und Focus-Management für Tastatur- und Screenreader-Nutzer zu implementieren
• Etablierte barrierefreie Muster für gängige UI-Komponenten einzusetzen (Navigation, Dialoge, Formulare, Tabs)
• Drittanbieter-UI-Bibliotheken und Frameworks auf Barrierefreiheits-Schwachstellen zu bewerten
• Automatisierte und manuelle Barrierefreiheitstests durchzuführen und Prüfungen in CI/CD-Pipelines zu integrieren

Agenda

Tag 1 – Vormittag: Grundlagen und rechtliche Rahmenbedingungen

1. Einführung in digitale Barrierefreiheit

• Was Barrierefreiheit bedeutet und wer davon profitiert — das Spektrum von Behinderungen und assistive Technologien
• Der Business Case: rechtliche Risiken, Marktreichweite und SEO-Vorteile
• Überblick über assistive Technologien: Screenreader, Tastaturnavigation, Sprachsteuerung, Bildschirmvergrößerung

2. Gesetzliche Rahmenbedingungen und Standards

• WCAG 2.1 und 2.2: Aufbau, Konformitätsstufen (A, AA, AAA) und Erfolgskriterien
• Der European Accessibility Act (EAA) 2025 und seine Auswirkungen auf Softwareprodukte
• Deutsches Recht: BFSG und W-ADG — Anwendungsbereich, Pflichten und Fristen
• Die POUR-Prinzipien im Detail: Wahrnehmbar, Bedienbar, Verständlich, Robust
• Rollenverantwortung: Wer ist im Produktteam für Barrierefreiheit zuständig?

Praktische Übung: Tastaturnavigation — eine echte Website ausschließlich per Tastatur bedienen und Problempunkte identifizieren.

Tag 1 – Nachmittag: UX/UI-Design und Barrierefreiheit

3. Barrierefreiheit im Designprozess

• Farbkontrast: WCAG-Anforderungen, Werkzeuge und typische Fehler
• Typografie, Abstände und Touch-Target-Größen für inklusives Design
• Shifting Left: Barrierefreiheit in Wireframes und Prototypen einbetten
• Barrierefreie Designmuster für gängige UI-Komponenten: Navigation, Dialoge, Formulare, Tabs, Karusselle

4. Design-Review und Übergabe

• Designs vor der Implementierung auf Barrierefreiheit prüfen
• Barrierefreiheitsanforderungen vom Design in die Entwicklung kommunizieren
• Design-Tokens und Component Libraries barrierefrei einsetzen

Praktische Übung: Farbkontrast-Lab — ein bereitgestelltes Design-Mockup auditieren, Verstöße identifizieren und Korrekturen vorschlagen.

Tag 2 – Vormittag: Barrierefreie Programmierung

5. Semantisches HTML und ARIA

• Semantische HTML-Elemente und Landmark-Regionen: <main>, <nav>, <header>, <aside>, Überschriften
• Wann und wie ARIA einzusetzen ist: Rollen, Zustände und Eigenschaften
• ARIA-Authoring-Practices: Die erste ARIA-Regel, Live-Regionen, aria-label vs. aria-labelledby
• Focus-Gestaltung: sichtbare Fokusindikatoren und :focus-visible
• Focus-Management: Modaldialoge, Single-Page-Navigation, dynamische Inhalte

6. Barrierefreie JavaScript-Muster

• Dynamische Inhaltsaktualisierungen mit ARIA-Live-Regionen ankündigen
• Tastatur-Interaktionsmuster: Roving Tabindex, zusammengesetzte Widgets
• Barrierefreie Custom-Komponenten erstellen: Dropdown-Menüs, Accordions, Datepicker
• Häufige Fallstricke: click-only-Handler, div-basierte Buttons, fehlende Tastaturunterstützung

Praktische Übung: Live-Coding-Session — eine Reihe absichtlich unzugänglicher UI-Komponenten mit semantischem HTML, ARIA und korrektem Focus-Management beheben.

Tag 2 – Nachmittag: Testing, Werkzeuge und Best Practices

7. Automatisiertes Barrierefreiheits-Testing

• Überblick über automatisierte Werkzeuge: axe DevTools, Lighthouse, pa11y, IBM Equal Access Checker
• Was automatisierte Werkzeuge erkennen können — und was nicht (typischerweise 30–40 % der Probleme)
• axe oder pa11y in CI/CD-Pipelines integrieren: Beispiele für GitHub Actions und Azure DevOps
• Linting für Barrierefreiheit: eslint-plugin-jsx-a11y für React und ähnliche Werkzeuge für andere Frameworks

8. Manuelles Testing und Screenreader

• Manuelle Testcheckliste: Tastaturnavigation, Fokusreihenfolge, Farbkontrast, Formular-Labels, Fehlermeldungen
• Screenreader-Grundlagen: NVDA unter Windows, VoiceOver unter macOS — Modi, virtueller Cursor, wichtige Tastenkürzel
• Dynamische Inhalte und Single-Page-Anwendungen mit Screenreadern testen
• UI-Komponentenbibliotheken und Frameworks auf Barrierefreiheitsqualität bewerten

9. Barrierefreiheit im Entwicklungs-Workflow

• Barrierefreiheits-Akzeptanzkriterien in User Stories und Definition of Done
• Schlanker Barrierefreiheits-Review-Prozess für Pull Requests
• Behebungsstrategien: Probleme nach Auswirkung und Aufwand priorisieren
• Aktuell bleiben: WCAG-Updates, Browser-Kompatibilitätsänderungen, Community-Ressourcen

Praktische Übung: Vollständiger Barrierefreiheits-Audit — automatisierte Werkzeuge und manuelle Screenreader-Tests an einer bereitgestellten Beispielanwendung durchführen, Befunde dokumentieren und einen priorisierten Behebungsplan erstellen.

Praktische Übungen

• Eine echte Website ausschließlich per Tastatur bedienen und WCAG-Verstöße identifizieren.
• Ein Design-Mockup auf Farbkontrast und Touch-Target-Konformität auditieren und Korrekturen vorschlagen.
• Einen Satz unzugänglicher HTML/CSS/JavaScript-Komponenten in einer Live-Coding-Session beheben.
• pa11y in eine CI/CD-Pipeline integrieren und Fehlerschwellenwerte konfigurieren.
• Einen vollständigen Barrierefreiheits-Audit (automatisiert + manueller Screenreader-Test) an einer Beispiel-Webanwendung durchführen und eine priorisierte Problemliste erstellen.

Ergebnisse

• Sicheres Verständnis der Anforderungen aus WCAG 2.1/2.2, EAA 2025, BFSG und W-ADG
• In der Lage, barrierefreies HTML, CSS, JavaScript und ARIA von Beginn an zu schreiben
• Versiert im Einsatz von axe DevTools, NVDA und VoiceOver für Barrierefreiheitstests
• Fähig, automatisierte Barrierefreiheitsprüfungen in CI/CD-Pipelines zu integrieren
• Bereit, Barrierefreiheitspraktiken in Team-Workflows, Design-Reviews und die Definition of Done einzuführen