Mit dem Model Context Protocol (MCP) können Sie KI-Tools kontrolliert in Ihre Prozesse integrieren: standardisiert, sicher und nachweisbar. Statt Einzellösungen zu nutzen, verbindet MCP Ihre Tools, Daten und Richtlinien über einen gemeinsamen Anschluss. Das reduziert den Integrationsaufwand und schafft Governance, von der Pilotphase bis zum Rollout.

MCP: Der neue Standard für KI-Tools

MCP erklärt: Architektur, Tools, Ressourcen und Prompts. Standardisiert und sicher mit weniger Integrationsaufwand und portablen KI-Workflows für Unternehmen.

Model Context Protocol (MCP): Neuer Standard für KI-Tools

Das Model Context Protocol (MCP) ist ein von Anthropic entwickeltes, standardisiertes Kommunikationsprotokoll. Es wird oft als der „USB-C-Anschluss für KI-Tools“ bezeichnet, da es eine universelle Methode zur Verbindung externer Tools und Kontexte mit KI-Systemen bietet.

Die wahre Stärke von KI-Tools zeigt sich erst, wenn sie auf eigene Daten zugreifen können, sei es auf E-Mails, Dokumente oder Tools wie Google Workspace. MCP ermöglicht diesen Datenzugriff und die Ausführung von Aktionen, indem es eine standardisierte Schnittstelle zwischen KI-Modellen und der Außenwelt schafft.

MCP folgt einem Client-Server-Modell mit drei Hauptakteuren:

MCP-Clients (Hosts): Dies sind die Anwendungen, mit denen Sie direkt interagieren, wie zum Beispiel die Claude Desktop App. Sie steuern die Kommunikation zwischen Nutzer, KI-Modell und MCP-Server. Die Clients fragen den Server nach verfügbaren Funktionen und übermitteln die Anfragen des KI-Modells an den Server.

MCP-Server: Sie agieren als eine Art Vermittler und universelle Adapter zwischen den KI-Tools und den Dienstleistern. Sie stellen die Fähigkeiten externer Dienste über eine standardisierte Schnittstelle bereit und werden so für jeden kompatiblen “Host” zugänglich. Tools wie Slack, Notion oder GitHub müssen ihre bestehenden APIs nicht ändern, da diese Aufgabe der MCP-Server übernimmt.

Dienstleister (Anbieter) sind die eigentlichen Anwendungen, wie zum Beispiel CRM-Systeme, Datenbanken oder E-Mail-Clients, die die eigentliche Arbeit verrichten.

MCP-Server können verschiedene Arten von Logiken und Fähigkeiten bereitstellen, die für ihre KI-Tools von entscheidender Bedeutung sind.

Dies sind Code-Module, die es KI-Tools ermöglichen, mit der Außenwelt zu interagieren und Aktionen auszuführen, wie beispielsweise das Erstellen von Aufgaben oder das Durchsuchen von E-Mails.

Diese bieten Zugang zu persistenten Daten wie Dateien, Datenbankeinträgen oder Wissensdatenbanken, auf die die KI über verschiedene Sitzungen hinweg lesend und schreibend zugreifen kann. Dadurch wird verhindert, dass die KI bei jeder neuen Interaktion den Kontext verliert.

Prompts sind Anweisungen, die dem KI-Tool mitteilen, wie man sich verhalten oder die verfügbaren Anwendungen nutzen soll. Prompts können dynamisch entdeckt werden und helfen der KI, spezifische Anforderungen, wie beispielsweise einen bestimmten Marken-Tonfall, einzuhalten.

Das Model Context Protocol (MCP) verspricht, die Art und Weise, wie Unternehmen KI-Tools nutzen, grundlegend zu verändern.

Portable und zukunftssichere KI-Integrationen: Mithilfe von MCP können Sie Toolsets entwickeln, die Sie einmal erstellen und dann in verschiedenen KI-Clients wie Claude wiederverwenden können. Dadurch wird die Abhängigkeit von spezifischen Modellen oder Anbietern reduziert und Ihre KI-Infrastruktur wird deutlich flexibler.

Überwindung der LLM-Grenzen: Von Natur aus sind Sprachmodelle nicht in der Lage, eigenständig Aktionen auszuführen. MCP schließt diese Lücke, indem es ihnen einen standardisierten Weg zu externen Tools und Daten bietet. Dadurch werden sie von reinen Textgeneratoren zu „agentischen” Assistenten, die reale Aufgaben erledigen können.

Standardisierung für verbesserte Zusammenarbeit: Im Gegensatz zu proprietären Lösungen wie OpenAIs Function Calling bietet MCP einen offenen und herstellerunabhängigen Standard. Dies fördert ein reichhaltiges Ökosystem von Plug-and-Play-Tools und Integrationen, die von jedem implementiert werden können.

Effizientere Verwaltung des Kontext und mehr Sicherheit: MCP optimiert die Nutzung des begrenzten Kontext-Felds von KI-Tools, indem es Parameterwerte standardisiert und die Fehlerbehandlung vereinfacht. Zudem verbessert MCP die Sicherheit durch Autorisierungsstandards, die eine granulare Berechtigungsvergabe ermöglichen und so Missbrauch vorbeugen.

Beschleunigung der Entwicklung: Mit Lösungen wie Prismic MCP können Entwickler Slices für Websites direkt aus Figma UI Designs generieren, ohne selbst Code schreiben zu müssen. Dies reduziert die wiederholte manuelle Codierung erheblich und stellt sicher, dass der generierte Code den Best Practices des Projekts entspricht.

