Barrierefreies Webdesign: Warum Accessibility kein Nice-to-have mehr ist

Das European Accessibility Act kommt 2025 #

Ab Juni 2025 tritt das Barrierefreiheitsstaerkungsgesetz (BFSG) in Kraft, die deutsche Umsetzung des European Accessibility Act. Fuer Webdesigner und Freelancer bedeutet das: Barrierefreiheit ist nicht mehr optional. Unternehmen, die digitale Produkte und Dienstleistungen anbieten, muessen ihre Websites und Apps barrierefrei gestalten. Wer das ignoriert, riskiert nicht nur Bussgelder, sondern verliert auch potenzielle Kunden.

Als Designer mit ueber 15 Jahren Erfahrung beobachte ich, dass viele Kollegen Accessibility noch immer als Einschraenkung sehen. Das Gegenteil ist der Fall: Barrierefreies Design fuehrt fast immer zu besserem Design fuer alle Nutzer.

Was bedeutet Barrierefreiheit im Webdesign konkret? #

Die Web Content Accessibility Guidelines (WCAG) 2.2 definieren vier Grundprinzipien, die jede Website erfuellen sollte:

Wahrnehmbar: Alle Inhalte muessen fuer verschiedene Sinne zugaenglich sein. Bilder brauchen Alternativtexte, Videos brauchen Untertitel, und Farben duerfen nie der einzige Informationstraeger sein.

Bedienbar: Die gesamte Website muss per Tastatur navigierbar sein. Interaktive Elemente brauchen sichtbare Fokus-Indikatoren. Animationen muessen pausierbar sein.

Verstaendlich: Texte muessen klar formuliert sein. Formulare brauchen eindeutige Labels und hilfreiche Fehlermeldungen. Die Navigation muss konsistent und vorhersehbar funktionieren.

Robust: Der Code muss so geschrieben sein, dass verschiedene Hilfstechnologien ihn korrekt interpretieren koennen. Dazu gehoeren Screenreader, Braillezeilen und Sprachsteuerungen.

Die haeufigsten Accessibility-Fehler und wie man sie vermeidet #

Fehler 1: Unzureichender Farbkontrast

Der haeufigste Fehler in meiner Praxis. Hellgrauer Text auf weissem Hintergrund mag aesthetisch wirken, ist aber fuer Menschen mit Sehbeeintraechtigung unleserlich. Die WCAG fordern ein Kontrastverhaeltnis von mindestens 4.5:1 fuer normalen Text und 3:1 fuer grossen Text ab 18pt.

Praktischer Tipp: Nutze Tools wie den WebAIM Contrast Checker direkt waehrend des Designprozesses. Integriere Kontrastpruefung in dein Figma-Setup mit Plugins wie Stark oder A11y – Color Contrast Checker. So fallen Probleme auf, bevor sie in die Entwicklung gehen.

Fehler 2: Fehlende oder schlechte Alt-Texte

Ein leeres alt-Attribut ist manchmal korrekt, naemlich bei rein dekorativen Bildern. Aber informative Bilder brauchen beschreibende Alternativtexte. Der haeufigste Fehler: Alt-Texte wie bild1.jpg oder Foto. Ein guter Alt-Text beschreibt, was auf dem Bild zu sehen ist und welche Information es vermittelt.

Beispiel: Statt Teamfoto besser Fuenf Teammitglieder bei der woechentlichen Designkritik im Buero, vier sitzen am Tisch, eine Person praesentiert am Whiteboard.

Fehler 3: Nur mit der Maus bedienbar

Teste jede Website einmal komplett nur mit der Tastatur. Druecke Tab, um durch die Seite zu navigieren. Kannst du jedes interaktive Element erreichen? Siehst du immer, wo der Fokus gerade ist? Kannst du Dropdown-Menues oeffnen und schliessen? Funktionieren modale Dialoge korrekt?

Wenn du irgendwo haengen bleibst oder den Fokus verlierst, haben Nutzer mit motorischen Einschraenkungen dasselbe Problem, nur dass sie keine Maus als Ausweichmoeglichkeit haben.

Fehler 4: Semantisch falsches HTML

Ein div mit einem Click-Handler ist kein Button. Ein span mit grosser Schrift ist keine Ueberschrift. Screenreader verlassen sich auf semantisches HTML, um die Seitenstruktur zu verstehen. Verwende die richtigen HTML-Elemente: button fuer Aktionen, a fuer Links, h1 bis h6 fuer Ueberschriften in korrekter Hierarchie, nav fuer Navigation, main fuer den Hauptinhalt.

Accessibility als Designprozess #

Barrierefreiheit nachtraeglich einzubauen ist teuer und frustrierend. Der effiziente Weg ist, sie von Anfang an mitzudenken.

Im Discovery-Phase: Definiere Accessibility-Anforderungen gemeinsam mit dem Kunden. Klaere, welches WCAG-Level angestrebt wird. Level AA ist der Standard, Level AAA ist fuer die meisten Projekte unrealistisch.

Im Design: Arbeite mit ausreichenden Kontrasten, klaren Schriftgroessen ab 16px fuer Fliesstext und grosszuegigen Klickflaechen von mindestens 44×44 Pixel. Gestalte Fokus-States, die sichtbar und aesthetisch sind. Plane die Tab-Reihenfolge bewusst.

