Barrierefreies Webdesign nach WCAG 2.1 AA

Eine barrierefreie Website lässt sich mit Tastatur, Screenreader und Vergrößerung bedienen. Wir planen Barrierefreiheit von Anfang an mit und orientieren uns an den WCAG 2.1 auf Stufe AA.

Developers Signature Designers Signature
+ 50
Abgeschlossene Projekte
+ 20
Programmiersprachen
Digitale Leistungen mit klarem Ziel
Von Strategie und Design bis Entwicklung, Performance und KI: Wir verbinden die Bausteine, die Ihr digitales Angebot zuverlässig voranbringen.
Barrierefreiheit

Websites, die niemanden ausschließen

Barrierefreies Webdesign sorgt dafür, dass Menschen Ihre Website nutzen können – unabhängig davon, ob sie schlecht sehen, keine Maus bedienen können, einen Screenreader verwenden oder auf besonders verständliche Inhalte angewiesen sind. Das betrifft mehr Menschen, als man denkt: auch ältere Nutzerinnen und Nutzer oder jemanden, der bei Sonnenlicht auf das Smartphone schaut.

Wir berücksichtigen Barrierefreiheit in Gestaltung, Inhalt und Code. Am wirksamsten ist sie, wenn sie von Anfang an mitgedacht wird. Bestehende Websites prüfen wir und verbessern sie Schritt für Schritt.

BFSG und WCAG: was gilt?

Seit Ende Juni 2025 gilt in Deutschland das Barrierefreiheitsstärkungsgesetz (BFSG). Es betrifft unter anderem viele Online-Shops und andere Dienstleistungen im elektronischen Geschäftsverkehr, die sich an Verbraucherinnen und Verbraucher richten. Kleinstunternehmen, die Dienstleistungen anbieten, sind unter bestimmten Voraussetzungen ausgenommen. Als technischer Maßstab dient in der Praxis die europäische Norm EN 301 549, die für Webinhalte auf die Web Content Accessibility Guidelines (WCAG) 2.1 auf Stufe AA verweist.

Ob und in welchem Umfang Ihr Angebot betroffen ist, hängt vom Einzelfall ab. Wir erklären die technischen Anforderungen und setzen sie um. Unsere Hinweise ersetzen keine Rechtsberatung.

  • BFSG: betrifft viele Angebote für Verbraucherinnen und Verbraucher
  • WCAG 2.1 auf Stufe AA als technischer Maßstab
  • Ausnahmen für Kleinstunternehmen im Einzelfall prüfen
  • Technische Umsetzung durch uns, rechtliche Bewertung durch Fachleute

Barrierefreies Webdesign in der Praxis

Die WCAG beruhen auf vier Grundsätzen: Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein. Im Alltag heißt das zum Beispiel: Normaler Text hebt sich mit einem Kontrastverhältnis von mindestens 4,5:1 vom Hintergrund ab. Jede Funktion lässt sich mit der Tastatur erreichen, und man sieht jederzeit, wo man sich gerade befindet.

Bilder erhalten Alternativtexte, Formularfelder sichtbare Beschriftungen und verständliche Fehlermeldungen. Überschriften bilden eine logische Gliederung, damit Menschen mit Screenreader schnell durch die Seite springen können. Videos bekommen Untertitel. Vieles davon ist sauberes, semantisches HTML, das wir ohnehin schreiben.

  • Ausreichende Kontraste für Text und Bedienelemente
  • Vollständige Bedienung per Tastatur mit sichtbarem Fokus
  • Alternativtexte, Untertitel und klare Überschriften
  • Formulare mit Beschriftungen und verständlichen Fehlermeldungen

Gestaltung und Barrierefreiheit verbinden

Barrierefreiheit heißt nicht, auf eine ansprechende Gestaltung zu verzichten. Oft genügt es, Markenfarben leicht anzupassen oder eine dunklere Variante für Text festzulegen, damit die Kontraste stimmen. Informationen vermitteln wir nicht allein über Farbe, sondern zusätzlich über Text oder Symbole. Animationen setzen wir sparsam ein und berücksichtigen die Systemeinstellung für reduzierte Bewegung.