Verbesserte Design-Handoffs: MCP-Clients wie Builder’s Fusion schaffen eine gemeinsame visuelle Code-Umgebung für das gesamte Team. Produktmanager können Prototypen mit bestehenden Komponenten auf echten Branches erstellen, Designer können visuelle Anpassungen in einer Figma-ähnlichen Oberfläche vornehmen und Entwickler erhalten einen visuell und strukturell vollständigen Handoff. Dies reduziert den Kommunikationsaufwand und beschleunigt den gesamten Softwareentwicklungszyklus.

Trotz seines enormen Potenzials steht MCP noch am Anfang seiner Entwicklung. Eine große Herausforderung besteht darin, dass Unternehmen ihre eigenen Daten anbindbar machen, da über 90 % der KI-Projekte in Unternehmen genau daran scheitern. Der Datenzugriff erfolgt häufig noch über Stichworte, was sich in Zukunft verbessern muss.

Aktuell erfordert die Einrichtung von MCP-Servern noch technisches Know-how und offizielle Server großer SaaS-Anbieter sind selten. Auch die Akzeptanz bei den Clients, insbesondere für die volle Unterstützung von Ressourcen und Prompts, ist noch begrenzt.

Dennoch ist MCP ein vielversprechender Schritt in Richtung einer vereinheitlichten und leistungsfähigeren KI-Landschaft. Er legt den Grundstein für unternehmensweite, sichere KI-Tools, die sich nahtlos in bestehende Arbeitsabläufe integrieren lassen. Zudem eröffnet er das Potenzial für spezialisierte „MCP App Stores”, die Nischenexpertise monetarisieren. MCP könnte somit der Startpunkt für eine universelle und modulare KI-Arbeitsumgebung sein.

Was ist das Model Context Protocol (MCP)?

Wer hat MCP entwickelt?

Welches Problem löst MCP?

Was sind die Hauptkomponenten der MCP-Architektur?

Was sind MCP-Tools, -Ressourcen und -Prompts?

Welche KI-Tools unterstützen MCP bereits?

Welche Vorteile bietet der Einsatz von MCP für Unternehmen?

Gibt es aktuelle Herausforderungen bei der Implementierung von MCP?

Häufige Fragen

Werk 8 eine Digitalagentur aus Ludwigsburg in der Nähe von Stuttgart. Wir entwickeln digitale Lösungen, die Nutzer begeistern, Marken stärken und Emotionen wecken. In unseren Projekten vereinen wir strategische Beratung, Kreativität, technologische Expertise und den Einsatz von Künstlicher Intelligenz (KI).

Ob barrierefreie Website, performante Plattform oder skalierbare E-Commerce-Lösung – unser Team entwickelt individuelle digitale Produkte, die auf allen Endgeräten funktionieren und ein echtes Nutzererlebnis schaffen. Zu unseren Kunden zählen Unternehmen aus der Industrie, dem Handel, der Lebensmittelbranche, dem Finanzwesen sowie dem Sport- und Eventbereich.

https://www.anthropic.com/news/model-context-protocol

https://openai.github.io/openai-agents-python/mcp/

https://cookbook.openai.com/examples/mcp/mcp_tool_guide

https://www.builder.io/c/docs/projects-mcp-server-integrations

Wenn es um SEO (Suchmaschinenoptimierung) und künstliche Intelligenz geht, wird oft darüber gesprochen, wie KI Inhalte schneller erstellt, kleinere Aufgaben übernimmt oder sogar technische Probleme auf einer Website löst. Doch wie kann man KI-Tools wie ChatGPT, Perplexity oder Google Gemini nutzen, um nicht nur Inhalte zu optimieren, sondern auch die Sichtbarkeit in den Antworten der KI zu verbessern?

SEO in Zeiten von ChatGPT, Perplexity und Co.

GEO, GAIO & KI-SEO: So strukturieren Sie Inhalte für ChatGPT, Perplexity & Google Gemini, um in AI-Antworten & Google AI Overviews gefunden zu werden.

Von der KI gefunden werden: GEO, GAIO & KI-SEO nutzen

Wer hat in den letzten Monaten nicht schon einmal ChatGPT um Hilfe bei komplexen Aufgaben gebeten? Generative KI (engl. Gen AI) ist in kürzester Zeit zur ersten Anlaufstelle geworden. Vor allem Jugendliche im Alter von 15 bis 25 Jahren nutzen KI, um schnell Antworten auf die unterschiedlichsten Fragen zu erhalten. KI-Tools haben unsere Lebens- und Arbeitsweise radikal verändert. Diese neue Situation beeinflusst auch die Art und Weise, wie wir Inhalte erstellen und strukturieren, damit sie von der KI schnell gefunden werden können.

Google hat auf das veränderte Such- und Nutzerverhalten längst reagiert und die AI Overviews in den Suchergebnissen eingeführt. Mithilfe dieser neuen KI-Funktion erstellt Google direkt neue Antworten, die auf Inhalten aus dem Web basieren, und platziert sie über den klassischen Suchergebnissen. Nutzer erhalten so direkt eine Antwort auf ihre Fragen inklusive Verlinkungen zu den entsprechenden Seiten.

Für die Antworten in den AI Overviews durchsucht Google das Web, den Knowledge Graph und weitere strukturierte Daten und bewertet die Inhalte nach Relevanz und Autorität.

Es gibt keine einfache Antwort auf die Frage, wie man für KI-Tools wie ChatGPT, Perplexity, Google Gemini und Co. relevant wird. Es zeichnen sich jedoch mittlerweile Muster ab, wie Inhalte technisch sauber strukturiert, verständlich positioniert und für KI zugänglich gemacht werden können.

Der Begriff GEO (Generative Engine Optimization) beschreibt genau das: die Optimierung von Inhalten, um neben der Sichtbarkeit bei Google auch in den Antworten der KI-Tools zu erscheinen.

