Zum Hauptinhalt springen

Leistung · Barrierefreies Design

Barrierefreies Design: Agenturen im DACH-Raum

Kurzantwort: Barrierefreies Design legt vor der Entwicklung fest, was ein Audit später nicht mehr günstig nachrüsten kann: Kontraste, sichtbare Fokus-Zustände, ausreichend große Bedienelemente und Farbcodierung mit zusätzlichem Merkmal. Ein Design-System, das diese Regeln von Anfang an trägt, macht barrierefreie Umsetzung zum Normalfall statt zur Nachbesserung.

Ein Großteil der WCAG-Anforderungen entscheidet sich am Reißbrett, nicht im Code: Kontrastwerte, Fokus-Darstellung, Abstände und Zielgrößen sind Design-Entscheidungen. Wird die Vorlage barrierefrei entworfen, setzt die Entwicklung sie in der Regel korrekt um. Wird sie es nicht, produziert jede noch so saubere Implementierung dieselben Fehler weiter. Die folgenden Anbieter im Verzeichnis bieten barrierefreies Design als eigene Leistung an.

Welche WCAG-Kriterien betreffen den Entwurf?

Kontraste (1.4.3, 1.4.11): 4,5:1 für normalen Text, 3:1 für große Schrift und für wesentliche UI-Komponenten. Sichtbarer Fokus (2.4.7): Ein entfernter Fokusrahmen ohne gleichwertigen Ersatz macht eine Seite für Tastaturnutzende praktisch unbedienbar. Zielgröße (2.5.8, WCAG 2.2): Bedienelemente brauchen mindestens 24×24 CSS-Pixel, sofern kein ausreichender Abstand zu Nachbarelementen besteht. Farbe als einziges Merkmal (1.4.1): Ein Fehlerzustand, der sich nur durch Rot von einem Erfolgszustand unterscheidet, ist für farbenblinde Nutzende nicht erkennbar.

Warum ein Design-System den Unterschied macht

Sind Kontraste, Fokus-Stile und Abstände einmal zentral in Farbpaletten, Komponenten und Tokens festgelegt, gilt die Korrektur für jede Seite, die das System verwendet. Fehlt diese zentrale Stelle, wird jede Abweichung zu einer Einzelkorrektur auf jeder betroffenen Seite. Der gleiche Mechanismus, der Block-Themes in WordPress einen Vorteil verschafft, gilt hier für jedes Designsystem: siehe [Barrierefreie WordPress-Themes](/ratgeber/barrierefreie-wordpress-themes/).

Wo Design und Entwicklung zusammenarbeiten müssen

Ein barrierefreier Entwurf allein reicht nicht: Fokus-Reihenfolge, Ankündigungen für Screenreader und Tastaturbedienbarkeit entstehen erst im Code. Design legt fest, wie ein Zustand aussieht, Entwicklung setzt um, dass er auch technisch als Zustand erkennbar ist. Ein gutes Übergabeformat benennt beide Seiten: Farbwert und Kontrastverhältnis, nicht nur „Grau“.

Mehr dazu im Ratgeber: Farbkontrast nach WCAG: Werte und Praxisbeispiele

Agenturen für Barrierefreies Design

7 Agenturen bieten diese Leistung im Verzeichnis

Häufige Fragen zu Barrierefreies Design

Reicht ein WCAG-Audit nach dem Design nicht auch?

Es findet dieselben Fehler, aber später und teurer. Ein Audit nach der Umsetzung deckt auf, was im Entwurf falsch angelegt wurde; die Korrektur betrifft dann bereits gebauten Code statt einer Vorlage. Barrierefreies Design verhindert einen Teil dieser Fehler von vornherein.

Welche Zielgröße gilt für Buttons und Links?

WCAG 2.2, Erfolgskriterium 2.5.8, verlangt mindestens 24×24 CSS-Pixel für Bedienelemente, es sei denn, es besteht ausreichender Abstand zu benachbarten Zielen oder eine gleichwertige Alternative ist vorhanden. Das betrifft besonders mobile Oberflächen mit dicht stehenden Icons.

Was heißt "Farbe nicht als einziges Merkmal" in der Praxis?

Ein Pflichtfeld, das nur durch eine rote Umrandung markiert ist, erfüllt WCAG 1.4.1 nicht. Nötig ist ein zusätzliches Merkmal wie Text, Icon oder Muster, damit auch farbenblinde oder monochrom sehende Nutzende den Zustand erkennen.

Muss jedes Bedienelement einen sichtbaren Fokusrahmen haben?

Ja, jedes interaktive Element, das per Tastatur erreichbar ist. `outline: none` ohne einen mindestens gleichwertigen eigenen Fokusstil verletzt WCAG 2.4.7 auf Level AA. Details und Codebeispiele stehen im Ratgeber Tastaturbedienung und Fokus.

Transparenz & Haftungsausschluss

Keine Zertifizierungsstelle: barrierefreie-agenturen.de ist ein kuratiertes Verzeichnis. Eine Listung stellt keine offizielle Zertifizierung, kein Gütesiegel und keine Gewährleistung für die tatsächliche Arbeitsqualität dar.

Eigenverantwortung: Wir prüfen Agenturen vor der Aufnahme nach bestem Wissen auf Fachkompetenz. Die Verantwortung für die Auswahl, Beauftragung und die letztendliche BFSG-, BaFG- bzw. BehiG-/EAA-Konformität Ihrer Website liegt jedoch allein bei Ihnen bzw. der beauftragten Agentur.

Rechtsberatung: Informationen auf dieser Seite dienen der allgemeinen Orientierung zu den geltenden Rechtsrahmen im DACH-Raum (BFSG in Deutschland, BaFG in Österreich, BehiG/EAA in der Schweiz) und ersetzen keine individuelle juristische Fachberatung.