Barrierefreies Webdesign bedeutet, dass Menschen Ihre Website ohne fremde Hilfe finden, verstehen und bedienen können, ob mit Maus, Tastatur, Screenreader, Vergrößerung oder Sprachsteuerung. In Deutschland ist das seit dem 28. Juni 2025 für viele Onlineshops und digitale Dienstleistungen keine Kür mehr, sondern Pflicht nach dem Barrierefreiheitsstärkungsgesetz (BFSG). Dieser Leitfaden zeigt, welche Regeln gelten, welche Designentscheidungen den größten Effekt haben, wie Sie ARIA-Labels sauber einsetzen und wie Sie Ihre Website Schritt für Schritt prüfen.

Kurz gesagt

• Maßstab ist die WCAG, Stufe AA: Inhalte müssen wahrnehmbar, bedienbar, verständlich und robust sein.
• Das BFSG gilt seit dem 28. Juni 2025 für verbraucherbezogene digitale Dienstleistungen wie Webshops, Kleinstunternehmen mit Dienstleistungen sind ausgenommen.
• WCAG 2.2 ergänzt unter anderem Vorgaben zu sichtbarem Fokus, Klickflächen und barrierefreiem Login.
• Native HTML-Elemente schlagen ARIA: Labels nur dort, wo HTML nicht ausreicht.
• Automatische Scans finden nur einen Teil der Probleme. Ein belastbares Audit kombiniert Tools mit manuellen Tests.

Inhaltsverzeichnis

• Was barrierefreies Webdesign konkret bedeutet
• Die Rechtslage: BFSG, European Accessibility Act und internationale Vorgaben
• WCAG 2.2: Was sich gegenüber 2.1 geändert hat
• Die Designentscheidungen mit der größten Wirkung
• ARIA-Labels richtig einsetzen
• Website auf Barrierefreiheit prüfen: das Audit in sechs Schritten
• Unsere Sicht: Barrierefreiheit ist ein Qualitätsmerkmal, kein Pflichtprogramm
• Barrierefreie Websites mit Xpert Marketing umsetzen
• Häufige Fragen
• Quellen

Was barrierefreies Webdesign konkret bedeutet

Barrierefrei gestaltete Web-Angebote sind laut dem Portal Bayern barrierefrei für Menschen mit und ohne Behinderung ohne fremde Hilfe erreichbar, verständlich und nutzbar, und sie unterstützen den Einsatz von Hilfsmitteln. Das betrifft weit mehr Menschen, als viele Teams annehmen: Nutzer mit Sehbehinderung oder Farbfehlsichtigkeit, gehörlose Menschen, Menschen mit motorischen Einschränkungen, mit kognitiven Beeinträchtigungen, ältere Nutzer und alle, die gerade in grellem Sonnenlicht aufs Smartphone schauen.

Die internationale Grundlage sind die Web Content Accessibility Guidelines (WCAG) des W3C. Sie ruhen auf vier Prinzipien, die oft als die vier Säulen der Barrierefreiheit bezeichnet werden:

Jedes Erfolgskriterium ist einer von drei Konformitätsstufen zugeordnet: A ist das Minimum, AA der in Recht und Praxis übliche Standard, AAA die strengste Stufe. Wer von einer barrierefreien Website spricht, meint in aller Regel WCAG-Konformität auf Stufe AA.

Die Rechtslage: BFSG, European Accessibility Act und internationale Vorgaben

Das BFSG in Deutschland

Das BFSG setzt den European Accessibility Act (EU-Richtlinie 2019/882) in deutsches Recht um. Seit dem 28. Juni 2025 müssen elektronische Dienstleistungen, die über eine Website angeboten werden, barrierefrei sein, etwa ein Webshop oder die Online-Buchung eines Kundengesprächs. Technisch verweist das Regelwerk über die harmonisierte Norm EN 301 549 auf die AA-Anforderungen der WCAG 2.1.