Die wichtigsten Faktoren für ein erfolgreiches GEO sind:

die Verbesserung der Verständlichkeit der Inhalte,

die Nutzung von Fachbegriffen und Statistiken zur kontextuellen Relevanz und

die Optimierung des Contents mithilfe von strukturierten Daten und Schema-Markup.

GAIO (Generative AI Optimization) verfolgt einen ganzheitlichen Ansatz und verbindet klassische SEO-Strategien mit KI-optimierten Formaten, um Marken, Produkte und als Empfehlung in den KI-generierten Inhalten zu platzieren. 

Wir analysieren die Inhalte Ihrer Website in einem kostenlosen KI-Sichtbarkeits-Check.

Ist Ihre Website KI-ready?

Klassische SEO ist nach wie vor wichtig: Strukturierter Code, schnelle Ladezeiten, semantische HTML-Tags und guter Content bilden das technische Fundament. Doch das allein reicht nicht mehr aus. Die Relevanz der Inhalte für Menschen und Maschinen wird immer entscheidender.

KI erkennt Muster, Argumentationslogik, Verlässlichkeit und Mehrwert. Deshalb müssen Inhalte nicht nur für Suchmaschinen, sondern auch für KI-Tools lesbar sein.

Handlungsempfehlungen für eine bessere Sichtbarkeit in KI-Tools

Die Inhalte sollten klar und authentisch sein. Vermeide Buzzwords.

Strukturieren Sie Ihre Inhalte, indem Sie Listen und Absätze nutzen und Überschriften richtig formatieren.

Verwende FAQ-Abschnitte (Frequently Asked Questions), um typische Fragen prägnant zu beantworten.

Formuliere die Antworten so, wie sie eine KI zitieren würde.

Schaffe Markenwahrnehmung (Brand Awareness) außerhalb von Google, zum Beispiel in Foren (wie zum Beispiel Reddit), in den sozialen Medien oder durch Empfehlungen.

Verwende strukturierte Daten mit dem Markup von schema.org.

Branding ist ein unterschätzter Rankingfaktor

Sowohl Google als auch andere Suchmaschinen bevorzugen Inhalte, die häufig über unterschiedliche Plattformen und Medien zitiert und geteilt werden. Das gilt auch für KI-Tools wie ChatGPT, Perplexity und Gemini. Daher sind Inhalte mit einer klaren Haltung, Wiedererkennbarkeit und Tonalität der Schlüssel zum langfristigen Erfolg.

Wer heute sichtbar sein will, muss nicht nur gut schreiben, sondern auch so, dass Menschen und KI gleichermaßen verstehen, worum es geht. GEO und GAIO sind keine Ersatzstrategien, sondern sinnvolle Ergänzungen zur klassischen SEO-Welt.

Was bedeutet GEO im Online-Marketing?

Wie optimiere ich Inhalte für KI-Suche?

Welche Vorteile bietet GAIO gegenüber klassischem SEO?

Wie unterscheidet sich KI-SEO von technischem SEO?

Welche Tools helfen bei der GAIO-Optimierung?

Welche Inhalte eignen sich besonders für die KI-Optimierung?

Wie messe ich den Erfolg von GAIO und GEO?

Lohnt sich KI-SEO für jedes Unternehmen?

Welche Fehler sollte ich bei der GEO-Optimierung vermeiden?

Werk 8 ist eine Full-Service-Digitalagentur in der Nähe von Stuttgart. Wir entwickeln digitale Lösungen, die Nutzer*innen begeistern, Marken stärken und Emotionen wecken. In unseren Projekten vereinen wir strategische Beratung, Kreativität, technologische Expertise, Content Creation und den Einsatz Künstlicher Intelligenz (KI).

Ab Mitte 2025 sind barrierefreie Webseiten in Deutschland durch das BFSG gesetzlich vorgeschrieben. Da sich viele Menschen noch nicht viel darunter vorstellen können, wie moderne, barrierefreie Webseiten aussehen, haben wir hier unsere Top Beispiele für barrierefreie Webseiten zusammengestellt. 

Top Beispiele für barrierefreie Webseiten

Entdecken Sie unsere Top Beispiele für barrierefreie Webseiten. Erfahren Sie, wie modernes Webdesign inklusiv gestaltet werden kann und gesetzliche Vorgaben erfüllt.

Barrierefreie Webseiten haben in Deutschland oft noch einen faden Beigeschmack. Viele Menschen stellen sich darunter eine triste, graue Website mit riesigen Texten und möglichst wenig Bildern vor. Das muss nicht sein, denn die offiziellen Richtlinien für barrierefreie Webseiten (engl. Web Content Accessibility Guidelines, kurz WCAG) geben Unternehmen und öffentlichen Stellen genügend Möglichkeiten, authentische, moderne und gleichzeitig barrierefreie Webseiten zu entwickeln. 

Im Folgenden stellen wir vier unserer besten Beispiele für barrierefreie Webseiten vor, die von allen Menschen ohne größere Schwierigkeiten und ohne fremde Hilfe genutzt werden können.

Das riesige US-Tech-Unternehmen aus den USA macht in Sachen digitaler Barrierefreiheit bereits vieles richtig. Neben einer barrierefreien Website und einem barrierefreien Online-Shop integriert Apple jährlich neue Funktionen in seine Geräte, um eine barrierefreie Nutzung zu gewährleisten.

So verfügen alle iPhones und MacBooks über eine integrierte VoiceOver-Funktion, mit der Sie sich Texte auf dem Bildschirm oder Ihre Texteingaben vorlesen lassen können. Wie Sie diese Funktion auf Ihrem iPhone aktivieren, erfahren Sie im folgenden Artikel von Apple: iPhone Benutzerhandbuch

