Barrierefreies Webdesign: So wird deine Website rechtskonform

Barrierefreiheit im Web wird 2025 Pflicht für Websites, Onlineshops und digitale Anwendungen, über die Produkte oder Dienstleistungen angeboten werden – doch wie setzt du barrierefreies Webdesign effizient um?

Hendrik Hohenstein UI Designer Stephanie Wölke Lead UX Design
01.10.2024 8 min Lesezeit

Inhalt

  1. In aller Kürze
  2. Was bedeutet barrierefreies Webdesign?
  3. Welche Anforderungen musst du erfüllen?
  4. Website barrierefrei gestalten: Wie?
  5. Online-Tools für automatisierte Checks
  6. Wichtige A11y-Checklisten
  7. Wichtige Fragen und Antworten

In aller Kürze: Barrierefreies Webdesign

  • Gleichberechtigter Zugriff auf alle Inhalte gewährleisten
  • Ab 28. Juni 2025 wird Barrierefreiheit gesetzlich vorgeschrieben
  • Kernanforderungen sind WCAG Level AA / BITV 2.0
  • Checks mit Accessibility-Tools allein sind nicht ausreichend
  • Von (A)udit bis (Z)ertifizierung begleiten wir unsere Kundinnen und Kunden

Eine Chance für Inklusion – und wirtschaftlichen Erfolg

Wusstest du, dass weltweit über über 15 % der Bevölkerung von einer Form der Behinderung betroffen sind? Diese Menschen stoßen im digitalen Raum oft auf Barrieren, die sie von wichtigen Informationen und Dienstleistungen ausschließen. Ab dem 28. Juni 2025 riskierst du nicht nur Bußgelder, wenn deine Website nicht barrierefrei ist, sondern auch den Verlust von Millionen potenzieller Kunden. Doch es geht um mehr als nur gesetzliche Vorgaben: Es geht darum, deine digitale Präsenz für alle zugänglich zu machen – und damit einen Beitrag zu einer inklusiveren Gesellschaft zu leisten.

Barrierefreies Webdesign ist deine Chance, Verantwortung zu zeigen, dein Unternehmensimage zu stärken und gleichzeitig neue Märkte zu erschließen. Wir zeigen dir in diesem Artikel, was du beachten musst.

Was ist eigentlich barrierefreies Webdesign?

Barrierefreies Webdesign bedeutet, Websites und digitale Anwendungen so zu gestalten, dass sie für alle Menschen zugänglich und nutzbar sind – unabhängig von Einschränkungen wie Neurodivergenz oder Sehbeeinträchtigungen. Das Ziel der barrierefreien Webgestaltung ist es, digitale Inhalte und Funktionen ohne Barrieren bereitzustellen, damit alle Nutzerinnen und Nutzer gleichberechtigt auf Informationen und Angebote zugreifen können.

Barrierefreiheit im Web -
Warum dein Unternehmen nur profitieren kann

Erweiterter Nutzerkreis
Mit barrierefreier Gestaltung erreichst du nicht nur Menschen mit dauerhaften Beeinträchtigungen, sondern auch temporär eingeschränkte Nutzerinnen und Nutzer – das steigert deine Reichweite.

Erhöhte Nutzerfreundlichkeit
Deine Kundinnen und Kunden finden sich schneller zurecht und erreichen ihr Ziel effizienter – unabhängig von ihren Fähigkeiten oder Einschränkungen. Das Ergebnis? Höhere Kundenzufriedenheit und eine stärkere Kundenbindung.

Positives Markenimage
Ein barrierefreies Webdesign zeigt deine soziale Verantwortung und Inklusion, was wiederum die Markentreue stärkt.

Rechtliche Konformität
Ab 2025 ist barrierefreies Webdesign Pflicht. Jetzt ist der Zeitpunkt, um rechtskonform zu handeln, dein Unternehmen für die Zukunft aufzustellen – und um Inklusion voranzubringen.

Welche Anforderungen muss deine Website erfüllen?