Bei Verstößen drohen laut IHK München Vertriebsverbote, Abmahnungen und Bußgelder bis zu 100.000 Euro. Zuständig für die Kontrolle ist eine gemeinsame Behörde aller Bundesländer: die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) in Magdeburg.

Für wen das BFSG nicht gilt

Die wichtigste Ausnahme betrifft Kleinstunternehmen, die Dienstleistungen erbringen: weniger als 10 Beschäftigte und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme. Die IHK München betont allerdings, dass Kleinstunternehmen, die im Gesetz genannte Produkte herstellen, trotzdem betroffen sind. Der Zentralverband des Deutschen Handwerks stellt klar, dass es um Firmenwebsites geht, über die E-Commerce für Verbraucherinnen und Verbraucher angeboten wird. Eine reine Imagewebsite ohne Vertragsabschluss oder ein ausschließlich auf Geschäftskunden ausgerichtetes Angebot fällt daher meist nicht unter das BFSG.

Auch die Richtlinie selbst kennt Ausnahmen. Nach der Zusammenfassung auf EUR-Lex sind unter anderem aufgezeichnete Videos und Office-Dateien ausgenommen, die vor dem 28. Juni 2025 veröffentlicht wurden, ebenso Online-Archive, die nach diesem Datum nicht mehr bearbeitet werden. Für bestehende Verträge gelten Übergangsfristen bis 2030.

Ob Ihr konkretes Angebot unter das Gesetz fällt, hängt an Details wie Zielgruppe, Vertragsabschluss und Unternehmensgröße. Bei Zweifeln klären Sie das mit Ihrer IHK oder einer auf IT-Recht spezialisierten Kanzlei, bevor Sie Budget planen oder auf eine Ausnahme setzen.

Wenn Sie international verkaufen

Für Unternehmen mit Kunden in den USA gilt ein anderer Rahmen. Nach dem Americans with Disabilities Act müssen öffentlich zugängliche Unternehmen ihre Websites für Menschen mit Behinderungen zugänglich machen. Das US-Justizministerium schreibt laut seiner Leitlinie zur Web-Barrierefreiheit keinen festen technischen Standard vor, verweist aber auf die WCAG als Orientierung. In der Praxis ist WCAG AA damit über Ländergrenzen hinweg die sinnvollste gemeinsame Zielmarke, auch für Märkte wie Australien.

WCAG 2.2: Was sich gegenüber 2.1 geändert hat

WCAG 2.2 behält den Aufbau aus Prinzipien, Richtlinien, Erfolgskriterien und Techniken bei. Laut dem Portal Barrierefreiheit des Bundes erweitert die Version die Richtlinien vor allem für Menschen mit kognitiven oder visuellen Behinderungen und für Einschränkungen bei der Nutzung mobiler Geräte. Insgesamt kommen neun Kriterien hinzu, nach den Leitfäden der Überwachungsstelle des Bundes für Barrierefreiheit (BFIT-Bund) sind davon sechs auf den Stufen A und AA relevant, ein altes Kriterium wurde gestrichen.

Die sechs neuen A- und AA-Kriterien im Überblick:

• Fokus nicht verdeckt (2.4.11, AA): Ein Sticky Header oder Cookie-Banner darf das gerade fokussierte Element nicht vollständig verdecken.
• Ziehbewegungen (2.5.7, AA): Was per Drag-and-drop funktioniert, braucht eine Alternative mit einfachem Klick oder Tippen, etwa bei Slidern.
• Zielgröße Minimum (2.5.8, AA): Klickflächen müssen mindestens 24 × 24 CSS-Pixel groß sein oder genug Abstand haben.
• Konsistente Hilfe (3.2.6, A): Kontaktwege und Hilfe stehen auf allen Seiten an derselben Stelle.
• Redundante Eingaben (3.3.7, A): Bereits eingegebene Daten werden nicht erneut abgefragt, etwa die Lieferadresse im Checkout.
• Barrierefreie Authentifizierung (3.3.8, AA): Der Login darf keine Gedächtnis- oder Rätselaufgabe verlangen. Die BFIT-Leitfäden nennen Alternativen wie Einmal-Links per E-Mail oder unsichtbare Captchas.