Darüber hinaus können Apple Geräte die Schriftgröße bestimmter Apps dynamisch anpassen, sich Kontrast-Einstellungen merken oder das Smartphone von der Sprachassistentin Siri steuern lassen.

Eine Übersicht über alle Funktionen, die Apple in seinen Geräten für eine barrierefreie Nutzung integriert hat, finden Sie im folgenden Artikel: Apple Accessibility

Mit unserem Accessibility Audit analysieren wir Ihre Website umfassend auf digitale Barrieren und geben konkrete Handlungsempfehlungen.

Auch Ihre Website soll barrierefrei werden?

Mehr über den Accessibility Check erfahren

Wise, ehemals TransferWise, ist ein britisches FinTech-Unternehmen, das sich auf internationale Geldtransfers spezialisiert hat und schnelle Überweisungen in verschiedene Währungen anbietet.

Im vergangenen Jahr hat Wise sein neues Rebranding veröffentlicht und dabei ein barrierefreies und inklusives Design-System entwickelt, das für alle zugänglich und gleichzeitig visuell ansprechend ist. Ein zentrales Element des neuen Markenauftritts ist die komplett neu gestaltete Farbpalette, die für alle Menschen gut wahrnehmbar ist und alle Kontrast-Richtlinien der Web Content Accessibility Guidelines (WCAG) berücksichtigt.

Diese besagen, dass große Texte wie etwas Überschriften und interaktive grafische Elemente mindestens ein Kontrastverhältnis von 3:1 zwischen Vorder- und Hintergrundfarbe aufweisen müssen, damit auch Menschen mit Behinderungen Texte und Bilder auf der Webseite wahrnehmen können. 

Während des gesamten Reranding-Prozesses wurde die Farbpalette immer wieder mit Tools wie Contrast Checker (von WebAIM) oder dem Figma Plugin Color Blind Simulator getestet. Darüber hinaus wurde bereits in der Konzeptionsphase viel Empathie für alle Zielgruppen entwickelt, um deren Wünsche und Bedürfnisse zu verstehen und ein inklusives Webdesign zu entwickeln.

Den vollständigen Artikel von Wise zum Rebranding-Prozess finden Sie hier. Einen Überblick über das neue Branding finden Sie auf der Landingpage der Designabteilung von Wise.

Anlässlich des 75. Geburtstag hat Porsche letztes Jahr neben seinem ikonischen Wappen auch die Webseite und den Onlineshop modernisiert. Außerdem wurde eine neue Version des Design Systems mit barrierefreien Figma Libraries und ready-to-use Web Components veröffentlicht.

Auf der Startseite der Porsche Webseite hat man nun die Möglichkeit, das Video zu pausieren. Dies minimale Änderung ist ein weiterer Schritt in Richtung digitale Barrierefreiheit. Nach dem internationalen Standard für barrierefreie Webinhalte (Web Content Accessibility Guidelines, kurz WCAG) müssen Nutzer Animationen, die länger als fünf Sekunden dauern, anhalten können. Genauer gesagt müssen Nutzer in der Lage sein, die Website mit allen ihren Elementen zu bedienen, um so viel Kontrolle wie möglich zu haben. Für das Video auf der Porsche Webseite bedeutet dies, dass der Nutzer selbst entscheiden kann, ob das Video weiterlaufen soll oder nicht.

Auch abseits der großen, weltweit bekannten Marken tun Regierungen, Behörden und öffentliche Einrichtungen bereits viel, um digitale Barrieren zu minimieren.

Wenn Sie beispielsweise die Website der Bundesregierung besuchen, werden Ihnen wahrscheinlich Inhalte und Elemente auffallen, die Sie nicht unbedingt auf einer Unternehmenswebsite finden. So gibt es im Header (der Website) zwei Links zu Inhalten in Gebärdensprache und in Leichter Sprache. Darüber hinaus gibt es im Footer weitere Links zur “Erklärung zur Barrierefreiheit” und zum Formular “Barrieren melden”.  

Öffentliche Einrichtungen sind im Gegensatz zu privaten Unternehmen verpflichtet, ihre digitalen Angebote nach den Richtlinien der WCAG und der BITV barrierefrei zu gestalten. Die BITV definiert neben den internationalen Richtlinien zur Barrierefreiheit weitere Anforderungen, die bei der Gestaltung digitaler Inhalte zu beachten sind. So müssen beispielsweise Inhalte in leichter Sprache auch für Menschen mit kognitiven Einschränkungen lesbar sein.

Für öffentliche Stellen gelten daher strengere Regeln, da sie sicherstellen müssen, dass Webinhalte von allen Menschen ohne größere Schwierigkeiten und ohne fremde Hilfe gelesen werden können.

Barrierefreiheit schafft digitale Teilhabe. Lassen Sie uns gemeinsam Ihre Website verbessern und für mehr Nutzer zugänglich machen.

Gemeinsam Barrieren abbauen

Was genau bedeutet digitale Barrierefreiheit?

Ist digitale Barrierefreiheit gesetzlich vorgeschrieben?

Was gehört alles zur digitalen Barrierefreiheit?

Welche Arten von digitalen Barrieren gibt es?

Was sind die vier Dimensionen von Barrierefreiheit?

Was ist die Richtlinie zur Barrierefreiheit im Internet?

Was ist die so genannte 20%-Regel für Barrierefreiheit?

Welche DIN-Normen gelten für die digitale Barrierefreiheit?

Gibt es konkrete Beispiele für digitale Barrierefreiheit?

