dpi Design Projekt anfragen

Webdesign · Barrierefreiheit

Barrierefreie Website: barrierearm gestaltet, für möglichst viele Menschen nutzbar

Wir machen Ihre Website für möglichst viele Menschen gut bedienbar, ob mit Tastatur, Screenreader oder Bildschirmlupe. Dafür prüfen wir sie nach WCAG 2.2 und verbessern Design und Code direkt an der Quelle.

Website prüfen lassen
AAAlt-TextWCAG 2.2

Was ist eine barrierefreie Website?

Eine barrierefreie Website kann von allen Menschen genutzt werden, auch von Menschen mit Einschränkungen beim Sehen, Hören, bei der Motorik oder beim Verstehen von Informationen. Das betrifft in Deutschland rund zehn Millionen Menschen mit Behinderung, dazu viele ältere Nutzer und alle, die gerade mit einer Hand am Smartphone oder bei Sonnenlicht im Freien surfen. Barrierefreiheit ist deshalb vor allem gutes Webdesign.

Konkret heißt das zum Beispiel: Texte sind kontrastreich und vergrößerbar, alle Funktionen lassen sich per Tastatur bedienen, Bilder haben Alternativtexte, Videos Untertitel, Formulare verständliche Fehlermeldungen, und Screenreader erkennen die Struktur der Seite.

Digitale Barrierefreiheit hängt dabei an drei Ebenen: Gestaltung, Programmierung und redaktionelle Inhalte. Ein sauber programmiertes Theme hilft wenig, wenn später Bilder ohne Beschreibung hochgeladen oder Überschriften nur fett formatiert werden. Deshalb denken wir bei jedem Projekt alle drei Ebenen mit und schulen auch die Menschen, die Ihre Website später pflegen.

Barrierefrei oder barrierearm? Warum wir von barrierearm sprechen

Barrierefrei heißt: Jeder Mensch kann jede Information und jede Funktion nutzen, egal mit welcher Einschränkung, welchem Gerät oder welchem Hilfsmittel. Das ist ein gutes Leitbild, aber ein Idealzustand. Menschen mit Einschränkungen haben sehr unterschiedliche Bedürfnisse, die sich teilweise sogar widersprechen. Und jede neue Seite, jedes Bild und jedes PDF kann eine neue Barriere mitbringen.

Deshalb versprechen wir keine vollständige Barrierefreiheit. Wir machen Ihre Website barrierearm: mit einem messbaren Maßstab, offen dokumentierten Restbarrieren und einer Redaktion, die weiß, worauf sie beim Pflegen achten muss.

BarrierefreiBarrierearm
AnspruchKeine Barriere für niemandenSo wenige Barrieren wie möglich, die wichtigsten zuerst
MaßstabSchwer messbarWCAG 2.2 in Stufe AA, geprüft mit Tools, Tastatur und Screenreader
RestbarrierenDarf es nicht gebenWerden benannt, begründet und nach und nach abgebaut
Nach dem LivegangWird oft als erledigt betrachtetRegelmäßige Nachkontrolle, weil neue Inhalte neue Barrieren bringen können

Warum das BFSG viele Unternehmen beschäftigt und wo unsere Rolle endet

Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG). Es setzt den European Accessibility Act in deutsches Recht um und ist für viele Unternehmen der Anlass, ihre Website prüfen zu lassen. Ob und wie das Gesetz für Ihr Angebot gilt, ist eine rechtliche Frage. Die klären Sie am besten mit einer Anwältin oder einem Anwalt, Ihrer IHK oder Ihrem Branchenverband.

Was wir übernehmen und was nicht

Wir kümmern uns um die Technik: Prüfung nach WCAG 2.2, ein Bericht mit allen gefundenen Barrieren, die Umsetzung in Design, Code und Inhalten und die technischen Angaben für Ihre Erklärung zur Barrierefreiheit. Eine rechtliche Bewertung Ihres Einzelfalls geben wir nicht ab.

