Barrierefreie Website: eingeplant, nicht nachgerüstet

Barrieren entstehen im Design, nicht erst im Code

Viele Barrieren hat niemand programmiert. Sie wurden gestaltet: Hellgrau auf Weiß, ein Symbol ohne Beschriftung, ein Menü, das nur auf die Maus reagiert. Darum fange ich dort an, wo Barrierefreiheit wenig kostet: im Konzept und im Designsystem, bevor jemand eine Zeile Code schreibt.

Das Webdesign verantworte ich in den meisten Fällen selbst, die Projektleitung immer. Projektleitung und Gestaltung in einer Person sparen eine Übersetzungsschicht und ein Daily. Und beim Launch kann niemand sagen, der Kontrast sei Sache der anderen gewesen.

Was ich nicht mache: Zertifikate ausstellen und Rechtsberatung geben. Ich gestalte, prüfe und sage dir, was ich gefunden habe. Ob ein Gesetz für dich gilt, klärt verbindlich jemand mit Anwaltszulassung.

Was das Gesetz verlangt, und von wem

Seit 28. Juni 2025 gilt in Österreich das Barrierefreiheitsgesetz, kurz BaFG. Es setzt den European Accessibility Act um, die Richtlinie (EU) 2019/882, und es ist ein Wirtschaftsgesetz: Es trifft Unternehmen, die Verbraucherinnen und Verbrauchern bestimmte Produkte und Dienstleistungen anbieten. Für Websites heißt das vor allem:

• Online-Shops und jede Seite, auf der Verbraucher einen Vertrag abschließen: Buchungen, Bestellungen, Gutscheine, Abos.
• Online-Banking und andere Bankdienstleistungen für Verbraucher.
• Elektronische Kommunikationsdienste, E-Books und die digitalen Angebote der Personenbeförderung, etwa Tickets und Reiseinformationen.

Ausgenommen sind Kleinstunternehmen, soweit sie Dienstleistungen anbieten: weniger als zehn Beschäftigte und Jahresumsatz oder Bilanzsumme unter der gesetzlichen Schwelle. Reine B2B-Angebote fallen nicht unter das Gesetz, eine Informationsseite ohne Vertragsabschluss meist auch nicht. Für öffentliche Stellen gilt schon länger das Web-Zugänglichkeits-Gesetz. Die Marktüberwachung liegt beim Sozialministeriumservice, bei Verstößen sind Strafen möglich. In Deutschland setzt das Barrierefreiheitsstärkungsgesetz dieselbe Richtlinie um.

Ein amtliches Siegel für barrierefreie Websites gibt es nicht. Das Gesetz vermutet Barrierefreiheit, wenn die europäische Norm EN 301 549 erfüllt ist, und die verweist für Websites auf die WCAG in den Stufen A und AA. Rechtlich maßgeblich ist derzeit noch die Fassung, die auf WCAG 2.1 aufbaut. Im September 2026 ist die neue Fassung 4.1.1 erschienen, sie stellt auf WCAG 2.2 um und wartet noch auf die Veröffentlichung im Amtsblatt der EU. Ich plane deshalb gleich nach WCAG 2.2 AA, dann gibt es beim Wechsel weniger nachzuschärfen.

Wie ich so eine Seite plane, gestalte und prüfe