In einer zunehmend digitalisierten Welt wird der Einsatz von Inclusive Design immer wichtiger. Zukünftig müssen alle Nutzerbedürfnisse in die Entwicklung von Websites einfließen, um möglichst viele Facetten und Perspektiven der Gesellschaft zu berücksichtigen. Andernfalls riskieren Unternehmen, Nutzer ungewollt auszuschließen und damit entscheidende Innovations- und Conversion Vorteile zu verschenken.

Inclusive Design minimiert digitale Barrieren und steigert das Nutzererlebnis

Erfahren Sie, wie Inclusive Design digitale Barrieren minimiert und das Nutzererlebnis verbessert.

Inclusive Design

Inclusive Design beschreibt die Praxis, bei der Gestaltung von Websites und anderen Webanwendungen bewusst die Bedürfnisse der Nutzerinnen und Nutzer einzubeziehen, um alle Facetten und Perspektiven der Gesellschaft zu berücksichtigen. Ziel ist es, digitale Produkte zu schaffen, die physisch, kognitiv und emotional für alle geeignet sind, um eine umfassende und zugängliche User Experience zu gewährleisten.

Inclusive Design hilft Unternehmen, digitale Innovation zu fördern, barrierefreie Websites zu entwickeln und so ihren Kundenkreis zu erweitern. Inklusion ist daher eine zwingende Notwendigkeit und keine optionale Ergänzung.

Um Inclusive Design in der Praxis anzuwenden, muss bei der Entwicklung von Websites der Schwerpunkt auf die Nutzungssituation und nicht auf die Nutzertypen gelegt werden. Das bedeutet, dass bei der Entwicklung in erster Linie die Frage beantwortet werden muss, welche Aufgabe die Website in einer bestimmten Situation für den Nutzer erfüllen kann, und nicht, welche Funktionen für welche Nutzergruppen erforderlich sind.

Ziel des Inclusive Design ist es, Barrieren im (Web-) Design durch die Akzeptanz und Anerkennung von Vielfalt und Diversität abzubauen, um so digitale Barrieren zu minimieren und die Inklusion zu fördern.

Ein zentraler Aspekt ist das Erkennen von Ausgrenzung (Exklusion). Vorurteile und Ausschlüsse, die durch Diskrepanzen zwischen Menschen und ihren Erfahrungen entstehen, müssen bewusst wahrgenommen und adressiert werden.

Ein weiterer wichtiger Aspekt ist das Lernen aus der Vielfalt. Menschen mit unterschiedlichen Hintergründen und Perspektiven müssen in den Designprozess einbezogen werden, um tiefe, authentische Einblicke zu erhalten, die nachhaltig zu einer inklusiven (barrierefreien) Lösung führen.

Der letzte Aspekt ist die Ausweitung der Designlösung auf viele Nutzergruppen. Webanwendungen, die speziell für Menschen mit dauerhaften Behinderungen entwickelt wurden, bieten oft auch anderen Nutzern einen erheblichen Mehrwert.

Bis Juni 2025 wird Barrierefreie und Inclusive Design durch den European Accessibility Act (EAA) für alle Website-Betreiber gesetzlich verpflichtend. In Deutschland gibt es bereits zahlreiche gesetzliche Vorgaben, die die Barrierefreiheit von Websites und anderen digitalen Webanwendungen regeln.

Grundgesetz (GG) – Verbot der Diskriminierung aufgrund einer Behinderung (Art. 3, Abs. 3)

Behindertengleichstellungsgesetz (BGG) – Definiert Barrierefreiheit als Auffindbarkeit, Zugänglichkeit und Nutzbarkeit ohne besondere Erschwernis

Europäische Norm 301 549 – Internationale Standards für Barrierefreiheit, basierend auf den Web Content Accessibility Guidelines (WCAG)

Barrierefreie-Informationstechnik-Verordnung (BITV) – Vorschriften für öffentliche und ab 2025 auch für private Websites und Apps

Inclusive Design bietet Unternehmen viele Vorteile:

Erweiterung der Nutzergruppen – Durch die Umsetzung von barrierefreiem Webdesign können Unternehmen eine breitere Zielgruppe ansprechen. In Deutschland leben etwa 9,5% der Bevölkerung mit einer Schwerbehinderung, weltweit sind es rund 15%. Darüber hinaus profitieren auch Menschen mit temporären oder situativen Einschränkungen von barrierefreien Angeboten.

Kosteneffizienz – Es ist kostengünstiger, Barrierefreiheit von Anfang an in die Websiteentwicklung einzubinden. Nachträgliche Anpassungen sind oft aufwändig und teuer. Ein barrierefreies Webdesign und eine intuitive Navigationsstruktur sparen langfristig Zeit und Geld.

Stärkung der Markenwahrnehmung – Unternehmen, die sich für Barrierefreiheit einsetzen, stärken ihre Marke und zeigen soziale Verantwortung. Dies wird von den Nutzern zunehmend honoriert, da viele ihr Kaufverhalten von der gesellschaftspolitischen Einstellung einer Marke abhängig machen.

Verbesserte Google Ranking – Barrierefreie Websites sind oft besser für Suchmaschinen optimiert. Gut strukturierte Inhalte, korrekte HTML-Auszeichnungen und Alternativtexte für Bilder werden von Suchmaschinen-Crawlern besser erfasst, was zu einer höheren Sichtbarkeit in den Suchergebnissen führt.

Inclusive Design ist mehr als nur eine gesetzliche Pflicht. Es ist eine Chance für Unternehmen, ihre Zielgruppe zu erweitern, Kosten zu sparen und ihre Markenwahrnehmung zu verbessern. Unternehmen sollten Barrierefreiheit als integralen Bestandteil ihrer digitalen Strategie betrachten und aktiv daran arbeiten, ihre Website für alle zugänglich zu machen.

