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.
Die wichtigsten Kapitel im Überblick:
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.
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.
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.
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.
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.
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.
Ü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.