Aktuelles

Bleiben Sie informiert!

31.05.2026

Grundlagen der Barrierefreiheit für Webdesigner: Warum sie bereits im Layout beginnt

Infos

Eine Website kann technisch sauber entwickelt sein und trotzdem an der Barrierefreiheit scheitern. Der Grund liegt häufig nicht nur im Code, sondern schon im Design. Zu geringe Kontraste, kleine Schriften, unklare Navigationen oder Interaktionen, die ausschließlich mit der Maus funktionieren, entstehen meist bereits in der Konzeptions- und Gestaltungsphase.

Für Webdesigner in Agenturen wird Barrierefreiheit deshalb zunehmend zu einer Kernkompetenz. Einerseits aufgrund gesetzlicher Anforderungen, andererseits weil Kunden das Thema immer häufiger nachfragen. Wer Barrierefreiheit erst nach Abschluss des Designs berücksichtigt, verursacht oft unnötige Korrekturschleifen zwischen Design und Entwicklung.

Dieser Artikel erklärt die wichtigsten Grundlagen, zeigt die rechtlichen Rahmenbedingungen und gibt konkrete Empfehlungen für die tägliche Arbeit in Agenturen.

Was bedeutet digitale Barrierefreiheit?

Digitale Barrierefreiheit beschreibt die Gestaltung von Websites, Anwendungen und digitalen Inhalten so, dass sie von möglichst vielen Menschen genutzt werden können.

Dazu gehören unter anderem:

Menschen mit Sehbehinderungen oder Blindheit
Menschen mit Farbsehschwächen (zum Beispiel ich!)
Menschen mit motorischen Einschränkungen
Menschen mit Hörbeeinträchtigungen
Menschen mit kognitiven Einschränkungen
Ältere Menschen mit altersbedingten Einschränkungen

Barrierefreiheit ist jedoch kein Nischenthema. Viele Maßnahmen verbessern die Nutzerfreundlichkeit für alle Besucher. Eine verständliche Navigation, gut lesbare Texte oder ausreichend große Buttons helfen unabhängig von einer Behinderung.

Auch aus SEO /GEO-Sicht machen viele grundsätzliche Anforderungen an die Barrierefreiheit absolut Sinn: klare Headline-Struktur, aussagekräftige Alt-Texte und Buttons mit sinnvollen Beschreibungstexten helfen Google und anderen Crawlern, die Seiten zu verstehen und zu indizieren.

Warum Barrierefreiheit für Agenturen immer wichtiger wird

Mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) ist das Thema in vielen Unternehmen deutlich stärker in den Fokus gerückt. Zahlreiche Anbieter digitaler Dienstleistungen und Online-Shops müssen sich inzwischen mit den Anforderungen auseinandersetzen.

Auch Unternehmen, die nicht unmittelbar unter die gesetzlichen Regelungen fallen, beschäftigen sich zunehmend mit Barrierefreiheit. Dafür gibt es mehrere Gründe:

Rechtliche Risiken sollen reduziert werden.
Websites sollen für mehr Menschen nutzbar sein.
Öffentliche Ausschreibungen verlangen häufig barrierefreie Lösungen.
Barrierefreiheit verbessert häufig die allgemeine User Experience.
Viele Anforderungen überschneiden sich mit SEO- und Usability-Prinzipien.

Für Agenturen entsteht dadurch ein zusätzlicher Beratungsbedarf. Kunden erwarten nicht nur eine optisch ansprechende Website, sondern auch eine Lösung, die aktuellen Anforderungen gerecht wird.

Die rechtlichen Grundlagen

Die zentrale Grundlage für digitale Barrierefreiheit in Europa bildet der European Accessibility Act (EAA). In Deutschland wurde dieser durch das Barrierefreiheitsstärkungsgesetz umgesetzt.

Für die praktische Umsetzung orientieren sich nahezu alle Regelwerke an den Web Content Accessibility Guidelines (WCAG). Die WCAG definieren Anforderungen in unterschiedlichen Bereichen und dienen weltweit als Referenz für barrierefreie Websites.