Werk 8 entwickelt digitale Lösungen für die Welt von morgen. Die unabhängige Digitalagentur aus Ludwigsburg entwickelt performante und barrierefreie Websites, Onlineshops und andere digitale Erlebnisse. Zu den Kunden zählen unter anderem die Stuttgarter Kickers, cellcentric (ein Joint Venture von Daimler Truck und der Volvo Group), die Hochschule der Medien, das CJD Christliches Jugenddorfwerk Deutschlands, DIEDA und die Hallesche Krankenversicherung. Aktuelles von Werk 8 auch auf LinkedIn und Instagram.

Inklusivität

Barrierefreiheit

Inklusives Design vs. Barrierefreiheit

WCAG

BITV 2.0

Finden Sie heraus, welche gesetzlichen Anforderungen bis Mitte 2025 für barrierefreie Websites umgesetzt sein müssen.

Barrierefreie Websites

Hier finden Sie die gesetzlichen Bestimmungen und Richtlinien, die Sie für eine barrierefreie Website ab Juni 2025 einhalten müssen.

Barrierefreie Websites bis 2025

Die Barrierefreiheit stellt sicher, dass alle Menschen eine Website uneingeschränkt nutzen können. Um Barrierefreiheit zu gewährleisten, muss jeder Mensch eine Website verstehen, bedienen und mit ihr interagieren können. 

Allein in Deutschland leben fast 12 Millionen Menschen mit Behinderungen. Das sind fast 15 Prozent der deutschen Bevölkerung. Die Zahl der Menschen mit Behinderungen steigt mit zunehmendem Alter. Damit wächst auch die Zahl der Menschen, die darauf angewiesen sind, zum Beispiel ihr Online-Banking nur mit der Tastatur bedienen zu können oder die Schriftgröße auf Webseiten zu verändern.

Seit 2018 gibt es die “Vier Prinzipien der Barrierefreiheit” (engl. POUR Principles of Accessibility), die als internationaler Standard für barrierefreie Webinhalte (engl. Web Content Accessibility Guidelines, kurz WCAG) gelten. Erfüllt eine Website alle vier Prinzipien, können Menschen mit Behinderungen die Inhalte ohne größere Schwierigkeiten und grundsätzlich ohne fremde Hilfe nutzen. 

Wahrnehmbar (Perceivable) – Inhalte müssen so präsentiert werden, dass sie für die Nutzer wahrnehmbar sind. Das bedeutet, dass Inhalte mit ausreichendem Farbkontrast veröffentlicht werden und Bilder mit entsprechenden Alternativtexten (alt-Text) versehen werden. 

Bedienbar (Operable) – Nutzer müssen in der Lage sein, die Website mit all ihren Navigationselementen bedienen zu können, zum Beispiel über die Tastatur oder gut erkennbare Links.

Verständlich (Understandable) – Informationen und Bedienelemente müssen klar und verständlich sein. Das bedeutet, dass die Nutzer in der Lage sein müssen, sowohl die Informationen als auch die Bedienung mithilfe einfacher Sprache oder einer konsistenten Navigation zu verstehen. 

Robust – Inhalte müssen robust genug sein, dass die Nutzer jederzeit in der Lage sind, mit verschiedenen Techniken und Assistenten zuverlässig auf die Inhalte zuzugreifen. Das bedeutet, dass Inhalte auch dann zugänglich bleiben müssen, wenn sich die Technik und die Websuche weiterentwickeln.

Gesetzliche Grundlage zur digitalen Barrierefreiheit

Ab Mitte 2025 werden barrierefreie Websites durch das Barrierefreiheitsstärkungsgesetz (BFSG) gesetzlich vorgeschrieben. Das Gesetz schreibt vor, digitale Angebote barrierefrei zu gestalten. Die gesetzliche Verpflichtung zur Barrierefreiheit gilt für alle Unternehmen mit mehr als zehn Mitarbeitern oder einem Jahresumsatz von mehr als zwei Millionen Euro. Private und rein gewerbliche Anbieter digitaler Dienste (B2B, Business to Business) fallen nicht unter das Barrierefreiheitsgesetz. 

Verstößt ein Unternehmen gegen das Barrierefreiheitsstärkungsgesetz, drohen empfindliche Strafen mit Bußgeldern von mehreren tausend Euro. Was Unternehmen droht, die keine barrierefreie Website betreiben, zeigt ein Blick in die USA. Dort ist digitale Barrierefreiheit durch den “Americans with Disability Act” schon lange vorgeschrieben und gehört zum Alltag. So musste die Supermarktkette Target nach einem Bericht des Handelsblatts zwölf Millionen Dollar Strafe zahlen, weil ihre Website nicht vollständig barrierefrei war. Auch die Lieferkette Domino’s Pizza wurde verklagt, weil sehbehinderte Menschen online keine Pizza bestellen konnten.  

Wie Unternehmen ihre Website barrierefrei machen

Unternehmen können ihre Website barrierefrei machen, wenn sie die “Vier Prinzipien der Barrierefreiheit” von den Web Content Accessibility Guidelines (WCAG) umsetzen. Das bedeutet zum Beispiel, dass 

Menschen mit Sehbehinderungen Texte und Formularfelder auf der Website durch ausreichenden Farbkontrast zum Hintergrund erkennen können 

gehörlose und schwerhörige Menschen Videos nutzen können, wenn diese mit Untertiteln versehen sind

Blinde Menschen können die Website nutzen, indem Bilder, Formulare und Schaltflächen textlich beschrieben werden. 