Am wirtschaftlichsten ist es, diese Regeln schon im Entwurf festzulegen. Nachträgliche Korrekturen an einer fertigen Website sind möglich, aber meist aufwendiger. Deshalb denken wir Barrierefreiheit bei neuen Projekten von Anfang an mit.

  • Markenfarben mit ausreichendem Kontrast
  • Informationen nicht nur über Farbe vermitteln
  • Rücksicht auf die Einstellung „Bewegung reduzieren“
  • Barrierefreiheit schon im Entwurf festlegen

Prüfen und dokumentieren mit Konformly

Für die Prüfung haben wir mit Konformly ein eigenes Werkzeug entwickelt. Es bietet automatisierte Schnelltests und Anleitungen zu den WCAG-2.1-Kriterien der Stufen A und AA, etwa zu Alternativtexten, Formular-Beschriftungen, Überschriftenstruktur, Tastaturbedienung und Kontrast. Außerdem hilft Konformly bei der Prüfung, ob ein Unternehmen betroffen ist, und beim Erstellen einer Barrierefreiheitserklärung für BFSG und BITV mit Status und Maßnahmenplan.

Automatische Tests finden allerdings nur einen Teil der Probleme. Deshalb ergänzen wir sie um manuelle Prüfungen mit Tastatur und Screenreader. Konformly ersetzt weder die vollständige Umsetzung noch eine Rechtsberatung.

  • Automatisierte Schnelltests zu WCAG 2.1 A und AA
  • Barrierefreiheitserklärung mit Status und Maßnahmenplan
  • Prüfung, ob Ihr Unternehmen betroffen ist
  • Manuelle Tests mit Tastatur und Screenreader

Technik & Werkzeuge

  • WCAG 2.1 AA
  • BFSG
  • BITV
  • EN 301 549
  • Semantisches HTML
  • WAI-ARIA
  • Screenreader-Tests
  • Konformly
Referenzen

Projekte: Barrierefreies Webdesign

Wie barrierefrei ist Ihre Website?

Wir prüfen Ihre Website auf typische Barrieren und zeigen Ihnen, was sich mit welchem Aufwand verbessern lässt – sachlich und ohne Rechtsberatung.

Mehr zu Webdesign

Passend dazu

Weitere Leistungen

Blog

Aus dem Blog: Barrierefreies Webdesign

Neue Beiträge aus dem Studio – recherchiert und mit Quellen belegt.
FAQ

Häufige Fragen: Barrierefreies Webdesign

Muss meine Website barrierefrei sein?

Das hängt davon ab, was Sie anbieten und an wen. Das BFSG betrifft vor allem bestimmte digitale Dienstleistungen für Verbraucherinnen und Verbraucher, etwa Online-Shops; für öffentliche Stellen gelten eigene Vorgaben. Mit Konformly erhalten Sie eine erste Einschätzung. Verbindlich klären lässt sich die Frage nur mit einer Rechtsberatung.

Kann eine bestehende Website barrierefrei gemacht werden?

In vielen Fällen ja. Wir prüfen zuerst, wo die größten Hürden liegen, und beheben sie nach Dringlichkeit – etwa Tastaturbedienung, Kontraste, Formulare und Überschriften. Steht die Website auf einer stark veralteten Grundlage, rechnen wir Ihnen auch einen Neuaufbau als Alternative vor.

Was ist eine Barrierefreiheitserklärung?

Darin beschreiben Sie, inwieweit Ihr Angebot barrierefrei ist und welche Einschränkungen noch bestehen. Welche Angaben im Einzelnen nötig sind, hängt von den Vorgaben ab, die für Sie gelten. Mit Konformly lässt sich eine solche Erklärung mit Status und Maßnahmenplan erstellen.