<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=683797551780598&amp;ev=PageView&amp;noscript=1">
Skip to content
  • Es gibt keine Vorschläge, da das Suchfeld leer ist.
de
A11Y

Design und Development

Auch beim Design und der Entwicklung von barrierefreien Webseiten gibt es einige Besonderheiten, die zu beachten sind. Eine Übersicht.

A11Y: kostenfreie Erstberatung
design-and-dev-new-bg

Barrierefreiheit von Anfang an mitdenken:

Ein erfolgreicher barrierefreier Webauftritt erfordert, dass Accessibility bereits von Beginn an in Design und Entwicklung integriert wird – nicht erst als nachträgliches Upgrade. Idealerweise fließen alle relevanten Disziplinen zusammen: Konzeption und Design, technische Umsetzung sowie inhaltliche Redaktion. So wird sichergestellt, dass visuelles Erscheinungsbild, Code und Inhalte gleichermaßen zugänglich sind. Diese Verzahnung von Design, Development und Content legt den Grundstein dafür, dass wirklich alle Menschen die Website uneingeschränkt nutzen können. Ab Mitte 2025 ist digitale Barrierefreiheit sogar gesetzlich vorgeschrieben (Stichwort European Accessibility Act und BFSG) – Unternehmen tun also gut daran, jetzt zu handeln.

Barrierefreie Gestaltung: Systematik, Prinzipien und Praxis

Barrierefreies Design beginnt nicht beim Farbkontrast – sondern bei der Systematik. Wer moderne, barrierefreie Webauftritte gestaltet, braucht mehr als ein gutes Auge: Es geht um Designprozesse, Komponentenlogik und eine strukturierte, reproduzierbare Herangehensweise, die Accessibility von Anfang an integriert. Insbesondere bei größeren oder langfristig gepflegten Webprojekten ist ein konsistentes Designsystem das Fundament für barrierefreies UI/UX-Design.

1-nu

Designsysteme: Grundlage für barrierefreies UI

Ein gutes Designsystem besteht aus:

  • Komponentenbibliothek: Buttons, Formularelemente, Navigationsmodule, Modale usw. – alle als wiederverwendbare, dokumentierte Elemente.
  • Style-Definitionen: Farben, Typografie, Abstände, Kontraste – abgestimmt auf Accessibility-Kriterien.
  • Zustandsdefinitionen: Fokus, Hover, Disabled, Error – visuell klar unterscheidbar und tastaturfreundlich.
  • Dokumentation & Guidelines: Barrierefreie Nutzungsregeln (z. B. Kontrastvorgaben, Mindestgrößen, Fokusverhalten) sind integraler Bestandteil des Systems.

So wird Accessibility nicht zur Nachbesserung, sondern zum eingebauten Standard – für Designerinnen wie Entwicklerinnen.

Praxis-Tipp: Tools wie Figma lassen sich gezielt für barrierefreie Designsysteme nutzen, inklusive Plugins zur Kontrastprüfung und Fokusvisualisierung. Design Tokens helfen, semantische Farbdefinitionen zu standardisieren („Primary-Focus“, „Error-Border“) statt harte HEX-Codes zu verwenden.

2-nu

Inclusive Design in der visuellen Gestaltung

Designsystem oder nicht – die grundlegenden Prinzipien inklusiven Designs bleiben gleich:

  • Farben und Kontraste: Farbpaletten müssen WCAG-konform sein (mindestens 4.5:1 für normalen Text). Wichtig: Der Kontrast muss auch bei verschiedenen Zuständen erhalten bleiben (z. B. Hover-Farbe vs. Hintergrund).
  • Typografie: Schriftgrößen sollten skalierbar sein (z. B. in rem statt px), Lesbarkeit muss bei Vergrößerung erhalten bleiben. Zeilenabstände und Textblockbreite sollten ebenfalls barrierearm gestaltet sein.
  • Layout & visuelle Hierarchie: Logische Gliederung, klare Trennung von Inhalten, ausreichend Weißraum – nicht nur für die Ästhetik, sondern auch zur kognitiven Entlastung.
  • Navigation & Orientierung: Wiedererkennbare Positionierung von Menü, Logo, Footer etc. unterstützt das „muscle memory“ bei wiederholter Nutzung – besonders relevant für Menschen mit kognitiven Einschränkungen.

3-nu

Interaktive Komponenten: visuelles und funktionales Feedback

Barrierefreies UI-Design denkt jede Interaktion mit:

  • Fokus-Indikatoren: Muss klar erkennbar sein, wo sich der Tastaturfokus gerade befindet.
  • Zustände: Buttons müssen in normal, hover, focus, disabled und active unterscheidbar sein – visuell, nicht nur per Farbe.

Zugänglichkeit von Dropdowns, Accordions, Modals: Diese Elemente erfordern im Design bereits eine durchdachte Interaktionsführung. Z. B.: Wie verlässt man ein Modal per Tastatur? Wohin geht der Fokus danach?

Prozess-Tipp: Accessibility sollte in jedem Design Review ein explizites Prüfkriterium sein. Checklisten, Kontrasttests und Nutzerfeedback sind fester Bestandteil des Designprozesses – nicht Add-on.