Webdesigner müssen die Richtlinien nicht auswendig kennen. Ein grundlegendes Verständnis hilft jedoch dabei, spätere Probleme bereits im Layout zu vermeiden.

Die vier Grundprinzipien der WCAG

Die WCAG basieren auf vier zentralen Prinzipien.

1. Wahrnehmbar

Inhalte müssen für Nutzer wahrnehmbar sein. Dazu gehören ausreichende Kontraste, Alternativtexte für Bilder und eine klare Struktur.

2. Bedienbar

Alle Funktionen müssen ohne besondere Einschränkungen nutzbar sein. Dazu zählt insbesondere die Bedienung per Tastatur.

3. Verständlich

Inhalte und Interaktionen müssen nachvollziehbar gestaltet werden. Nutzer dürfen nicht raten müssen, was als Nächstes passiert.

4. Robust

Inhalte sollen mit unterschiedlichen Browsern, Hilfsmitteln und Endgeräten funktionieren.

Auch wenn die technische Umsetzung meist bei der Entwicklung liegt, beeinflusst das Design alle vier Bereiche.

Warum Barrierefreiheit bereits im Designprozess beginnt

Viele Agenturen behandeln Barrierefreiheit noch immer als technische Aufgabe. Tatsächlich entstehen zahlreiche Probleme deutlich früher.

Wenn beispielsweise eine Farbpalette mit schwachen Kontrasten definiert wird, kann die Entwicklung dieses Problem nur begrenzt lösen. Gleiches gilt für sehr kleine Schriftgrößen oder komplizierte Navigationsstrukturen.

Deshalb sollte Barrierefreiheit bereits in folgenden Projektphasen berücksichtigt werden:

Konzeption
Wireframes
Informationsarchitektur
Designsysteme
UI-Komponenten
Responsive Design

Je früher Anforderungen berücksichtigt werden, desto geringer ist der spätere Anpassungsaufwand.

Typografie: Einer der häufigsten Schwachpunkte

Typografie hat einen erheblichen Einfluss auf die Nutzbarkeit einer Website.

Schriftgröße

Fließtexte sollten in der Regel nicht unter 16 Pixel gestaltet werden. Viele moderne Websites bewegen sich inzwischen zwischen 16 und 18 Pixel.

Zeilenlänge

Sehr breite Textbereiche erschweren das Lesen. Für längere Inhalte haben sich Zeilenlängen zwischen 60 und 80 Zeichen bewährt.

Zeilenabstand

Zu eng gesetzte Zeilen reduzieren die Lesbarkeit erheblich. Ein ausreichender Zeilenabstand verbessert die Orientierung innerhalb längerer Texte.

Schriftwahl

Besonders dekorative Schriften sollten sparsam eingesetzt werden. Für Fließtexte eignen sich gut lesbare Schriftarten mit klaren Zeichenformen.

Farben und Kontraste richtig einsetzen

Kontraste gehören zu den häufigsten Problemen in modernen Webdesigns.

Beliebte Designtrends wie hellgraue Texte auf weißem Hintergrund sehen in Präsentationen oft ansprechend aus, führen im Alltag jedoch zu schlechter Lesbarkeit.

Bereits während der Gestaltung sollten Kontraste geprüft werden.

Besonders wichtig sind:

Fließtexte
Buttons
Navigationen
Formulare
Statusmeldungen
Icons mit Informationsfunktion

Tools wie der WebAIM Contrast Checker oder Stark für Figma erleichtern die Prüfung erheblich.

Navigation und Informationsarchitektur

Eine übersichtliche Struktur ist ein wesentlicher Bestandteil barrierefreier Websites.

Besucher sollten jederzeit nachvollziehen können:

Wo sie sich befinden
Welche Inhalte verfügbar sind
Wie sie zum nächsten Schritt gelangen

Komplexe Mega-Menüs sind nicht grundsätzlich problematisch. Sie benötigen jedoch eine saubere Struktur und eine nachvollziehbare Hierarchie.

Besonders hilfreich sind:

