• Barrierefreiheit
  • UX
  • Webdesign

Barrierefreies Webdesign: So setzt Du es richtig um

Barrierefreies Webdesign ist ab Sommer 2025 nicht nur für viele gesetzliche Pflicht, sondern bietet auch viele Vorteile für Dich. Alles zum Gesetz, zu den Kosten für die Umsetzung und 8 barrierefreie Maßnahmen, die Du sofort umsetzen kannst, gibt es jetzt.

Titelbild für barrierefreies Webdesign

Die wichtigsten Kapitel im Überblick:

1. Barrierefreies Webdesign Gesetz

2. Was ist barrierefreies Webdesign?

3. Vorteile von barrierefreiem Webdesign?

4. So prüfst Du Deine Website auf Barrierefreiheit

5. 8 Maßnahmen zum selbst umsetzen

6. Tools zum Prüfen der Barrierefreiheit

Barrierefreies Webdesign: Für viele Websites Pflicht ab 2025

Das BFSG (Barrierefreiheitsstärkungsgesetz) greift ab dem 28. Juni 2025 und verpflichtet einige Unternehmen zur Umsetzung von barrierefreiem Webdesign.

Muss Dein Webdesign barrierefrei sein?

Das BFSG verpflichtet Websites, die am elektronische Geschäftsverkehr teilnehmen. Dazu zählen Online-Shops, aber auch Websites, die Online-Terminbuchungen anbieten – sprich Friseure, Ärzte usw. Reine B2B-Unternehmen sind nicht betroffen.

Grafik: Wer ist von BFSG betroffen?
Das ist eine vereinfachte Darstellung, welche Websites vom BFSG betroffen sind.

Das war die vereinfachte Kurzfassung. Wenn Du einen detaillierten Überblick erhalten willst, wer vom BFSG betroffen ist, dann sieh Dir unseren „Barrierefreie Website„-Artikel an.

Was ist barrierefreies Webdesign?

Barrierefreies Webdesign bedeutet eine Website so zu gestalten, dass sie Menschen mit körperlichen oder kognitiven Einschränkungen zugänglich ist.

Dabei geht es aber nicht nur um „optische“ Punkte. Barrierefreies Webdesign bedeutet auch, eine Website in technischer Hinsicht barrierefrei zu gestalten. Es sind also auch Programmier-Kenntnisse notwendig.

Die WCAG (Web Content Accessibility Guidelines) legen dafür eine Reihe von Maßnahmen fest. Diese beschreiben detailliert, welche Kriterien erfüllt werden müssen, damit eine Website als barrierefrei eingestuft wird.

Barrierefreies Webdesign im deutschen Recht

Das Gesetz (BFSG), das Websites ab 2025 dazu verpflichtet barrierefrei zu sein, bezieht sich auf die WCAG Fassung 2.1. Wenn Du alle A- und AA-Level Maßnahmen erfüllst, ist Deine Website auch rechtlich barrierefrei.

Kriterien von barrierefreiem Webdesign (Erklärungen und Beispiele)

Die Maßnahmen der WCAG sind in vier grobe Bereiche aufgeteilt:

  • Perceivable (wahrnehmbar)

  • Operable (bedienbar)

  • Understandable (verständlich)

  • Robust (robust)

Gründe für barrierefreies Webdesign

Barrierefreies Webdesign hat über die rechtlichen Rahmenbedingungen hinaus zwei ganz wesentliche Vorteile:

  • Erschließung von neuer Zielgruppe, die Deine Website vorher nicht bedienen konnte.
  • Bessere Benutzerfreundlichkeit für nicht eingeschränkte User

Barrierefreies Webdesign für eingeschränkte User

Laut Statista besitzen in Deutschland mehr als 10% aller Menschen eine Behinderung. Rein rechnerisch wird es also auch in Deiner Zielgruppe einen nicht zu verachtenden Teil geben, der Deine Website nicht bedienen kann, wenn sie nicht barrierefrei umgesetzt ist.