Da das BFSG derzeit auf WCAG 2.1 AA verweist, ist 2.2 rechtlich noch nicht der Pflichtmaßstab. Wer heute neu baut, plant trotzdem nach 2.2: Die Version ist abwärtskompatibel, und die neuen Kriterien treffen genau die Stellen, an denen Nutzer im Checkout und im Login abspringen.

Die Designentscheidungen mit der größten Wirkung

Barrierefreiheit entsteht nicht im letzten Sprint. Das W3C empfiehlt, Barrierefreiheit früh und während der gesamten Entwicklung zu prüfen, weil sich Probleme dann leichter beheben lassen. Diese sieben Punkte gehören deshalb schon ins Wireframe und ins Designsystem:

1. Kontrast: Fließtext braucht auf Stufe AA ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund. Hellgraue Schrift auf Weiß fällt fast immer durch. Legen Sie geprüfte Farbpaare direkt im Designsystem fest.
2. Farbe nie allein: Ein rot umrandetes Feld reicht als Fehlerhinweis nicht. Ergänzen Sie ein Symbol und einen Text wie „Bitte geben Sie eine gültige E-Mail-Adresse ein“.
3. Logische Überschriften: Eine H1 pro Seite, darunter H2 und H3 in sinnvoller Reihenfolge. Screenreader-Nutzer springen über Überschriften durch die Seite wie andere über das Layout.
4. Tastatur und Fokus: Jedes interaktive Element ist per Tab erreichbar, in nachvollziehbarer Reihenfolge und mit deutlich sichtbarem Fokusrahmen. Entfernen Sie den Browser-Fokus nie ohne Ersatz.
5. Formulare: Jedes Feld hat ein sichtbares, dauerhaftes Label. Platzhaltertext, der beim Tippen verschwindet, ersetzt kein Label.
6. Alternativtexte: Informative Bilder bekommen eine knappe Beschreibung ihres Inhalts, dekorative Bilder ein leeres alt-Attribut, damit Screenreader sie überspringen.
7. Bewegung und Medien: Videos mit Untertiteln, kein Autoplay mit Ton, Animationen respektieren die Systemeinstellung „Bewegung reduzieren“.

Diese Punkte helfen allen Nutzern. Klare Kontraste, eine logische Struktur und beschreibende Texte verbessern die Bedienbarkeit und machen Inhalte für Suchmaschinen besser lesbar. Wie das im Gesamtprozess aussieht, beschreibt unser Beitrag zu UX- und UI-Design in der Praxis.

ARIA-Labels richtig einsetzen

ARIA (Accessible Rich Internet Applications) ist eine Sammlung von Attributen, mit denen Sie Hilfstechnologien zusätzliche Informationen über Elemente geben. Das bekannteste ist aria-label. Es definiert einen Text, der ein Element benennt, sofern dessen Rolle eine Benennung erlaubt.

Die wichtigste Regel lautet: zuerst natives HTML. Ein echtes <button>-Element bringt Tastaturbedienung und die richtige Rolle mit, ein <div> mit Klick-Handler nicht. Laut web.dev ist ARIA allerdings der einzige Weg, zugängliche Beschreibungstexte zu ergänzen. Setzen Sie es gezielt ein, nicht flächendeckend.

Ein typischer, sinnvoller Einsatz ist ein Icon-Button ohne sichtbaren Text:

<button type="button" aria-label="Warenkorb öffnen">
  <svg aria-hidden="true">…</svg>
</button>

Typische Fehler aus Audits:

