Design

Barrierefreiheit / Accessibility

Gestaltung von Software und Websites, die für alle Menschen nutzbar sind – auch für Personen mit Behinderungen. Ab 2025 in der EU für viele digitale Angebote gesetzlich verpflichtend.

Digitale Barrierefreiheit ist nicht nur ein ethisches Gebot, sondern wird zunehmend zur gesetzlichen Pflicht. Mit dem European Accessibility Act (EAA) und dem deutschen Barrierefreiheitsstärkungsgesetz (BFSG) müssen ab Juni 2025 viele digitale Produkte und Dienstleistungen barrierefrei sein. Darüber hinaus profitieren alle Nutzer von zugänglichen Interfaces – Barrierefreiheit und gute Usability gehen Hand in Hand.

Was ist Barrierefreiheit / Accessibility?

Barrierefreiheit (Accessibility, kurz a11y) im digitalen Kontext bedeutet, dass Websites, Apps und Software von allen Menschen genutzt werden können, unabhängig von körperlichen oder kognitiven Einschränkungen. Das umfasst visuelle (Blindheit, Sehschwäche, Farbenblindheit), auditive (Gehörlosigkeit, Schwerhörigkeit), motorische (eingeschränkte Feinmotorik, Nutzung von Spezialeingabegeräten) und kognitive Einschränkungen (Leseschwäche, Aufmerksamkeitsstörungen). Der internationale Standard sind die Web Content Accessibility Guidelines (WCAG) in der aktuellen Version 2.2 mit drei Konformitätsstufen: A, AA und AAA.

Wie funktioniert Barrierefreiheit / Accessibility?

Barrierefreie Webentwicklung basiert auf vier Prinzipien (POUR): Wahrnehmbar (Perceivable) – alle Inhalte müssen über mindestens einen Sinneskanal zugänglich sein (z.B. Alt-Texte für Bilder, Untertitel für Videos). Bedienbar (Operable) – alle Funktionen müssen per Tastatur, Screenreader und alternativen Eingabegeräten nutzbar sein. Verständlich (Understandable) – Inhalte und Navigation müssen klar und vorhersehbar sein. Robust – Inhalte müssen von verschiedenen Technologien (Browser, Screenreader, Vergrößerungssoftware) korrekt interpretiert werden können. Technisch wird dies durch semantisches HTML, ARIA-Attribute, ausreichende Farbkontraste (mindestens 4,5:1), Tastaturbedienbarkeit und Skip-Navigation umgesetzt.

Praxisbeispiele

Alt-Texte für Bilder: Statt alt='' bekommt jedes informative Bild einen beschreibenden Text, den Screenreader vorlesen: alt='Balkendiagramm zeigt Umsatzsteigerung von 15% in Q3 2025'.

Tastatur-Navigation: Alle interaktiven Elemente (Links, Buttons, Formulare, Menüs) sind per Tab-Taste erreichbar und visuell hervorgehoben (Focus-Indicator).

Untertitel und Transkripte: Videos haben Untertitel (Closed Captions) für Gehörlose und vollständige Transkripte für Screenreader-Nutzer.

Farbkontrast: Text auf farbigem Hintergrund erfüllt mindestens das WCAG-AA-Kontrastverhältnis von 4,5:1 – auch bei Buttons und Formularfeldern.

Verständliche Fehlermeldungen: Formular-Fehler werden klar benannt und direkt beim betroffenen Feld angezeigt, nicht nur als rote Farbe am oberen Rand.

Typische Anwendungsfälle

E-Commerce: Barrierefreie Shops erschließen die Zielgruppe von über 10 Millionen Menschen mit Behinderung allein in Deutschland

Öffentliche Verwaltung: Behörden-Websites müssen nach EU-Richtlinie 2016/2102 bereits seit 2020 barrierefrei sein

Banking und Finanzdienstleistungen: Unter das BFSG fallende Dienste müssen ab 2025 barrierefrei sein

Bildungsplattformen: Barrierefreie Lernmaterialien ermöglichen inklusive Bildung

Unternehmens-Intranet: Auch interne Tools sollten barrierefrei sein, um allen Mitarbeitern Teilhabe zu ermöglichen

Vorteile und Nachteile

Vorteile

Gesetzliche Compliance: Vermeidung von Abmahnungen und Bußgeldern durch BFSG/EAA-Konformität
Größere Zielgruppe: Über 1 Milliarde Menschen weltweit leben mit einer Behinderung
Bessere SEO: Semantisches HTML, Alt-Texte und klare Struktur verbessern auch das Suchmaschinen-Ranking
Bessere Usability für alle: Barrierefreiheit verbessert die Nutzererfahrung auch für Menschen ohne Einschränkungen
Positive Markenwahrnehmung: Inklusive Produkte stärken das Markenimage und Kundenvertrauen

Nachteile

Initialer Aufwand: Nachträgliche Barrierefreiheit bestehender Anwendungen kann aufwendig sein
Expertise erforderlich: Korrektes ARIA, Screenreader-Testing und WCAG-Konformität erfordern Spezialwissen
Design-Einschränkungen: Manche visuellen Effekte (niedriger Kontrast, Animationen) müssen angepasst werden
Laufende Pflege: Neue Features müssen kontinuierlich auf Barrierefreiheit geprüft werden

Häufig gestellte Fragen zu Barrierefreiheit / Accessibility

Was fordert das Barrierefreiheitsstärkungsgesetz (BFSG)?

Das BFSG setzt den European Accessibility Act (EAA) in deutsches Recht um. Ab 28. Juni 2025 müssen viele digitale Produkte und Dienstleistungen barrierefrei sein: E-Commerce, Banking, Telekommunikation, E-Books und mehr. Betroffen sind B2C-Anbieter. Die Anforderungen orientieren sich an WCAG 2.1 Level AA. Verstöße können mit Bußgeldern bis 100.000 EUR geahndet werden.

Wie teste ich meine Website auf Barrierefreiheit?

Automatisierte Tools (axe, Lighthouse, WAVE) finden ca. 30-40% der Probleme: fehlende Alt-Texte, Kontrastfehler, fehlende Labels. Manuelles Testing ergänzt: Tastatur-Navigation (Tab, Enter, Escape), Screenreader-Test (VoiceOver auf Mac, NVDA auf Windows), Zoom auf 200%, und Prüfung aller interaktiven Elemente. Idealerweise wird auch mit betroffenen Nutzern getestet.

Was kostet die Umsetzung von Barrierefreiheit?

Bei Neuentwicklung kostet Barrierefreiheit ca. 10-15% mehr als ohne. Nachträgliche Barrierefreiheit bestehender Websites liegt typischerweise bei 5.000-30.000 EUR je nach Umfang. Ein Accessibility-Audit kostet 2.000-8.000 EUR. Langfristig spart Barrierefreiheit Kosten: bessere Wartbarkeit, breitere Zielgruppe und Vermeidung von Rechtsrisiken.