Website mit großem Button.
Viele Maßnahmen zur Barrierefreiheit wirken sich nicht nur positiv auf eingeschränkte, sondern auf alle User aus. Wer jetzt barrierefrei wird, hat einen USP gegenüber seiner Konkurrenz.

Durch barrierefreies Webdesign machst Du Deine Website für diese User zugänglich. Nur so können sie am Ende Dein Produkt kaufen oder eine Dienstleistung von dir buchen.

Barrierefreies Webdesign hilft auch nicht eingeschränkten Usern

Es gibt zahlreiche Maßnahmen aus dem barrierefreiem Webdesign, die allen Usern helfen. Hier sind einige Beispiele:

  • Ein User steht an einer Haltestelle und ruft die Website des Nahverkehrs auf, um den Fahrplan anzusehen. Es ist Sommer und die Sonne knallt auf das Smartphone-Display. Dank der höheren Kontraste kann er trotzdem alle Informationen erkennen.
  • Eine Mutter hat ihr Kind auf dem Arm. Sie hat nur eine Hand zur Verfügung, um auf ihrem Smartphone Baby-Artikel zu shoppen. Weil alle relevanten klickbaren Elemente groß genug sind, kann sie sich problemlos durch den Online-Shop bewegen.
  • Du sitzt auf der Arbeit und konsumierst einen Artikel. Du möchtest das Video im Artikel ansehen. Weil Du aber niemanden stören willst, kannst Du den Ton nicht anmachen. Dank der Untertitel kannst Du es trotzdem konsumieren.

Und das ist wirklich nur ein kleiner Auszug an Beispielen. Barrierefreies Webdesign macht Deine Website also für alle User einfacher zu bedienen.

Was kostet barrierefreies Webdesign?

Die Umsetzung von barrierefreiem Webdesign bedarf Expertise und Zeit. Daher entstehen natürlich auch Kosten.

Ganz grob zusammengefasst (eine detaillierte Erklärung folgt gleich) kostet barrierefreies Webdesign in etwa so viel:

  • Umsetzung an bestehender Website, die bereits „relativ“ barrierefrei ist: Rund 1.000€
  • Umsetzung an bestehender Website, die kaum barrierefrei ist: Rund 1.000-5.000€
  • Kosten von barrierefreiem Webdesign bei einem Website-Relaunch: ca. 10% der gesamten Relaunch-Kosten

Das sind natürlich nur Schätzungen. Eine genaue Kosteneinschätzung kann ich Dir nur dann geben, wenn ich das Projekt kenne. Schicke uns bei Bedarf eine E-Mail an info@ucentric-media.de.

Barrierefreies Webdesign an bestehender Website umsetzen

Wenn Du eine bestehende Website besitzt und diese im „Kern“ gleich bleiben soll, müssen die Maßnahmen direkt am bisherigen Setup durchgeführt werden.

Die Kosten sind stark abhängig davon, wie barrierefrei Deine Website aktuell schon ist. Wenn bereits viele Maßnahmen erfolgreich umgesetzt wurden, kann sich das Investment auch schon auf einen niedrigen vierstellig Betrag belaufen.

Kostenloser Barrierefreiheits-Check Deiner Website

Wir bei Ucentric bieten aktuell einen kostenlosen „Website Barrierefrei Test an. Klicke einfach auf den Link und lasse uns Deine Website zukommen. Wir analysieren sie vollständig und lassen Dir einen Katalog aller offenen Maßnahmen zukommen.

Wenn allerdings kaum Maßnahmen umgesetzt wurden, kann die Implementierung von barrierefreiem Webdesign deutlich teurer werden.

Vor allem dann, wenn Deine Website aus verschiedenen Plugins und einem eingeschränktem Theme besteht. Denn die Drittanbieter-Tools erzeugen größtenteils HTML-Code, der verändert werden muss, oft aber nicht direkt verändert werden kann.

Je nach Umfang Funktionalität und aktuellem Stand der Barrierefreiheit können die Preise stark variieren.