Welche Einschränkungen es gibt und welche Barrieren entstehen

Barrieren entstehen, wenn eine Website nur einen Weg der Nutzung vorsieht. Wer die Maus nicht bedienen kann, scheitert an einem Menü, das nur beim Überfahren aufklappt. Wer nicht hört, verpasst die Informationen in einem Video ohne Untertitel. Die folgende Übersicht zeigt die wichtigsten Gruppen, typische Hürden und wie wir sie lösen.

EinschränkungTypische BarriereLösung
Sehen (Blindheit, Sehschwäche, Farbfehlsichtigkeit)Bilder ohne Alternativtext, zu schwache Kontraste, Informationen nur über Farbe, Layout bricht beim VergrößernAlternativtexte, Kontrast mindestens 4,5 zu 1, zusätzliche Kennzeichnung durch Text oder Symbol, Zoom bis 200 Prozent ohne Informationsverlust
Hören (Gehörlosigkeit, Schwerhörigkeit)Videos ohne Untertitel, Podcasts ohne Text, Kontakt nur per TelefonUntertitel, Transkripte, alternative Kontaktwege wie Formular oder E-Mail
Motorik (Lähmungen, Zittern, eingeschränkte Handfunktion)Bedienung nur mit Maus, winzige Klickflächen, knappe Zeitlimits, Drag and Drop ohne AlternativeVollständige Tastaturbedienung, Zielgrößen von mindestens 24 mal 24 Pixeln, verlängerbare Zeitlimits, Alternativen zum Ziehen
Kognition (Lernschwierigkeiten, Konzentrationsprobleme, Demenz)Verschachtelte Sätze, wechselnde Navigation, unklare FehlermeldungenKlare Sprache, konsistente Menüs, verständliche Hinweise, wie sich ein Fehler beheben lässt

Die Anforderungen der WCAG 2.2 in vier Prinzipien

Technische Grundlage sind die Web Content Accessibility Guidelines (WCAG), auf die auch die europäische Norm EN 301 549 verweist. Wir setzen Level AA der aktuellen Version 2.2 um. Sie enthält alle Kriterien aus 2.1 und ergänzt einige neue, etwa dass der Tastaturfokus nicht von fixierten Elementen verdeckt wird, dass Klickflächen eine Mindestgröße haben und dass Logins ohne Gedächtnisaufgaben wie abgetippte Zeichenfolgen auskommen. Die Richtlinien folgen vier Prinzipien:

Wahrnehmbar

Informationen müssen mit mehr als einem Sinn erfassbar sein: Alternativtexte für Bilder, Untertitel für Videos, ausreichende Farbkontraste von mindestens 4,5 zu 1 für Fließtext.

Bedienbar

Alle Funktionen sind per Tastatur erreichbar, der Fokus ist sichtbar, Klickflächen sind groß genug, und nichts blinkt oder bewegt sich unkontrolliert.

Verständlich

Klare Sprache, vorhersehbare Navigation, Formulare mit eindeutigen Beschriftungen und hilfreichen Fehlermeldungen.

Robust

Sauberer, semantischer Code, damit Screenreader und andere Hilfsmittel die Inhalte zuverlässig auslesen können.

Leichte Sprache und einfache Sprache

Verständlichkeit ist ein Teil der Barrierefreiheit, der oft unterschätzt wird. Dabei gibt es zwei Stufen, die häufig verwechselt werden:

  • Leichte Sprache folgt festen Regeln: kurze Hauptsätze, eine Aussage pro Satz, keine Fremdwörter, schwierige Begriffe werden erklärt. Texte in Leichter Sprache werden idealerweise von Menschen mit Lernschwierigkeiten geprüft.
  • Einfache Sprache ist weniger streng. Sie verzichtet auf Fachjargon und Schachtelsätze, bleibt aber näher an der Alltagssprache. Für die meisten Unternehmenswebsites ist sie der richtige Maßstab.