• Doppelte Benennung: Ein Link mit sichtbarem Text „Kontakt“ bekommt zusätzlich aria-label="Kontakt Link". Der Screenreader sagt dann Unsinn wie „Kontakt Link, Link“.
• Widerspruch zum sichtbaren Text: Steht auf dem Button „Jetzt kaufen“, das Label lautet aber „Bestellen“, finden Sprachsteuerungsnutzer den Button nicht.
• Labels auf nicht benennbaren Elementen: Ein aria-label auf einem einfachen <span> oder <div> ohne Rolle wird von vielen Hilfstechnologien ignoriert.
• Gleiche Labels für verschiedene Ziele: Zehn Buttons mit „Mehr erfahren“ sind für Screenreader-Nutzer in der Linkliste wertlos.

Der W3C-Leitfaden zu zugänglichen Namen und Beschreibungen bezeichnet saubere Benennung als eine der wichtigsten Aufgaben bei der Entwicklung barrierefreier Websites. Bevorzugen Sie sichtbare Texte und aria-labelledby, das auf vorhandenen Text verweist. aria-label ist die Lösung, wenn kein sichtbarer Text existiert.

Website auf Barrierefreiheit prüfen: das Audit in sechs Schritten

Ein Accessibility Audit zeigt, wo Ihre Website heute steht und was die Behebung kostet. Wichtig: Laut W3C können Prüfwerkzeuge allein nicht feststellen, ob eine Website die Richtlinien erfüllt. Viele Kriterien, etwa ob ein Alternativtext den Bildinhalt wirklich beschreibt, verlangen menschliches Urteil.

1. Umfang festlegen: Wählen Sie repräsentative Seiten und die kritischen Nutzerwege: Startseite, Kategorieseite, Produktdetail, Warenkorb, Checkout, Kontaktformular, Login.
2. Automatischer Scan: Browser-Erweiterungen und Prüftools finden fehlende Alternativtexte, zu schwache Kontraste und leere Labels schnell. Das ist der Einstieg, nicht das Ergebnis.
3. Tastaturtest: Legen Sie die Maus weg. Kommen Sie mit Tab, Enter, Leertaste und Escape durch den gesamten Checkout? Ist der Fokus jederzeit sichtbar? Bleiben Sie in einem Modal gefangen?
4. Screenreader-Test: Prüfen Sie mit NVDA unter Windows oder VoiceOver auf Mac und iPhone, ob Überschriften, Formularfelder, Fehlermeldungen und Buttons verständlich vorgelesen werden.
5. Zoom und Mobil: Vergrößern Sie auf 200 und 400 Prozent. Bricht das Layout, überlagern sich Elemente, müssen Nutzer horizontal scrollen?
6. Bericht und Priorisierung: Ein professionelles Audit listet nicht nur Fehler. Nach dem UK Government Service Manual beschreibt es die konkrete Barriere, erklärt den Verstoß gegen den Standard und nennt umsetzbare Lösungen für Design und Entwicklung.

Für Unternehmen unter dem BFSG gehört zum Ergebnis auch die Information zur Barrierefreiheit, die beschreibt, wie Ihre Dienstleistung die Anforderungen erfüllt. Planen Sie nach dem Audit wiederkehrende Prüfungen ein: Jede neue Kampagnenseite, jedes Plugin und jeder Redaktionsbeitrag kann neue Barrieren erzeugen.

Unsere Sicht: Barrierefreiheit ist ein Qualitätsmerkmal, kein Pflichtprogramm

In unseren Projekten sehen wir Barrierefreiheit als Teil guter Markenführung, nicht als juristische Checkliste am Ende. Eine Website, die sich per Tastatur bedienen lässt, klare Kontraste hat und Formulare verständlich führt, ist schlicht die bessere Website. Sie konvertiert sauberer, lässt sich leichter pflegen und wird von Suchmaschinen besser verstanden.

Deshalb verankern wir die Anforderungen dort, wo sie am wenigsten kosten: in der Markenidentität bei der Farbpalette, im UX-Design bei Navigation und Formularen, in der Entwicklung bei semantischem HTML und im Content bei Überschriften, Alternativtexten und verständlicher Sprache. Ein nachträglicher Umbau ist fast immer teurer als ein Designsystem, das von Anfang an mitdenkt.