Barrierefreies Webdesign mit einem Relaunch umsetzen

Gerade, wenn die Implementierung von barrierefreiem Webdesign an Deiner aktuellen Website sehr aufwändig ist und Du sowieso nicht ganz zufrieden mit ihr bist, kann ein Website Relaunch Sinn machen.

Denn die Kosten für die barrierefreien Maßnahmen sind bei einer technischen Neuaufsetzung wahrscheinlich deutlich günstiger.

Eine gute Webagentur sollte mit barrierefreiem Webdesign Erfahrung haben und die notwendigen Maßnahmen direkt beim Gestalten und Programmieren mitberücksichtigen.

Dadurch entstehen im Vergleich zu den Gesamtkosten eines Website-Relaunches kaum merkliche Zusatzinvestitionen für Dich.

So setzt Du barrierefreies Webdesign richtig um (8 konkrete Beispiele)

Damit eine Website vollständig barrierefrei ist, müssen – zumindest nach deutschem Recht – alle Level A und AA Maßnahmen der WCAG 2.1 erfüllt sein.

Ich möchte Dir jetzt 8 dieser Maßnahmen mit an die Hand geben, die Du selbst umsetzen kannst, auch ohne tieferes technisches Know-How.

Guideline § 1.1: Text-Alternativen (z.B. Alt-Attribute bei Bildern)

Häufig stellen Grafiken, Bilder usw. wichtige Informationen für User dar. Visuell eingeschränkte Besucher können diese Alternativen aber nicht wahrnehmen.

Hinterlegst Du entsprechende Text-Alternativen können diese beispielsweise von Screenreadern interpretiert werden.

Beispiel: Alt-Attribute bei Bildern

Alt-Attribute in Bildern sind quasi die Text-Alternative für visuell-eingeschränkte User. Das Alt-Attribut wird direkt im <img> Tag hinterlegt. Wenn Du ein CMS, wie WordPress oder ein Shop-System, wie Shopify nutzt, hinterlegst Du den Alternativ-Text direkt in der Mediathek, in der Deine Bilder gespeichert sind.

Guideline § 1.4.1: Kommuniziere nicht nur über Farben

Es gibt zahlreiche Menschen, die Farben nicht vollumfänglich wahrnehmen können. Daher ist es wichtig, dass wir Informationen nicht nur über Farben kommunizieren.

Zwei Buttons mit unterschiedlich klarer Kommunikation.
Durch entsprechende Texte wird der Kontext einer Handlungsaufforderung klarer und kann von farblich eingeschränkten Personen verstanden werden.

Beispiel: Pflicht-Felder bei Formulare

Statt beispielsweise Pflichtfelder rot zu markieren, solltest Du zudem im „<label> Tag“ einen „(Pflichtfeld)“-Hinweis dranhängen.

Beispiel: Grüner „Los geht’s“-Button

Häufig neigen Domain-Betreiber dazu unklare Ankertexte oder Button-Labels zu vergeben, weil der Farbkontext vermeintlich genug offensichtlich macht, was nach dem Klick passiert.

Für User mit einer Farbschwäche ist der Kontext allerdings nicht immer klar. Daher solltest Du möglichst immer klare Klick-Beschreibungen implementieren oder im Zweifel einen kurzen Satz mit zusätzlichen Instruktionen bereitstellen.

Guideline § 1.4.3: Kontast (Minimum)

Kontrast-Level sind meist die erste Maßnahme, die mit barrierefreiem Webdesign in Verbindung gebracht wird.

Drei Texte mit unterschiedlichen Kontrasten.
Höhere Kontraste sind nur eines von sehr vielen Beispielen, wie barrierefreies Webdesign allen Nutzern hilft.

Und das nicht ohne Grund, denn zu kleine Texte können von Usern mit einer ausgeprägten Sehschwäche nicht mehr ordentlich konsumiert werden.

So findest Du die Schriftgröße in Point heraus