Auf dem Weg zu einer barrierearmen Website heißt einfache Sprache in der Praxis: klare Überschriften, kurze Absätze, eindeutige Linktexte statt „hier klicken“ und Fehlermeldungen, die sagen, was zu tun ist. Davon profitieren auch Nutzer ohne Einschränkung.

Videos und Audio barrierefrei gestalten

Videos sind für viele Unternehmen ein wichtiges Mittel, um Produkte oder Abläufe zu erklären. Damit sie niemanden ausschließen, verlangt WCAG je nach Medium unterschiedliche Alternativen:

MediumWas es braucht
Video mit TonSynchrone Untertitel, die auch Geräusche und Sprecherwechsel wiedergeben
Video mit wichtigen BildinhaltenAudiodeskription, also eine gesprochene Beschreibung dessen, was zu sehen ist, oder eine gleichwertige Textfassung
Reines Audio (Podcast, Sprachnachricht)Transkript als Text auf der Seite
Automatisch startende MedienTon darf nicht ungefragt länger als drei Sekunden laufen, Pause und Stopp müssen möglich sein

Automatisch erzeugte Untertitel sind ein guter Anfang, müssen aber immer korrigiert werden. Ein Transkript hat einen angenehmen Nebeneffekt: Suchmaschinen können den Inhalt Ihres Videos lesen.

Barrierefreie Formulare und PDFs

Formulare sind der Punkt, an dem aus Besuchern Kunden werden. Gerade hier scheitern viele Websites. Ein barrierearmes Formular hat für jedes Feld eine sichtbare, programmatisch verknüpfte Beschriftung, markiert Pflichtfelder nicht nur mit Farbe, erkennt Eingabefehler und erklärt sie im Klartext. Felder für Name, E-Mail oder Adresse unterstützen das automatische Ausfüllen des Browsers. Und klassische Bilder-CAPTCHAs ersetzen wir durch Verfahren, die ohne Bilderrätsel auskommen.

PDFs sind eine häufig übersehene Barriere. Ein eingescanntes Dokument ist für einen Screenreader nur ein Bild. Barrierefreie PDFs brauchen Tags für Überschriften, Listen und Tabellen, eine logische Lesereihenfolge, Alternativtexte und eine festgelegte Dokumentsprache. Der Standard dafür heißt PDF/UA. Oft ist es einfacher, Inhalte direkt als HTML-Seite anzubieten und das PDF nur als zusätzlichen Download bereitzustellen.

So machen wir Ihre Website barrierearm

  1. Prüfung

    Automatisierte Tools plus manueller Test mit Tastatur und Screenreader nach WCAG 2.2 AA.

  2. Bericht

    Alle Barrieren, nach Schwere sortiert, mit konkreter Lösung und Aufwand.

  3. Umsetzung

    Anpassung von Design, Code und Inhalten. Bei alten Seiten oft als Teil eines Relaunchs.

  4. Dokumentation

    Technische Angaben für Ihre Erklärung zur Barrierefreiheit, Schulung Ihrer Redaktion, regelmäßige Nachkontrolle.

Warum wir keine Overlay-Tools empfehlen

Widgets, die per Knopfdruck Barrierefreiheit versprechen, beheben die Ursachen im Code nicht. Oft stören sie Screenreader sogar. Barrieren verschwinden nur, wenn Design und Code sie gar nicht erst erzeugen.

Selbst testen mit kostenlosen Tools für den ersten Check

  • WAVE und axe DevTools als Browser-Erweiterungen zeigen fehlende Alternativtexte, Kontrastfehler und Strukturprobleme.
  • Lighthouse in Chrome liefert einen Accessibility-Score als groben Anhaltspunkt.
  • Tastatur-Test: Legen Sie die Maus weg und versuchen Sie, mit der Tab-Taste ein Formular abzusenden.
  • Zoom-Test: Vergrößern Sie die Seite auf 200 Prozent. Bleibt alles lesbar und bedienbar?