Eindeutige Menübezeichnungen
Konsistente Navigationen
Sichtbare aktive Zustände
Breadcrumb-Navigationen bei umfangreichen Websites

Buttons, Links und Interaktionselemente

Viele UI-Komponenten wirken auf Designboards überzeugend, funktionieren im Alltag jedoch nur eingeschränkt.

Buttons

Ausreichende Größe
Guter Kontrast
Eindeutige Beschriftung
Sichtbare Hover- und Fokuszustände

Links

Links sollten nicht ausschließlich über Farben erkennbar sein. Eine zusätzliche visuelle Kennzeichnung verbessert die Erkennbarkeit.

Icons

Icons allein reichen häufig nicht aus. Bei wichtigen Funktionen sollten ergänzende Beschriftungen vorgesehen werden.

Formulare aus Design-Sicht

Formulare gehören zu den wichtigsten Conversion-Elementen vieler Websites.

Gleichzeitig entstehen hier besonders viele Barrieren.

Webdesigner sollten darauf achten:

Beschriftungen dauerhaft sichtbar zu halten
Fehlermeldungen verständlich darzustellen
Pflichtfelder eindeutig zu kennzeichnen
Ausreichende Feldgrößen vorzusehen
Statusmeldungen sichtbar zu gestalten

Placeholder-Texte sollten niemals die einzige Feldbeschriftung sein.

Tastaturbedienung mitdenken

Viele Nutzer bedienen Websites nicht ausschließlich mit der Maus.

Deshalb sollten Designer bereits in ihren Entwürfen festlegen:

Wie Fokuszustände aussehen
Wie aktive Elemente dargestellt werden
Wie Menüs bei Tastatursteuerung funktionieren
Wie Formulare navigiert werden

Ein häufiger Fehler besteht darin, sichtbare Fokusrahmen vollständig zu entfernen. Dadurch wird die Orientierung erheblich erschwert.

Animationen und Bewegung sparsam einsetzen

Animationen können Interaktionen verständlicher machen. Zu viele Bewegungen führen jedoch häufig zum Gegenteil.

Besonders problematisch sind:

Automatisch startende Slider
Dauerhaft bewegte Inhalte
Parallax-Effekte mit starker Bewegung
Unkontrollierte Scroll-Animationen

Animationen sollten immer einen funktionalen Zweck erfüllen. Form follows function!

Barrierefreiheit in Designsystemen verankern

Agenturen profitieren besonders dann von Barrierefreiheit, wenn sie Bestandteil des Designsystems wird.

Dazu gehören beispielsweise:

Definierte Kontrastwerte
Typografische Standards
Vorgeprüfte Komponenten
Button-Varianten mit Fokuszuständen
Formularstandards
Dokumentierte Abstände und Größen

Dadurch muss Barrierefreiheit nicht in jedem Projekt neu diskutiert werden.

Praxisbeispiel: Relaunch eines Unternehmensauftritts

Eine Agentur entwickelt den Relaunch einer Website für einen technischen Dienstleister.

Im ersten Designkonzept sind die Texte relativ klein, die Kontraste schwach und wichtige Aktionen ausschließlich über Icons gekennzeichnet.

Bereits während der Designphase wird eine Barrierefreiheitsprüfung durchgeführt.

Die Anpassungen umfassen:

Überarbeitung der Farbpalette
Größere Buttons
Verbesserte Typografie
Zusätzliche Beschriftungen für Icons
Definierte Fokuszustände

Die Umsetzung verursacht nur geringen Mehraufwand, da die Probleme früh erkannt werden. Nach der Entwicklung wären die Anpassungen deutlich aufwendiger gewesen.

Hilfreiche Tools für Webdesigner

Stark für Figma und Sketch
WebAIM Contrast Checker
WAVE Accessibility Evaluation Tool
axe DevTools
Colour Contrast Analyser
Adobe Accessibility Tools

Weiterführende Ressourcen

Checkliste für barrierefreie Webdesigns

Checkliste als PDF downloaden.