Barrierefreiheit ist ein Menschenrecht – und das auch im Web. Unternehmen werden künftig gesetzlich verpflichtet, barrierefreies Webdesign umzusetzen. Das W3C Gremium (World Wide Web Consortium) hat in seinen internationalen WCAG-Richtlinien (Web Content Accessibility Guidelines) vier Grundprinzipien definiert, die deine Unternehmenswebsite erfüllen muss:

1. Wahrnehmbar
Informationen müssen für alle Nutzerinnen und Nutzer wahrnehmbar sein. Grafische Elemente, Videos und Illustrationen sollen daher mit aussagekräftigen Alt-Texten beschrieben werden.

2. Bedienbar
Die Website sollte auch für Nutzergruppen bedienbar sein, die auf Assistive Technology angewiesen sind. Alle Funktionalitäten müssen per Tastatur ansteuerbar sein.

3. Verständlich
Informationen müssen verständlich und die Bedienung intuitiv sein. Unerwartete Ereignisse sollen beim barrierefreien Webdesign vermieden werden.

4. Robust
Die Website muss technisch einwandfrei funktionieren und den neuesten Standards entsprechen. Alle gängigen Devices und Assistive Technologies müssen sie korrekt interpretieren können.

Die vier Prinzipien gliedern sich in 13 Richtlinien, die wiederum in 78 Erfolgskriterien aufgeteilt sind. Die Umsetzung der rechtlichen Konformität wird anhand dieser Erfolgskriterien bewertet, eingeteilt in drei Konformitätsstufen: A (Mindestmaß), AA und AAA (Höchstmaß). Ab dem 28. Juni 2025 müssen Websites und digitale Anwendungen, die Produkte oder Dienstleistungen anbieten, Level AA erfüllen. Die für den deutschen Raum geltenden BITV 2.0 Richtlinien decken sich übrigens mit dem WCAG Level AA und müssen daher nicht gesondert betrachtet werden.

Prinzipien, Richtlinien und Erfolgskriterien, Einteilung in drei Konformitätsstufen

WCAG-Konformitätsstufen beim barrierefreien Webdesign

Die drei Konformitätsstufen gelten für jeden Baustein, wenn man eine barrierefreie Website erstellt. Wir erklären die Einstufungen anhand von Beispiel-Kriterien bei der Einbindung von Video und Audio.

WCAG-Konformitätsstufen

  • Einfach A – Diese Stufe der Barrierefreiheit deckt den WCAG Standard und somit das Mindestmaß ab.

    Es müssen Untertitel oder ein Transkript hinterlegt sein. Video und Audio Files sowie Animationen und automatische Slider mit Bewegungen über 5 Sekunden müssen anhand einer Pause-Taste steuerbar sein.

  • Doppelt A – Diese Stufe behebt die häufigsten Probleme bei der Barrierefreiheit.

    Sie ist ab 2025 in Europa laut Gesetz für Public Transportation und E-Commerce Websites vorgeschrieben. Zusätzlich zu den Kriterien von Level A muss sichergestellt werden, dass der Kontrast von Fließtext und Bildern zum Hintergrund mindestens 4,5 zu 1 sein soll. Dies betrifft u. a. sowohl einleitende Texte auf der Website als auch Untertitel innerhalb des Videos selbst.

  • Dreifach A – Diese Stufe entspricht dem höchsten Standard.

    Hier gilt zusätzlich zu den Kriterien von Level A und AA, dass die Gebärdensprache in Videos integriert werden muss. Auch Versionen von leichter Sprache müssen zur Verfügung stehen.

Wie kannst du deine Website also barrierefrei machen?

Barrierefreiheit ist eine Teamaufgabe. Bereits bei der Erstellung neuer Seiten integrieren wir Accessibility-Aspekte von Anfang an in die Teams und beziehen dich in diesen Prozess mit ein.

Websites nachträglich barrierefrei machen