Um die Größe eines Textes in „point“ herauszufinden, benötigst Du zuerst den Wert in „Pixelgröße“. Anschließend kannst Du ganz einfach umrechnen: 1pt entspricht ca. 1,33 px.

Beispiel: „Kleine Texte“

Mit kleinen Texte sind alle Texte gemeint, die eine Schriftgröße von unter 18 „point“ oder 14 „point“ bei fettmarkierten Texten besitzen. Alle diese Texte benötigen ein Kontrastverhältnis von 4,5:1.

Um das Kontrastverhältnis zweier Texte miteinander zu vergleichen, kannst Du das kostenlose Tool von WebAIM nutzen.

Beispiel: „Große Texte“

Mit „großen Texten“ sind Texte ab 18 „point“ bzw. ab 14 „point“ bei fettmarkierten Texten gemeint. Diese Texte benötigen ein Kontrastverhältnis von 3:1.

Guideline § 1.4.3: Text-Vergrößerung möglich machen

Auch bei dieser Maßnahme wollen wir Menschen mit eingeschränktem Sehvermögen helfen.

Wenn ein User eine Text-Vergößerung (mehr dazu gleich) vornimmt, sollten keine Informationen verloren gehen und der Text selbst sollte sich entsprechend anpassen lassen.

Die Durchführung der Text-Vergößerung selbst ist Aufgabe des User-Agents (z.B. Browser). Du dagegen musst sicherstellen, dass Deine Inhalte entsprechend reagieren.

Beispiel: Nutze relative Einheiten für Dein Styling

Die zuverlässigste Methode ist die Nutzung von relativen Einheiten. Statt beispielsweise „14px“ für Deine p-Tags zu vergeben nutzt Du „1rem“.

Relative Einheiten definieren ihre Größe auf Basis des „root“-Elements (<html>), statt im absolutem Maß, wie die „pxl“-Einheit.

Das gilt übrigens nicht nur für Schriftgrößen. Passe Zeilenabstände, Paddings, Margins usw. in relativen Einheiten an. So können eingeschränkte Personen die Inhalte Deine Website einfacher „vergrößern“.

Guideline § 2.1.1: Keyboard-Navigation

Blinde User, körperlich Eingeschränkte aber auch teilweise nicht eingeschränkte Besucher nutzen nur das Keyboard (ohne Maus), um Deine Website zu bedienen.

Barrierefreies Webdesign stellt sicher, dass es für jedes „Pointer-Event“ (bspw. Klicken, Hovern, Scrollen usw.) eine passende Eingabe über die Tastatur gibt.

Bedienung einer Website mit Tabulator-Taste.
Einige User nutzen nur die Tastatur, um Deine Website zu bedienen. Unterstützt sie das nicht, werden die Nutzer Deine Seite verlassen.

Beispiel: Von Link zu Link springen

Mit der Tabulator-Taste springen User von Link zu Link. Der aktive Link (nennt sich „Focus-State“) sollte dann entsprechend optisch hervorgehoben werden. Im CSS wird das über die CSS-Pseudo-Klasse :focus gesteuert.

Beispiel: Suche

Wenn ein User über die Tabulator-Taste in ein Suchfeld navigiert erhält das Suchfeld (<input>-Tag) den Focus-State. Über die Enter-Taste kann der User die Suche bestätigen.

Guideline § 2.3.3: Kontrolle über Animationen

Hierbei handelt es sich um eine Level AAA Maßnahme. Daher ist sie ist nach deutschem Recht nicht verpflichtend umzusetzen.

Es bleibt trotzdem eine wichtige Maßnahme. Denn es gibt Menschen bei denen Animationen Anfälle oder Aufmerksamkeitsstörungen auslösen können.

Deswegen solltest Du für Animationen, wie z.B. Parallax-Effekte, Übergänge usw. eine statische Alternative anbieten.

Beispiel: prefers-reduced-motion

User können auf ihrem Device oder Browser einstellen, dass sie möglichst auf Animationen verzichten wollen.

Code Ausschnitt für Prefers Reduced Motion in CSS
Über das Media-Feature „preferred reduced motion“ kannst Du Animationen für bestimmte User reduzieren.