Für das BFSG regelt die Norm EN 301549 die Barrierefreiheit von Websites. Die Norm stellt sicher, dass digitale Angebote im Sinne des European Accessibility Act (EAA) barrierefrei sind. Neben den technischen Änderungen müssen Unternehmen auch eine “Erklärung zur Barrierefreiheit" und ein Kontaktformular zur Meldung von digitalen Barrieren veröffentlichen.

Der wohl umfassendste Test zur Barrierefreiheit in Deutschland ist der BITV-Test  der Initiative BIK (“Barrierefrei informieren und kommunizieren”). Der Test prüft alle Anforderungen, die in der BITV 2.0 definiert sind. Parallel dazu gibt es den WCAG-Test, der aber weitgehend alle Anforderungen abdeckt, die auch im BITV-Test geprüft werden.

Da die offiziellen Tests sehr aufwändig und kostenintensiv sind, empfiehlt es sich, für eine erste Einschätzung der Barrierefreiheit auf kostenlose Tools und Schnelltests zurückzugreifen. Im Folgenden sind die bekanntesten Tools zum Testen digitaler Barrieren aufgeführt.

Die Web Accessibility Initiative (WAI) bietet eine umfassende Liste verschiedener Werkzeuge, mit denen die Barrierefreiheit von Webseiten getestet werden kann. Bitte beachten Sie, dass keines dieser Tools einen offiziellen Test oder eine andere Qualitätskontrolle ersetzen kann.

Was ist der European Accessibility Act (EAA)?

Was regelt die Norm EN 301 549?

Was ist das Barrierefreiheitsstärkungsgesetz?

Was ist die Barrierefreie-Informationstechnik-Verordnung (BITV)?

In der digitalen Welt wird Barrierefreiheit immer wichtiger – nicht nur, um gesetzlichen Anforderungen zu entsprechen, sondern auch, um sicherzustellen, dass alle Nutzerinnen und Nutzer Zugang zu den Inhalten und Funktionen einer Website haben. Barrierefreies Webdesign zielt darauf ab, digitale Inhalte für Menschen mit Behinderungen zugänglich zu machen und dadurch die User Experience für alle zu verbessern. 

Der folgende Artikel gibt einen Überblick über die wichtigsten Grundlagen der digitalen Barrierefreiheit bei der Entwicklung einer Website oder einer digitalen Plattform. 

Barrierefreies Webdesign: Die wichtigsten Grundlagen

Lernen Sie die Grundprinzipien des barrierefreien Webdesigns kennen, um die Website für alle Benutzer zugänglich zu machen.

Grundlagen des barrierefreien Webdesigns

Inclusive Design basiert auf sieben Grundprinzipien, die sicherstellen, dass bei der Entwicklung von Websites und digitalen Lösungen die Bedürfnisse aller Nutzergruppen berücksichtigt werden. Die Prinzipien dienen Unternehmen und Agenturen als Grundlage, um Barrierefreiheit von Anfang an in den Design- und Entwicklungsprozess zu integrieren.

Vergleichbare Erfahrungen schaffen – alle Nutzer sollten unabhängig von ihren Fähigkeiten Zugang zu den gleichen Inhalten haben.

Die Situation berücksichtigen – passe das Webdesign an verschiedene Nutzungskontexte an, zum Beispiel bei Sonnenschein oder in einer lauten Umgebung.

Konsistent sein – ein konsistentes Design System verwenden, das auf allen Unterseiten gleich funktioniert.

Nutzern die Kontrolle geben –bieten Sie die Möglichkeit, Animationen zu pausieren, zu zoomen und die Darstellung anzupassen, um den Benutzern die Kontrolle über die Interaktion zu geben.

Wahlmöglichkeiten anbieten – Bieten Sie verschiedene Optionen an, um Aufgaben zu erledigen, zum Beispiel die Wahl zwischen einer Gitter- und einer Listenansicht.

Prioritäten setzen – verwenden Sie klare Hierarchien und vermeiden Sie Überfrachtung. Alle Inhalte und Funktionen sollten jederzeit leicht zugänglich sein. 

Mehrwert schaffen – vielfältige Interaktionsmöglichkeiten wie Geolokalisierung, Sprachsteuerung und Touchbedienung integrieren.

Ein wichtiger Aspekt im barrierefreien Webdesign ist die Wahl der Farben. Die Barrierefreiheit von Farben hängt nicht von der Farbe selbst, sondern vom Kontrastverhältnis zwischen den Farben ab. Laut den WCAG Standards (Web Content Accessibility Guidelines) müssen Texte ein Kontrastverhältnis von mindestens 4,5:1 aufweisen, während für interaktive Elemente wie Buttons ein Verhältnis von 3:1 empfohlen wird. Weitere Informationen zu barrierefreie Farben findest du in dem folgenden Artikel: Wie du barrierefreie Farben wählst

Die Wahl der richtigen Schriftart ist ein entscheidender Faktor für barrierefreies Webdesign. Barrierefreie Schriftarten sind zwar in den WCAG-Standards nicht vorgeschrieben, tragen aber wesentlich zur Lesbarkeit und zur Benutzerfreundlichkeit bei. Besonders hilfreich sind serifenlose Schriften und Schriften mit klar unterscheidbaren Zeichen (zum Beispiel großes „I“ und kleines „l“).

Lange Absätze und Textpassagen vermeiden

Überschriften und lange Sätze nicht in Versalien (Großbuchstaben) setzen

Texte nicht zentriert oder in Blocksatz setzen

Verwenden Sie serifenlose, serifenbetonte oder monospaced Schriften, um die Lesbarkeit deutlich zu erhöhen. 