1. Vorher messen. Vor dem ersten Termin vermesse ich deine bestehende Seite, und Barrierefreiheit gehört dazu wie Tempo und Datenschutz. Die Befunde sortiere ich nach Ampel und Priorität von P0 bis P3.
2. Aus der Zielgruppe begründen. Bei einem Erfinder liest die Zielgruppe draußen, am Handy, teils mit Lesebrille. In seinem Designsystem steht deshalb: „Barrierefreiheit ist hier kein Zusatz, sondern der Grund für große Schrift, hohe Kontraste und 44-px-Ziele.“ Mit diesem Satz im System muss in keiner Feedbackrunde mehr jemand über Schriftgrößen streiten.
3. Kontraste rechnen, nicht schätzen. Beim Hersteller ultraleichter Wohnkabinen habe ich die Farbpalette so aufgebaut, dass alle Farbpaare WCAG AA erfüllen, geprüft Paar für Paar. Eine Markenfarbe, die als Schrift auf dunklem Grund unter 4,5 zu 1 liegt, trägt bei mir Flächen und keinen Text.
4. Den Prototyp ohne Maus durchgehen. Bevor gebaut wird, gehe ich den klickbaren Prototyp noch einmal nur mit der Tastatur durch: Reihenfolge, sichtbarer Fokus, Überschriften, Beschriftungen. Die Frage dahinter ist dieselbe wie bei jeder Nutzerführung: „Kann ich das ganz easy in der Straßenbahn machen, oder ist das super mühsam?“
5. Bewegung mit Bremse. Animationen respektieren die Systemeinstellung für weniger Bewegung, und wo sich länger etwas bewegt, gibt es einen Knopf zum Anhalten. Flash-Intros hab ich früher selbst gebaut, auf meiner Startseite heißt der Knopf deshalb „Bewegung pausieren“.
6. Vor dem Launch zählen. Beim Wohnkabinen-Hersteller lief ein Responsive-Audit über 90 Kombinationen aus Seiten und Geräteprofilen, mit 0 px seitlichem Überlauf und Bedienflächen ab 44 px. Beim Skiverleih gehörten 17 px Grundschrift, Sprunglinks und sichtbare Fokus-Zustände zur Vorgabe.

WCAG 2.2 AA

war Vorgabe für die ganze Website des Skiverleihs, live seit August 2026.

98 von 100

meldete Lighthouse für Barrierefreiheit beim Wohnkabinen-Hersteller, Desktop, im Labor gemessen.

90 Kombinationen

aus Seiten und Geräteprofilen, 0 px seitlicher Überlauf.

44 px

Mindestgröße für Bedienflächen in meinen Designsystemen, fast doppelt so viel wie die 24, die WCAG 2.2 verlangt.

Beim Wohnkabinen-Hersteller nennt das Impressum der Live-Seite digital bohemian und clickpuls für Konzept, Design und Entwicklung. Beim Skiverleih stammen Prototyp und Designsystem von mir, das System stand 4 Tage nach dem Wunsch der Leitung nach einer neuen Richtung.

Was mein Barrierefreiheits-Check umfasst

Den Check mache ich für neue Seiten vor dem Launch und für bestehende Seiten, auch für solche, die ich nicht gebaut habe. Ich prüfe gegen WCAG 2.2 AA, automatisch und von Hand:

• Kontrast: Fließtext mindestens 4,5 zu 1, große Schrift, Symbole und Fokusrahmen mindestens 3 zu 1.
• Tastatur: Jede Funktion ist ohne Maus erreichbar, der Fokus ist sichtbar und verschwindet nicht unter einer festen Leiste.
• Screenreader: Überschriften in der richtigen Reihenfolge, Bereiche benannt, Bilder beschrieben, Formularfelder beschriftet, Fehlermeldungen verständlich.
• Vergrößerung: Text auf 200 Prozent, und bei 320 Pixel Breite bleibt alles ohne seitliches Scrollen lesbar.
• Bedienflächen: mindestens 24 mal 24 Pixel, damit niemand mit dem Daumen das Falsche trifft.
• Formulare und Anmeldung: keine Rätsel zum Einloggen, keine Angabe, die zweimal abgefragt wird.
• Bewegung: anhaltbar, und die Einstellung für weniger Bewegung gilt.
• Dokumente: PDFs, die zum Angebot gehören, etwa Formulare, Kataloge oder Verträge.
• Pflichtangaben: Fällt dein Angebot unter das BaFG, brauchst du Informationen zur Barrierefreiheit deiner Dienstleistung. Die formuliere ich mit dir.

