Workflow im Entwicklungsprozess

Barrierefreiheit in der Entwicklungsphase

In der Entwicklungsphase entscheidet sich, ob die im Design angelegten Anforderungen an Barrierefreiheit technisch korrekt umgesetzt werden. Gleichzeitig ist es der Punkt, an dem viele zusätzliche Barrieren entstehen können – etwa durch unsemantischen Code, unzureichende Fokussteuerung oder dynamische Inhalte ohne ARIA-Unterstützung.

Ziel dieses Workflows: Entwicklung von funktional barrierefreien Komponenten und Seiten auf Basis technischer Standards und Best Practices.

Warum barrierefreie Entwicklung wichtig ist

Selbst ein perfekt barrierefreies Design verliert seine Wirkung, wenn es nicht korrekt umgesetzt wird. Entwickler*innen tragen die Verantwortung für sauberen, semantischen Code, der für Screenreader und andere Hilfsmittel zugänglich ist. Eine konsequente Beachtung der Accessibility-Kriterien fördert nicht nur die Nutzung für Menschen mit Behinderungen, sondern verbessert oft auch Wartbarkeit, Performance und SEO.

Typische Fehler in der Entwicklung:

• Unvollständige HTML-Strukturen (fehlende Labels, nicht semantische Container)

• Fokus geht beim Navigieren verloren oder ist nicht sichtbar

• Interaktive Elemente ohne Tastaturbedienung

• Dynamische Inhalte ohne Ankündigung (z. B. bei Statusmeldungen)

Workflow-Schritte im Überblick:

1. Technische Anforderungen verstehen und umsetzen

   • Umsetzung gemäß WCAG 2.1/2.2 Erfolgskriterien

   • Verwendung nativer HTML-Elemente vor ARIA

   • Kenntnis und Anwendung barrierefreier HTML-Patterns (z. B. accordions, modals)

2. Sauberen, semantischen Code schreiben

   • HTML5-Elemente entsprechend ihrer Bedeutung einsetzen (z. B. <nav>, <main>, <button>)

   • Beschriftungen mit <label>, aria-label oder aria-labelledby korrekt verwenden

3. Tastaturbedienung sicherstellen

   • Alle interaktiven Elemente per Tastatur erreichbar und bedienbar machen

   • Sichtbarer Fokuszustand mit CSS gestalten

   • Fokusreihenfolge mit tabindex bewusst steuern, aber sparsam einsetzen

4. Arbeiten mit ARIA (Accessible Rich Internet Applications)

   • Nur dort einsetzen, wo native HTML-Lösungen nicht ausreichen

   • Rollenzuweisungen (role), Zustandsinformationen (aria-pressed, aria-expanded) korrekt verwenden

5. Responsives Verhalten barrierefrei gestalten

   • Struktur und Interaktion auch auf kleinen Displays zugänglich halten

   • Keine Funktionen nur durch Hover oder Swipe zugänglich machen

6. Fehlermeldungen und Statusrückmeldungen umsetzen

   • Visuell UND für Screenreader erfassbar (z. B. mit aria-live)

   • Klare, verständliche Hinweise in Formularen

7. Code reviewen und testen

   • Regelmäßige Code Reviews mit A11y-Checkliste

   • Kombination von automatisierten Tests (z. B. mit Axe) und manuellen Checks

   • Kollaboration mit QA und ggf. Nutzenden mit assistiver Technologie

Rollen im Workflow:

• UX Designer*innen: Nutzerzentrierte Gestaltung, Anforderungen aus Nutzertests und WCAG ableiten.

• UI Designer*innen: Umsetzung von visueller Klarheit, Interaktion und Fokusführung.

• Produktmanagement: Sicherstellung der Einhaltung von Anforderungen, Fristen und rechtlichen Vorgaben.

• Entwicklung: Frühzeitige Einbindung zur Machbarkeitsabschätzung.

Ergebnisse des Workflows:

• Entwürfe, die barrierefreie Gestaltungskriterien erfüllen.

• Dokumentierte Anforderungen für die technische Umsetzung.

• Reduzierter Anpassungsaufwand in späteren Phasen

Tipp: Eine grafische Übersicht oder Checkliste kann helfen, diesen Workflow teamweit zu etablieren. Auf Wunsch kann eine solche Darstellung ergänzt werden.