Für bereits bestehende Websites empfehlen wir dir die folgenden Schritte, um ein barrierefreies Webdesign zu gewährleisten:

  • 01

    Deviceübergreifender Accessibility Audit

    Durch automatisierte und manuelle Tests identifizieren wir, bei welchen Elementen noch Optimierungsbedarf besteht.

  • 02

    Maßnahmenplan & Empfehlungen

    Auf Basis der Prüfergebnisse erstellen wir einen individuellen Maßnahmenplan mit konkreten Handlungsempfehlungen.

  • 03

    Umsetzung der Optimierungen

    Nachdem wir die Maßnahmen sukzessive umgesetzt haben, empfehlen wir eine Zertifizierung der Barrierefreiheit.

  • 04

    Testing

    Externe Accessibility-Tests mit echten Nutzerinnen und Nutzern sind besonders ab Konformitätsstufe Level AAA wichtig.

Wenn du uns beauftragst, kannst du dich darauf verlassen, dass deine Website alle notwendigen Anforderungen an Barrierefreiheit erfüllt. Solltest du dich dennoch tiefer mit den spezifischen Maßnahmen auseinandersetzen wollen, haben wir im Folgenden einige Best Practices zusammengestellt, auf die du achten solltest, um deine Website barrierefrei zu machen.

Design und Code barrierefrei gestalten?

Dabei unterstützen wir dich gerne. Schreib uns einfach eine kurze Nachricht!

Barrierefreie Websites: Best Practices

Die folgende Liste von Beispielen gibt dir einen Überblick über verschiedene Aspekte, die du berücksichtigen musst, um eine Website barrierefrei zu gestalten:

  • Farben & Kontraste: Verwende ausreichende Farbkontraste und eine Farbpalette, die für Menschen mit Sehschwäche oder Farbblindheit gut erkennbar ist.
  • Definierte States (Zustände): Stelle sicher, dass alle anklickbaren Elemente (wie z. B. Buttons) visuell hervorgehoben werden, wenn sie mit der Tastatur ausgewählt sind (konsistenter Fokusrahmen). So können Nutzerinnen und Nutzer leicht sehen, welches Element gerade aktiv ist, wenn sie die Tastatur zur Steuerung verwenden.
  • Bedienbarkeit: Alle klickbaren Elemente sollten als klickbar zu erkennen sein und über eine ausreichend große Klickfläche verfügen, um einfach angesteuert werden zu können.
  • Audio- & Video-Content: Erstelle Untertitel oder Transkripte, um Inhalte auch Nutzerinnen und Nutzern mit beispielsweise beeinträchtigtem Gehör zugänglich zu machen. Zudem müssen Audios, Videos, Slider und Animationen über eine Pausetaste angehalten werden können.
  • Responsive Design: Inhalte und Elemente sollten sich automatisch der Größe, Ausrichtung und Auflösung der Bildschirme anpassen.
Responsive Design passt Websites für Mobile, Tablet und Desktop dynamisch an.
  • Bilder: Stelle gut erkennbare Bilder in hoher Qualität bereit. Bilder sollten keinen Text enthalten, da dieser nicht für Screenreader und andere Hilfstechnologien zugänglich ist.
  • Fonts: Verwende gut lesbare Schriftarten, die sowohl in großen als auch in kleinen Formaten leicht erkennbar sind.
  • Semantische Struktur & Hierarchie: Klare Strukturen und übersichtliche Layouts mit Überschriften und Listen erleichtern Nutzerinnen und Nutzern die Informationsaufnahme und verbessern die Interpretation von Screenreadern. Zudem wirkt sich dies positiv auf das Google-Ranking aus.
  • Vorhersehbarkeit: Platziere Elemente dort, wo sie erwartet werden und nutze bei ähnlichen Funktionen gleiche Pattern, wie z. B. Animationen und Hover-Effekte. Dadurch wissen die Nutzerinnen und Nutzer jederzeit, was zu erwarten ist.
  • UX-Writing: Verfasse aussagekräftige Linktexte und Alt-Texte für Bilder, Grafiken und Diagrammen in klarer, leicht verständlicher Sprache. Dadurch sind die wichtigsten Informationen allen Menschen zugänglich.