Barrierefreie Entwicklung: Technische Umsetzung nach Standards

Während das Design die Struktur und Konsistenz vorgibt, entscheidet die Frontend-Entwicklung letztlich darüber, ob eine Website tatsächlich barrierefrei ist. Viele Anforderungen spielen sich im HTML-Code und der Programmierung ab. Wichtig sind unter anderem:

Semantisches HTML & Struktur:

Nutzen Sie HTML-Tags entsprechend ihrer Bedeutung (z. B. <nav>, <main>, <footer>, Überschriften <h1>–<h6> in logischer Reihenfolge). Eine sinnvolle semantische Struktur ermöglicht assistiven Technologien wie Screenreadern, die Seite korrekt zu interpretieren. Gruppenbildung in Code (z. B. Container, Listen, Landmark-Roles) sollte der visuellen Struktur folgen – idealerweise in enger Abstimmung mit dem Designsystem.

Formulare und Bedienelemente:

Entwickeln Sie Formulare mit zugehörigen <label>-Elementen, setzen Sie <fieldset> und <legend> sinnvoll ein und achten Sie auf sprechende Platzhalter, Hilfetexte und Fehlermeldungen. Alle Zustände sollten visuell und programmatisch erkennbar sein – im Design wie im Code.

Tastaturbedienbarkeit & Fokushandling:

Entwickeln Sie nach dem Prinzip keyboard-first. Alles, was klickbar ist, muss auch ohne Maus bedienbar sein. Der Tastaturfokus sollte sich sinnvoll bewegen und in interaktiven Komponenten korrekt gesetzt und zurückgegeben werden.

ARIA und JavaScript:

ARIA-Rollen und States (wie aria-expanded, aria-live, role="alert") helfen dort, wo HTML allein nicht reicht. Wichtig: Nur einsetzen, wenn deren Wirkung klar ist und sie mit dem restlichen DOM und dem Designsystem harmonieren.

Performance & Kompatibilität:

Ein zugänglicher Code ist nicht nur semantisch, sondern auch performant. Geringe Ladezeiten, Browserkompatibilität und robuste Komponenten-Logik zahlen auf barrierefreie Nutzung ein – besonders für Nutzer mit älteren Geräten oder assistiven Technologien.

Achtung: Designsysteme müssen auch im Frontend konsistent umgesetzt werden. Eine perfekte Figma-Bibliothek nützt nichts, wenn sie im Code nicht korrekt übertragen wird.

Inhalte und Medien: Barrierefreie Content-Erstellung

Eine barrierefreie Website steht und fällt mit ihren Inhalten. Selbst ein perfektes Designsystem und eine saubere technische Umsetzung nützen wenig, wenn Texte unverständlich sind oder Bilder und Videos nicht zugänglich aufbereitet wurden. Zentrale Maßnahmen für barrierefreien Content sind u. a.:

Texte in verständlicher Sprache:

Formulieren Sie einfach, klar, strukturiert. Vermeiden Sie Jargon, erklären Sie Fachbegriffe. Verwenden Sie Überschriften sinnvoll – nicht der Optik wegen, sondern zur Orientierung.

Alternativtexte für Grafiken:

Alle sinntragenden Bilder benötigen ein sinnvolles alt-Attribut. Logos, Buttons, Icons – alles, was Bedeutung hat, muss auch ohne Bild erfassbar sein.

Audiovisuelle Medien:

 Untertitel, Transkripte, gegebenenfalls Audiodeskriptionen – alle Medien müssen auch für Menschen mit Seh- oder Hörbeeinträchtigungen verständlich sein.

Dokumente und Dateien:

PDFs sollten barrierefrei erstellt werden (getaggte Struktur, Alt-Texte, Lesereihenfolge). Alternativ: Inhalte zusätzlich als HTML bereitstellen.

Redaktionelle Pflege:

Redakteur*innen müssen wissen, wie sie Inhalte im CMS korrekt barrierefrei erfassen – nicht nur in der Theorie, sondern im Alltag. Dafür braucht es Prozesse, Schulung und manchmal schlicht: ein gutes Interface.

Hinweis: Auf Wunsch erstellen wir im Rahmen des Webprojekts auch barrierefreie Inhalte – von Grund auf oder auf Basis bestehender Texte. Dabei achten wir darauf, dass Inhalt, Design und technisches Konzept eng aufeinander abgestimmt sind.

Fatty-head

Fazit: Barrierefreiheit ist Systemleistung

Design und Entwicklung bilden das Herzstück bei der Erstellung barrierefreier Websites – aber nur im Zusammenspiel mit durchdachtem Content entsteht eine wirklich inklusive Nutzererfahrung. Wer Accessibility frühzeitig, systematisch und disziplinübergreifend verankert, profitiert mehrfach: durch bessere UX, größere Reichweite, nachhaltige Codequalität – und nicht zuletzt durch gesetzliche Absicherung.
Barrierefreiheit ist kein Hindernis für gutes Design, sondern dessen Reifeprüfung. Was nutzbar ist für alle, ist besser für jeden.

Jetzt starten –
Inklusion gestalten
Starten Sie mit unserem Accessibility-Checker