Eine Monospaced-Schrift ist eine Schrift, bei der alle Zwischenräume gleich groß sind. Das bedeutet, dass alle Buchstaben und Zeichen den gleichen horizontalen Raum einnehmen und die gleiche Breite haben.

Bilder, Icons und Illustrationen sollten ebenfalls barrierefrei gestaltet sein. Dazu gehört nicht nur ein ausreichender Farbkontrast von 3:1, sondern auch eine sinnvolle Beschriftung der Icons. Icons sollten mindestens 24 x 24 Pixel groß sein, damit sie gut erkannt und angeklickt werden können. Darüber hinaus ist es wichtig, Bilder mit einem Alt-Text zu versehen, der den Inhalt des Bildes beschreibt, und keine Texte auf Bildern zu platzieren, da diese für Screenreader nicht zugänglich sind.

Animationen können das Nutzererlebnis verbessern, sie bergen jedoch auch Risiken in Bezug auf Barrierefreiheit. Besonders wichtig ist, dass Animationen  dezent und unterstützend wirken, ohne abzulenken oder gesundheitliche Probleme zu verursachen. Die WCAG Standards empfehlen, Animationen auf maximal 5 Sekunden zu begrenzen und blinkende Elemente zu vermeiden, die mehr als dreimal pro Sekunde aufleuchten. Darüber hinaus sollte es bei animierten Elementen immer eine Option zum Pausieren geben.

Fazit zu den Grundlagen von barrierefreiem Webdesign

Barrierefreie Websites sind mehr als nur eine rechtliche Anforderung. Sie bieten Unternehmen die Möglichkeit, eine breitere Zielgruppe anzusprechen, die Reichweite der Website zu erhöhen und die User Experience zu verbessern. Als Experten unterstützen wir Sie gerne bei der Konzeption und Entwicklung Ihrer Website und helfen Ihnen, die WCAG Standards zu erfüllen.

Fast jede zeitgemäße Website und jeder moderne Onlineshop folgt dem MACH-Prinzip. Eine Software-Architektur, die auf dem Konzept von Microservices, API-first, Cloud-native, Headless aufgebaut ist. MACH ist der Schlüssel für eine moderne, zukunftssichere und flexible Website- und Plattformentwicklung. Das Prinzip ermöglicht es, individuelle und nahtlose digitale Erlebnisse zu gestalten und über verschiedene Kanäle hinweg bereitzustellen.

MACH – das Prinzip moderner Website Architektur

MACH-Architektur: Microservices, API-first, Cloud-native, Headless – für flexible, skalierbare und kanalübergreifende digitale Erlebnisse der Zukunft.

MACH-Prinzip – Moderne Architektur für Websites

Wie bereits erwähnt ist MACH ein moderner Architekturansatz, der auf vier zentralen Prinzipien basiert: Microservices, API-first, Cloud-native und Headless. Das Konzept wurde entwickelt, um die Herausforderungen der digitalen Transformation zu meistern und ermöglicht es Unternehmen, hochgradig anpassbare und skalierbare digitale Erlebnisse zu schaffen.

Microservices – Microservices sind unabhängige, modulare Komponenten, die spezifische Geschäftsfunktionen erfüllen. Sie werden separat entwickelt und können individuell kombiniert werden, was ein Höchstmaß an Funktionalität und Flexibilität bietet.

API-first – APIs (Application Programming Interfaces) stehen im Mittelpunkt der MACH-Architektur. Sie ermöglichen die nahtlose Integration verschiedener Module, unabhängig davon, ob sie vom selben Anbieter stammen oder nicht und machen das System somit flexibel und erweiterbar.

Cloud-native – Cloud-native bedeutet, dass alle Anwendungen und Dienste in der Cloud ausgeführt werden. Dies garantiert Aktualität, Skalierbarkeit und eine hohe Betriebssicherheit, während gleichzeitig der Bedarf an eigener IT-Infrastruktur minimiert wird.

Headless – Headless trennt das Frontend (die Darstellung) vom Backend (dem Inhalt). Dies ermöglicht eine flexible Verteilung von Inhalten über mehrere Kanäle, ohne an ein spezifisches Frontend gebunden zu sein.

Das MACH-Prinzip entstand aus der Notwendigkeit, digitale Erlebnisse über mehrere Plattformen hinweg flexibel und effizient bereitzustellen. In einer Welt, in der Nutzer verschiedene Geräte und Kanäle verwenden, um auf Inhalte zuzugreifen, müssen Unternehmen ihre digitale Architektur anpassen, um relevante und personalisierte Erlebnisse bieten zu können.

Traditionelle monolithische Systeme stoßen in dieser komplexen Umgebung schnell an ihre Grenzen. Sie bieten oft nicht die notwendige Flexibilität und Skalierbarkeit, um auf die dynamischen Anforderungen des Marktes reagieren zu können. Hier setzt MACH an, indem es eine modulare und entkoppelte Architektur ermöglicht, die sich einfach an neue Anforderungen anpassen lässt.

Werk 8 Blog

MCP: Der neue Standard für KI-Tools

SEO in Zeiten von ChatGPT, Perplexity und Co.

Top Beispiele für barrierefreie Webseiten

Inclusive Design minimiert digitale Barrieren und steigert das Nutzererlebnis

Barrierefreie Websites

Barrierefreies Webdesign: Die wichtigsten Grundlagen

MACH – das Prinzip moderner Website Architektur

Leichte und einfache Sprache: Was ist der Unterschied

In drei Schritten zur perfekten Customer Experience Strategie

Headless CMS vs. traditionelles CMS: Unterschiede, Vorteile und Beispiele

Der entscheidende Unterschied für Ihren digitalen Erfolg

Headless CMS erklärt

Die Nutzung von Algolia verbessert die User Experience