Header für den Portfolio Case der DuW family zum Thema Barrierefreiheit mit einer Collage von Endgeräten und dekorativen Grafiken.
DuW family | Barrierefreiheit

Barrierefreiheit und nachhaltiges Webdesign

Zielsetzung

Wie gestaltet und programmiert man eine Website, die barrierefrei funktioniert, möglichst wenig Energie verbraucht – und trotzdem Spaß macht? Genau das ist unser Anspruch an die Landingpage für unsere Creatives, die Spezialisten für Digital Advertising. Eine Seite, die leicht zugänglich ist, ressourcenschonend läuft und dabei genau den Ton trifft: freundlich, klar, mit Charakter.

Konzeptioneller Rahmen

Unser Weg dorthin? Tief eintauchen. Wir haben uns intensiv mit der Thematik beschäftigt, daraus eigene Checklisten entwickelt – und diese wurden zum roten Faden durch Design und Code. Struktur, Navigation, Lesbarkeit: Alles folgt dem Prinzip „so einfach wie möglich, so schick wie nötig“.

Zwei Modi, ein Ziel

Die Seite startet bewusst im barrierefreien Modus – reduziert, funktional, direkt. Wer will, kann über einen Button in den Funmode wechseln. Dort warten mehr Animationen, mehr Farben, mehr Spielerei. Der Moduswechsel macht sichtbar, wie Gestaltung wirken kann – und bleibt dabei immer inklusiv gedacht.

Gestaltung und visuelle Sprache

Wir setzen auf Klarheit statt Überladung: reduzierte Farbpalette, starke Kontraste, gut lesbare Typografie. Alles wurde getestet – auf Barrierefreiheit, auf Verständlichkeit, auf Wirkung. Farben sind nie alleinstehend, sondern werden durch Formen, Icons oder Typo unterstützt. Und ja: weniger Farben bedeuten auch weniger Daten.

Medieneinsatz und Performance

Illustrationen? Wo sie sinnvoll sind, als SVG oder Lottie – leicht, skalierbar, schön. Videos nur da, wo sie wirklich gebraucht werden. Bilder haben wir konsequent komprimiert. Die Seite läuft im Dark Mode – nicht nur stylisch, sondern auch energieeffizient. Schnell, schlank, ansprechend.

Formulare und Interaktion

Kontaktformulare können kompliziert sein – müssen sie aber nicht. Wir setzen auf dauerhaft sichtbare Labels, klare Fokus-Zustände und hilfreiche Rückmeldungen. Fehlermeldungen erscheinen nicht nur in Farbe, sondern auch in Text! Am Ende gibt’s sogar positives Feedback – weil gute UX auch Empathie heißt.

Code und nachhaltiges Webdesign

Im Hintergrund läuft alles ressourcenschonend: Minifizierter Code, kaum Plugins, keine Cookies. Die Seite ist leicht, lädt schnell, verursacht wenig CO₂ – und wird nachhaltig gehostet. Dass die Landingpage von Website Carbon ein A+ bekommt, freut uns natürlich. Noch mehr freut uns, dass man es beim Benutzen spürt.

Unser Learning, deine Chance

Im Zuge der Arbeit an unserer Seite haben wir ausführliche Checklisten entwickelt, mit denen wir die Barrierefreiheit von Webseiten prüfen können. Hier ein Einblick → LINK

Wenn eine Überarbeitung deiner Website oder die Checkliste zur eigenen Überprüfung auch für dich / für euch ein wichtiges Anliegen ist, schreib uns gern an.

Dein Ansprechpartner:

Leistungen in diesem Case:

MockUp von mehreren Mobiltelefonen auf denen der Wechsel von barrierefreiem Modus in den Fun-Modus dargestellt wird.
Wechsel von barrierefreiem Modus in den Fun-Modus
Farbpalette und Farbräume zur Prüfung von Kontrasten etc. bei unterschiedlichen Farbblindheiten und Sehschwächen.
Überprüfunge von Barrieren bei Farbblindheiten und Sehschwächen
Darstellung der Ergebnisse verschiedener Tool zur Prüfung der Effizienz, Performance und Nachhaltigkeit.
Prüfung auf Effizienz, Performance und Nachhaltigkeit
Darstellung der Checklisten für barrierefreie Websites.
Checklisten für barrierefreie Websites