UX-Writing: Audit & Guidelines

  • Screenreader: Achte darauf, ARIA-Labels korrekt zu hinterlegen, damit sich die Elemente von Text-zu-Sprache-Software gut auslesen lassen und dekorative Elemente ausgeblendet werden.
  • Markup: Versehe alle Inhaltstypen mit korrekten semantischen HTML-Elementen, damit Assistive Technologies die Struktur und Bedeutung von Inhalten richtig interpretieren können.
  • Keyboard-Navigation: Alle Funktionen und Elemente sollten per Tastatur anwählbar und auch steuerbar sein, um motorisch oder situationsbedingt eingeschränkten Personen Zugang zu ermöglichen.
  • Ladezeit: Seiten sollten sich schnell aufbauen und möglichst klein sein, damit sie auch bei langsamer Internetverbindung reibungslos nutzbar sind und das Datenvolumen schonen.

Accessibility-Tools: Website testen

Es gibt zahlreiche Online-Tools, um einzelne Elemente oder auch ganze Webseiten auf Barrierefreiheit zu überprüfen. Im Rahmen eines ersten Audits nutzen wir bei Moccu WAVE, um automatisierte Reportings zu erhalten. Diese bieten erste Hinweise zum Status der Barrierefreiheit einer Website, müssen jedoch interpretiert und durch manuelle Tests ergänzt werden.

Kurzanleitung für WAVE

Möchtest du deine Website mit WAVE testen und benötigst Hilfe?
Schau dir hier unsere Kurzanleitung an:

Ein umfassendes Tool zur Verbesserung der Qualität von Websites ist Google Lighthouse, das sich über Chrome-Entwicklertools ausführen lässt. Neben der allgemeinen Leistung und SEO bewertet Lighthouse auch die Barrierefreiheit mit einer Punktzahl.

Um Seiten und Elemente während des Designs direkt zu testen, setzen wir auf Figma-Plugins. Einer unserer Favoriten ist Stark, welcher Schrift-Styles, Touch-Target-Größen und Farbkontraste überprüfen kann. Darüber hinaus verfügt Stark über einen Simulator, um Einschränkungen, wie bspw. Farbblindheiten, nachzuahmen.

Zum Testen der Screenreader-Tauglichkeit von Struktur und Texten gibt es verschiedene Anbieter und Systeme. Bei iOS verwenden wir beispielsweise VoiceOver.

Barrierefreie Website: Checkliste

Online gibt es eine große Anzahl an Accessibility-Checklisten, in denen die Richtlinien der wichtigsten Barrierefreiheits-Kataloge in einer Liste komprimiert zusammengefasst sind. Gute Beispiele hierfür sind unter anderem The A11Y Project, Webflow und The Checklist Voxmedia.

Bei Moccu haben wir für jeden Fachbereich eine eigene Checkliste entwickelt, die unseren Expertinnen und Experten als Leitfaden dient, um sicherzustellen, dass bei der barrierefreien Gestaltung von Websites oder digitalen Anwendungen alle relevanten Aspekte berücksichtigt werden.

Wichtige Fragen und Antworten

Jetzt hast du einen guten Überblick, wie barrierefreies Webdesign aussieht und wie es sich umsetzen lässt. Wir unterstützen dich dabei, Barrierefreiheit für deine Website oder digitale Anwendung zu erreichen und gleichzeitig rechtskonform zu bleiben.

Lass uns gemeinsam Barrieren abbauen – nimm mit uns Kontakt auf!

Stephanie Wölke UX Design Lead

Vielen Dank für Ihre Nachricht

Wir haben Ihre Anfrage erhalten und melden uns umgehend bei Ihnen.

Mehr Insights aus UI, UX und Content

Zurück zur Übersicht Back to Top