Automatisierte Tools finden nur etwa ein Drittel aller Barrieren. Für eine belastbare Aussage braucht es immer einen manuellen Test.

Checkliste: 10 schnelle Verbesserungen

Manche Barrieren lassen sich ohne großen Umbau beheben. Diese Punkte können Sie oder Ihre Redaktion oft sofort angehen:

  • Alternativtexte: Jedes informative Bild bekommt eine kurze Beschreibung, dekorative Bilder ein leeres alt-Attribut.
  • Überschriften: Eine H1 pro Seite, darunter H2 und H3 in logischer Reihenfolge, nie nur fett formatierter Text.
  • Kontraste: Graue Schrift auf hellem Grund mit einem Kontrast-Tool prüfen und bei Bedarf abdunkeln.
  • Linktexte: „Mehr erfahren“ durch aussagekräftige Texte ersetzen, etwa „Mehr zur Wartung“.
  • Fokus sichtbar: Beim Navigieren mit der Tab-Taste muss immer erkennbar sein, wo man sich befindet.
  • Formularbeschriftungen: Platzhaltertext im Feld ersetzt keine sichtbare Beschriftung.
  • Seitensprache: Im Code ist Deutsch als Sprache hinterlegt, damit Screenreader richtig vorlesen.
  • Untertitel: Vorhandene Videos mit geprüften Untertiteln versehen.
  • Keine Autoplays: Slider und Videos starten nicht von selbst oder lassen sich anhalten.
  • Tabellen und Listen: Echte HTML-Tabellen und Listen statt Tabulatoren oder Bildern von Tabellen.

Vorteile einer barrierearmen Website

Barrierefreiheit hilft Ihrem Unternehmen an mehreren Stellen:

Bessere Sichtbarkeit bei Google

Suchmaschinen lesen Websites ähnlich wie ein Screenreader. Saubere Überschriften, Alternativtexte, Transkripte und semantischer Code helfen beiden. Vieles, was Barrieren abbaut, ist deshalb auch gute Suchmaschinenoptimierung.

Mehr Reichweite

Wer Ihre Website nicht bedienen kann, wird kaum bei Ihnen kaufen oder anfragen. Mit jeder abgebauten Barriere wird diese Lücke kleiner.

Ältere Zielgruppen

Mit dem Alter lassen Sehkraft, Gehör und Feinmotorik nach. Online kaufen aber immer mehr ältere Menschen ein. Diese wachsende Zielgruppe profitiert von größerer Schrift und klaren Kontrasten, und eine einfache Navigation erleichtert ihr den Weg durch Ihre Website.

Bessere Nutzbarkeit für alle

Große Klickflächen helfen auf dem Smartphone, gute Kontraste im Sonnenlicht, verständliche Formulare jedem, der wenig Zeit hat. Ein großer Teil der Barrierefreiheit ist gute Nutzerführung.

Was kostet eine barrierefreie Website?

Bei neuen Websites planen wir Barrierefreiheit von Anfang an ein. Dann fällt der Mehraufwand deutlich geringer aus als beim späteren Nachrüsten. Für die Prüfung Ihrer bestehenden Website mit Bericht erhalten Sie nach einem kurzen Gespräch einen Festpreis, der sich nach Seitenzahl, Formularen und Dokumenten richtet. Die Kosten für das Nachrüsten hängen stark von Alter und Technik der Seite ab. Bei sehr alten Systemen ist ein Relaunch oft wirtschaftlicher.

Häufige Fragen zur Barrierefreiheit

Warum sprechen Sie von barrierearm und nicht von barrierefrei?

Weil vollständige Barrierefreiheit ein Idealzustand ist, den kaum eine Website dauerhaft erreicht. Barrierearm beschreibt genauer, was wir liefern: eine Website nach WCAG 2.2 in Stufe AA, geprüft mit Tools, Tastatur und Screenreader, mit dokumentierten Restbarrieren und einem Plan, wie Sie diese abbauen. Mehr dazu im Abschnitt Barrierefrei oder barrierearm.