Kontraste geprüft
Mindestens 16 Pixel Fließtext vorgesehen
Lesefreundliche Zeilenlängen eingeplant
Überschriftenhierarchie definiert
Navigation logisch strukturiert
Buttons ausreichend groß gestaltet
Hover- und Fokuszustände dokumentiert
Links nicht ausschließlich über Farben erkennbar
Icons mit Beschriftungen ergänzt
Formularfelder eindeutig gekennzeichnet
Fehlermeldungen verständlich gestaltet
Pflichtfelder sichtbar markiert
Tastaturbedienung berücksichtigt
Responsive Nutzung geprüft
Animationen auf notwendige Funktionen beschränkt
Designsystem um Barrierefreiheitsregeln ergänzt
Komponentenbibliothek dokumentiert
Kontrastprüfung in den Designprozess integriert

Checkliste als PDF downloaden.

Fazit

Barrierefreiheit beginnt nicht im Frontend, sondern bereits im Layout. Viele der späteren Herausforderungen entstehen durch Designentscheidungen, die in frühen Projektphasen getroffen werden.

Für Webdesigner in Agenturen bedeutet das, Barrierefreiheit als festen Bestandteil ihrer Arbeit zu verstehen. Wer Typografie, Kontraste, Navigation, Formulare und Interaktionen von Anfang an berücksichtigt, erleichtert nicht nur die Entwicklung, sondern verbessert die Nutzbarkeit der gesamten Website.

Barrierefreie Websites sind keine Speziallösung für einzelne Nutzergruppen. Sie sind in vielen Fällen die besser durchdachten Websites.

Projekt anfragen Termin vereinbaren

FAQ

Ist Barrierefreiheit nur für öffentliche Einrichtungen relevant?

Nein. Durch das Barrierefreiheitsstärkungsgesetz sind auch viele private Unternehmen betroffen. Darüber hinaus wird Barrierefreiheit zunehmend von Kunden und Auftraggebern eingefordert.

Müssen Webdesigner die WCAG vollständig kennen?

Nein. Ein grundlegendes Verständnis der wichtigsten Anforderungen reicht für die meisten Designaufgaben aus. Die technische Detailumsetzung erfolgt häufig gemeinsam mit Entwicklern.

Welcher Fehler tritt bei Webdesigns am häufigsten auf?

Zu geringe Farbkontraste gehören zu den häufigsten Problemen. Direkt danach folgen kleine Schriftgrößen und fehlende Fokuszustände.

Beeinträchtigt Barrierefreiheit die kreative Gestaltung?

Nein. Gute Barrierefreiheit schränkt Gestaltungsmöglichkeiten kaum ein. Sie setzt lediglich gewisse Rahmenbedingungen für Lesbarkeit und Bedienbarkeit.

Sollte Barrierefreiheit Bestandteil eines Designsystems sein?

Ja. Agenturen profitieren erheblich davon, wenn Standards für Kontraste, Typografie und Komponenten bereits im Designsystem definiert werden.

Welche Rolle spielt Figma bei der Barrierefreiheit?

Figma bietet zahlreiche Erweiterungen, mit denen Kontraste, Fokuszustände und andere Anforderungen bereits während der Gestaltung geprüft werden können.

Sind barrierefreie Websites automatisch besser für SEO?

Nicht automatisch. Viele Anforderungen überschneiden sich jedoch mit bewährten SEO- und Usability-Prinzipien, wodurch häufig positive Nebeneffekte entstehen.

Wann sollte eine Barrierefreiheitsprüfung stattfinden?

Idealerweise bereits während der Konzeptions- und Designphase. Dadurch lassen sich viele Probleme früh erkennen und kostspielige Anpassungen vermeiden.

Warum habt ihr als technische Agentur so einen Artikel veröffentlicht?

In erster Linie, damit unsere Agenturpartner einen besseren Job machen können. Starke Agenturpartner sind auch gut für uns. Aber auch aus Eigennutz: Denkt der/die Webdesigner/in schon an Barrierefreiheit, haben wir in der technischen Umsetzung deutlich weniger Aufwand.