Über das CSS Media-Query-Feature „prefers-reduced-motion“ kannst Du genau diesen Usern eine statische Version Deiner Animationen ausliefern.

Guideline § 2.4.6: Überschriften und Labels

Diese Maßnahme sollte eigentlich klar sein, wird aber viel zu oft falsch umgesetzt. Überschriften sollten den darunter liegenden Content klar beschreiben.

Zusätzlich sollten die wichtigsten Informationen in einer Überschrift möglichst weit vorne stehen.

Beispiel: Artikel darüber, wie man für das Web gut schreibt

Die Überschriften eines solchen Artikel sollten in etwa so aussehen:

  • H1: So schreibst Du gute Artikel für das Web.
  • H2: Lasse unnötige Wörter weg.
  • H2: Gestalte Deine Sätze kurz.
  • H2: Überschreite die Zeilenlänge von 650 Pixeln nicht.
  • H2: Über den Autor

Das ist natürlich nur ein Beispiel. Ich denke aber, das Prinzip wird klar. Jede Überschrift kommuniziert klar, welcher Inhalt auf den User im folgenden Abschnitt wartet.

Guideline § 4.1.2: Name, Role, Value

Unterstützende Technologien (z.B. Screen-Reader) sind darauf angewiesen den Code Deiner Website zu korrekt zu interpretieren. Nur so können User die Inhalte verstehen.

Korrekt eingesetzte HTML-Elemente können von unterstützenden Technologien richtig interpretiert werden. Solange die richtigen Tags verwendet werden, besteht häufig kein Grund zusätzlich Attribute zu verwenden.

Beispiele für den korrekten Einsatz von HTML-Tags

  • h-tags für Überschriften
  • <dialog>-Tag für Overlays
  • <ol> oder <ul> für Listen
  • <button>-Tag für interaktive Elemente für Interaktionen, wie Maus, Tastatur, Sprachbefehl usw.

Beispiel für Akkordion

Für ein Akkordion gibt es das <details>-Element. Falls Du beispielsweise das Akkordion über ein <div>-Element umsetzt, nutzt Du am besten ARIA-Attribute, um beispielsweise die geöffneten oder geschlossenen Zustand gegenüber Screen-Readern zu kommunizieren.

Tools zum Überprüfen von barrierefreiem Webdesign

Neben einer händischen Überprüfung kannst Du natürlich auch ausgewählte Tools nutzen, um die Barrierefreiheit Deiner Website zu überprüfen.

Hier findest Du eine Liste an Tools, die ich selbst gerne nutze:

  • Lighthouse von Google: Schafft einen groben Überblick über wesentliche Maßnahmen (zum Tool)
  • WAVE Accessibility Checker von WebAIM: Hilft beim umfangreichen Prüfen von Maßnahmen (zum Tool)
  • Contrast-Checker von WebAIM: Unterstützt Dich beim Finden von passenden Kontrastverhältnissen.

Tools alleine reichen nicht

Bedenke bitte: Tools helfen Dir, übernehmen die korrekte Umsetzung von barrierefreiem Webdesign aber nicht für Dich.

Fazit zu barrierefreiem Webdesign

Barrierefreies Webdesign ist für einige Websites Pflicht. Aber auch über die gesetzliche Vorgabe hinaus besitzt es viele Vorteile: Du erreichst eine neue Zielgruppe und verbesserst die Usability für alle Nutzer.

Um barrierefreies Webdesign korrekt umzusetzen, orientierst Du dich an der WCAG 2.1 Level A und AA. Du kannst die Implementierung aber auch an einen Experten abgeben. Die Preise sind stark vom Projekt abhängig.

Andreas Markl Autor Portrait

Andreas Markl

Webdesign und -entwicklung

Andreas Markl ist Gründer und Geschäftsführer von Ucentric Media. Er beschäftigt sich seit 2016 mit Webdesign und -entwicklung.

Inhaltsverzeichnis