Beraten Sie auch rechtlich zum BFSG?

Nein. Ob und wie das Barrierefreiheitsstärkungsgesetz für Ihr Angebot gilt, klären Sie mit einer Anwältin oder einem Anwalt, Ihrer IHK oder Ihrem Branchenverband. Wir prüfen und verbessern die Technik und liefern die Dokumentation, die Sie für diese Klärung brauchen.

Welche WCAG-Version setzen Sie um?

WCAG 2.2 in Stufe AA. Sie enthält alle Kriterien der Version 2.1 und ergänzt einige sinnvolle neue, etwa zur Mindestgröße von Klickflächen und zum sichtbaren Tastaturfokus.

Leidet das Design unter Barrierefreiheit?

Nein. Gute Kontraste, klare Struktur und verständliche Sprache machen eine Website für alle angenehmer. Diese Website ist selbst nach WCAG 2.2 AA gestaltet.

Was ist eine Barrierefreiheitserklärung?

Eine Seite, auf der Sie erklären, wie Ihre Website die Anforderungen erfüllt, welche Einschränkungen noch bestehen und wie Nutzer Barrieren melden können. Wir liefern die technischen Angaben dafür, die rechtliche Prüfung übernimmt Ihr Rechtsbeistand.

Was bedeutet barrierefrei bei Webseiten?

Eine Website ist barrierefrei, wenn alle Menschen sie nutzen können, auch mit Seh- oder Hörbeeinträchtigung, motorischen Einschränkungen oder geringen Deutschkenntnissen. Praktisch heißt das: ausreichende Kontraste, Bedienung per Tastatur, Alternativtexte für Bilder, verständliche Formulare und eine saubere Struktur, die Screenreader vorlesen können. Vollständig erreicht das kaum eine Website. Wir arbeiten deshalb auf eine barrierearme Website nach den WCAG 2.2 in Stufe AA hin.

Wie teste ich, ob meine Website barrierefrei ist?

Einen ersten Eindruck geben kostenlose Tools wie WAVE oder Lighthouse und ein einfacher Test: Bedienen Sie Ihre Website zehn Minuten nur mit der Tastatur. Automatische Tests finden aber nur einen Teil der Probleme. Für eine belastbare Aussage prüfen wir zusätzlich von Hand und mit Screenreader. Tools für den Selbsttest stellen wir im Abschnitt Selbst testen vor.

Kann eine WordPress-Website barrierefrei sein?

Ja. WordPress selbst bringt eine gute Grundlage mit, den Ausschlag geben Theme und Plugins. Viele fertige Themes und Page-Builder erzeugen Code, der Screenreadern und Tastaturnutzern Probleme macht. Wir entwickeln Themes deshalb von Anfang an barrierearm und prüfen Plugins wie Formulare oder Cookie-Banner, bevor sie auf die Website kommen.

Gibt es Beispiele für barrierefreie Websites?

Gute Anschauung bieten Websites öffentlicher Stellen, die schon länger auf Barrierefreiheit achten und eine Erklärung zur Barrierefreiheit veröffentlichen. Achten Sie beim Ansehen auf sichtbare Tastaturmarkierungen, gut lesbare Kontraste, klare Überschriften und Formulare mit eindeutigen Beschriftungen. Diese Merkmale lassen sich auf jede Unternehmenswebsite übertragen.

Erzählen Sie uns von Ihrem Projekt.

Ein Gespräch von 30 Minuten, kostenlos. Danach wissen Sie, was Ihre Website braucht, was sie kostet und wie lange es dauert.

Dominik Plaszewski

Dominik PlaszewskiGeschäftsführer
02452 / 68 74 116 · info@dpi-design.de

Erstgespräch vereinbaren
Oranges Wählscheibentelefon neben einer Kappe mit dpi-Design-Logo auf einem Holztisch