In der Entwicklung: Nutze semantisches HTML als Basis. Ergaenze ARIA-Attribute nur dort, wo natives HTML nicht ausreicht. Teste mit echten Screenreadern, nicht nur mit automatisierten Tools.

Im Testing: Automatisierte Tools wie axe oder Lighthouse finden etwa 30% der Accessibility-Probleme. Die restlichen 70% erfordern manuelles Testen: Tastaturnavigation, Screenreader-Tests und idealerweise Tests mit echten Nutzern mit Behinderungen.

Der Business Case fuer Barrierefreiheit #

In Deutschland leben etwa 10 Millionen Menschen mit einer anerkannten Behinderung. Dazu kommen Millionen aeltere Menschen mit altersbedingten Einschraenkungen und Menschen mit temporaeren Beeintraechtigungen wie einem gebrochenen Arm. Zusammen sind das 15 bis 20 Prozent der Bevoelkerung, eine Zielgruppe, die kein Unternehmen ignorieren sollte.

Barrierefreie Websites haben ausserdem bessere SEO-Werte. Google bewertet semantisches HTML, Alternativtexte und klare Seitenstrukturen positiv. Die Ueberschneidung zwischen Accessibility Best Practices und SEO Best Practices liegt bei geschaetzten 70 Prozent.

Und nicht zuletzt: Barrierefreies Design ist rechtlich zunehmend verpflichtend. Mit dem BFSG koennen Verstoesse mit Bussgeldern von bis zu 100.000 Euro geahndet werden.

Tools fuer den Designalltag #

Meine persoenliche Tool-Empfehlung fuer den taeglichen Einsatz:

Fuer Figma: Stark Plugin fuer Kontrastpruefung und Farbenblindheit-Simulation. A11y Annotation Kit fuer die Dokumentation von Accessibility-Anforderungen im Design.

Fuer den Browser: axe DevTools als Chrome-Extension fuer automatisierte Audits. WAVE fuer visuelle Darstellung von Accessibility-Problemen direkt auf der Seite.

Fuer Screenreader-Tests: VoiceOver ist auf jedem Mac vorinstalliert und kostenlos. NVDA ist ein kostenloser Screenreader fuer Windows.

Fazit: Jetzt anfangen #

Barrierefreies Webdesign ist kein Trend, der wieder verschwindet. Es ist eine grundlegende Qualitaetsanforderung, die durch Gesetzgebung verstaerkt und durch den demografischen Wandel immer relevanter wird. Als Designer haben wir die Verantwortung und die Moeglichkeit, das Web fuer alle Menschen zugaenglich zu gestalten.

Der beste Zeitpunkt, mit Accessibility anzufangen, war vor zehn Jahren. Der zweitbeste ist jetzt. Beginne mit einem Accessibility-Audit deiner aktuellen Projekte, identifiziere die groessten Baustellen und arbeite sie systematisch ab. Deine Nutzer, alle deine Nutzer, werden es dir danken.

Häufige Fragen zu barrierefreiem Webdesign #

Welche Konsequenzen drohen Unternehmen, die das BFSG ab Juni 2025 ignorieren?

Das Barrierefreiheitsstärkungsgesetz sieht Bußgelder bis zu 100.000 Euro pro Verstoß vor. Zusätzlich können Marktüberwachungsbehörden die Bereitstellung des Produkts oder der Dienstleistung untersagen. Wirtschaftlich oft schwerwiegender: Abmahnungen durch Mitbewerber sowie öffentlichkeitswirksame Klagen von Behindertenverbänden, die das Reputationsrisiko erhöhen.

Gilt das BFSG auch für Freelancer-Websites oder nur für große Unternehmen?

Reine Portfolio-Websites von Freelancern sind nicht direkt erfasst, sofern sie keine Dienstleistung im Sinne des Gesetzes anbieten. Sobald jedoch ein Online-Shop, Buchungssystem oder kostenpflichtige digitale Produkte integriert sind, greift das BFSG auch für Einzelunternehmer. Ausgenommen sind Kleinstunternehmen mit weniger als 10 Beschäftigten und unter 2 Millionen Euro Jahresumsatz – allerdings nur für Dienstleistungen, nicht für Produkte.

Welche Tools eignen sich am besten zur Accessibility-Prüfung im Designprozess?

Für Figma sind Stark und A11y – Color Contrast Checker Standard. Im Browser liefern axe DevTools, WAVE und Lighthouse zuverlässige Audits. Für tiefere Tests empfiehlt sich Screenreader-Tests mit NVDA (Windows) oder VoiceOver (macOS) sowie Tastaturnavigation ohne Maus. Kein Tool ersetzt allerdings einen echten Test mit betroffenen Nutzern.

Wie kommuniziere ich den Mehraufwand für Accessibility gegenüber Kunden?

Argumentiere mit drei Punkten: Rechtsrisiko durch das BFSG, größere Zielgruppe (rund 10 Millionen Menschen mit Behinderung in Deutschland), und SEO-Vorteil durch sauberen semantischen Code. Accessibility verteuert ein Projekt typischerweise um 10 bis 20 %, wenn von Anfang an mitgedacht – nachträgliche Sanierung kostet erfahrungsgemäß das Drei- bis Vierfache.