Du bekommst eine Befundliste nach Ampel und Priorität, jeder Punkt mit Fundstelle, Kriterium und einem Vorschlag, wer ihn behebt. Ein Lighthouse-Wert steht auch drin, aber nicht vorne. Automatische Tests finden nur einen Teil der Barrieren. Ob eine Bestellung mit Screenreader funktioniert, merkt kein Werkzeug, das merkt nur, wer sie so durchspielt.

Was ich dir sage, auch wenn es keiner gern hört

Ein Plugin macht keine Seite barrierefrei.

Ein Overlay legt eine Leiste mit Symbolen über die Seite und lässt die Barrieren darunter, wo sie sind. Wer blind ist, bringt seinen Screenreader selbst mit, und der kommt mit sauberem Code besser zurecht als mit einer zweiten Bedienoberfläche obendrauf. In den USA hat die Handelsbehörde FTC 2025 einen Overlay-Anbieter wegen irreführender Versprechen belangt, jede Seite regelkonform zu machen. Was das Abo kostet, ist in der Korrektur von Kontrasten und Formularen besser angelegt.

Nachrüsten kostet mehr als Mitplanen.

Diese Schriftfarbe auf diesem Grau kann ein Teil deiner Besucher nicht lesen, und das zeigt jede Kontrastprüfung in einer Minute. Im Designsystem ist das eine Zeile. Nach dem Launch ist es ein Umbau, bei dem Design und Code gleichzeitig auf dem Tisch liegen.

Hundert Prozent verspreche ich dir nicht.

Eine Seite ist barrierefrei bis zum ersten Bild, das jemand ohne Beschreibung hochlädt. Inhalte ändern sich, also muss die Prüfung mitkommen. Zur Übergabe gehört deshalb eine Anleitung für dein Team und, wo es geht, eine automatische Prüfung: Auf dieser Website meldet der Bau einen Fehler, sobald ein Bild keinen Alternativtext hat, und die Seite geht so nicht hoch.

Das Gesetz ist der kleinere Grund.

Viele, die von einer zugänglichen Seite profitieren, würden sich selbst nie als behindert bezeichnen. Sie stehen in der Sonne und fragen sich, ob das Grau auf dem Handy noch zu lesen ist, sie haben die Lesebrille im Auto vergessen oder halten sich in der Straßenbahn mit einer Hand fest. Fällst du nicht unter das BaFG, verlierst du diese Leute trotzdem.

Wer was macht

• Ich: Konzept, Design, Designsystem, Prüfung und Projektleitung. Ein Ansprechpartner vom ersten Befund bis nach dem Launch.
• Entwicklung: meine Crew im Webdesign von clickpuls (externer Link) oder deine Agentur. Die Vorgaben stehen im Designsystem und nicht in einer Mail von vor drei Wochen.
• Rechtliche Einordnung: eine Rechtsberatung deiner Wahl. Ich liefere ihr die Befunde, die sie dafür braucht.
• Tests mit Betroffenen: Mein eigener Durchgang mit Screenreader ersetzt keinen Test mit Menschen, die jeden Tag damit arbeiten. Braucht dein Projekt diese Sicherheit, gehört so ein Test in den Plan, und das steht dann schon im Angebot.

Steht bei dir ein Relaunch an, ist das ein guter Moment für eine barrierefreie Website, statt sie später nachzurüsten. Wie ich so ein Projekt führe, steht unter Website-Relaunch leiten.

Erst messen, dann reden

Schick mir die Adresse deiner Website. Vor dem Erstgespräch prüfe ich Kontraste, Tastatur, Überschriften und Formulare und bringe die Befunde mit, sortiert nach dem, was zuerst behoben gehört. Im schlimmsten Fall hast du 30 Minuten investiert und weißt danach klarer, wo es hakt.

Erstgespräch zur Barrierefreiheit anfragen