Und wir messen. Wie bei jeder Kampagne definieren wir KPIs: Abbruchraten im Checkout, Formularfehler, Nutzung der Suche. Barrierefreiheit wird so zum Hebel für Wachstum, den Sie in Zahlen sehen.

— Xpert

Barrierefreie Websites mit Xpert Marketing umsetzen

Sie planen einen Relaunch, ein neues Designsystem oder wollen eine bestehende Website auf Barrierefreiheit prüfen lassen? Unser Bereich Web, Teknologji & Inovacion verbindet UX/UI-Design, Web- und E-Commerce-Entwicklung mit Branding, Content und SEO aus einer Hand. So entstehen Websites, die für alle Nutzer funktionieren und messbar auf Ihre Ziele einzahlen. Alle Leistungen finden Sie in unserer Übersicht der Marketing- und Webservices.

Häufige Fragen

Was ist digitale Barrierefreiheit?

Digitale Barrierefreiheit bedeutet, dass Websites, Apps und Dokumente von allen Menschen genutzt werden können, auch mit Seh-, Hör-, motorischen oder kognitiven Einschränkungen. Maßstab sind die WCAG mit ihren vier Prinzipien. Davon profitieren auch Nutzer ohne Behinderung, etwa auf kleinen Bildschirmen oder bei schlechtem Licht.

Was sind die vier Säulen der Barrierefreiheit?

Gemeint sind die vier WCAG-Prinzipien: wahrnehmbar, bedienbar, verständlich und robust. Inhalte müssen über mehrere Sinne erfassbar sein, ohne Maus bedienbar, klar formuliert und mit unterschiedlichen Hilfstechnologien kompatibel. Jedes einzelne Erfolgskriterium der WCAG lässt sich einem dieser Prinzipien zuordnen.

Für wen gilt das BFSG nicht?

Ausgenommen sind Kleinstunternehmen, die Dienstleistungen erbringen, also Betriebe mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Bilanzsumme. Wer gelistete Produkte herstellt, ist dagegen auch als Kleinstunternehmen betroffen. Websites ohne verbraucherbezogene Dienstleistung, etwa reine B2B-Angebote, fallen in der Regel ebenfalls nicht darunter.

Reicht ein Accessibility-Plugin oder Overlay aus?

Nein. Ein Overlay ändert nichts an fehlerhaftem Code, fehlenden Labels oder einer unlogischen Struktur. Barrierefreiheit entsteht im Design und in der Entwicklung selbst, geprüft mit Tools und manuellen Tests.

Wie oft sollte eine Website geprüft werden?

Nach jedem größeren Relaunch oder neuen Funktionen wie einem Checkout sollte ein vollständiges Audit folgen. Dazwischen sind regelmäßige Stichproben sinnvoll, etwa vierteljährlich, plus automatische Checks bei jeder Veröffentlichung. So bleiben neue Inhalte und Plugins im Blick.

Quellen

• Bayern barrierefrei: Barrierefreies Webdesign
• WCAG.com: A Guide to WCAG
• IHK Region Stuttgart: Barrierefreie Webseiten und Onlineshops
• IHK München: Barrierefreiheitsstärkungsgesetz
• Schleswig-Holstein: Marktüberwachungsstelle der Länder (MLBF)
• ZDH: Barrierefreiheit von Webseiten
• EUR-Lex: Accessibility of products and services
• ADA.gov: Guidance on Web Accessibility
• Portal Barrierefreiheit des Bundes: WCAG 2.2
• BFIT-Bund: Neue Anforderungen der WCAG 2.2
• W3C WAI: Evaluating Web Accessibility Overview
• MDN: ARIA aria-label attribute
• web.dev: ARIA labels and relationships
• W3C WAI: Providing Accessible Names and Descriptions
• GOV.UK Service Manual: Getting an accessibility audit