Für uns als Agentur gibt es wohl nichts Schöneres, als wenn uns ein Projekt auf das nächste Level bringt.

Genau dies war der Fall mit dem Auftrag der National Disability Authority (NDA). Dies ist die oberste staatliche Einrichtung Irlands zu Fragen der Politik und Praxis im Hinblick auf Menschen mit körperlicher oder geistiger Beeinträchtigung; sie berät die Regierung und den öffentlichen Sektor. Wir hatten uns mit der NDA zusammengetan, um die Website zu gestalten, die in Sachen inklusives Webdesign das Maß der Dinge werden sollte.

Die NDA unterstützt irische Institutionen wie das Ministerium für Kinder, Gleichstellung, Menschen mit geistiger oder körperlicher Beeinträchtigung, Integration und Jugend bei der Koordination entsprechender politischer Belange. Einer ihrer Arbeitsschwerpunkte ist, universelles Design zu bewerben und zu verbreiten. Dies läuft im Wesentlichen über das eigens eingerichtete Universaldesign-Exzellenzcenter der NDA.


Digitale Barrierefreiheit der NDA: die Ziele

Zunächst ging es bei unserer Arbeit darum, die wesentlichen Ziele der Website zu konkretisieren. Unter anderem stand dies an:

  • Prüfung und Auffrischung der Struktur der Website in einer Art, die die NDA-Arbeit vorstellt und unterstützt
  • Gestaltung einer Seite mit starkem kommunikativem Charakter
  • Einrichtung einer robusten und dynamischen Suchfunktion
  • Gewährleistung, dass die rechtlichen Regelungen für digitale Barrierefreiheit eingehalten werden
  • Darstellung der Rolle und des Werts der NDA

Ein leitender Gedanke lautete: Die neue NDA-Onlinepräsenz soll die Institution als vertrauenswürdige und verlässliche Informationsquelle für Menschen mit körperlicher oder geistiger Beeinträchtigung bekannt machen. Dabei lag ein Hauptaugenmerk auf den Inhalten und deren thematischer Strukturierung. So sollte das fertige Produkt unbedingt als zentrales Kommunikationsinstrument der Organisation funktionieren.


Wichtig war der NDA außerdem, dass das generelle Erscheinungsbild bei all den Neuerungen nicht unter den Tisch fällt. Der Designanspruch des Projekts lautete also, eine optisch dynamische und attraktive Website aufzubauen, die auch die Anforderungen an digitale Barrierefreiheit in jeder Hinsicht erfüllt.

Inklusives Webdesign: die Strategie

Uns war klar: Der komplexeste Teil des Projekts würde werden, die User Experience (UX) in die optimale Bahn zu lenken und eine eindeutige, übersichtliche Sitemap zu erstellen. Dafür kamen wir zu einigen Workshops zusammen, sowohl online als auch vor Ort, um die Informationsarchitektur gemeinsam zu konzipieren, wobei wir uns an Nutzungsstatistiken und neuen Geschäftszielen orientierten. Auf diesem Weg konnten wir eine erste Version der Sitemap erstellen, die wir dann im Team mit dem Kunden einem Stresstest unterzogen. Diese Workshops verlangten uns eine noch stärkere Zusammenarbeit innerhalb unseres Arbeitsablaufs und eine besondere Berücksichtigung der Kundenanforderungen an Barrierefreiheit ab.

Unsere Digitalstrategie hatte natürlich ebenfalls die Markenelemente und auch die „Dos and Dont’s“ im Blick, die sich aus Nutzerperspektive ergeben. Mit anderen Worten: das, was die Seite für die Zielgruppen nützlich machen soll bzw. das, was just aus diesem Grund zu vermeiden war.

Wir konnten herausarbeiten, wie sich das NDA-Branding definiert, wie verwandte Onlineauftritte bis dato wahrgenommen wurden und wohin genau es in Zukunft gehen soll.

Unser Kreativprozess orientierte sich dann an diesen Leitzielen:

  1. Professionalität und Seriosität
  2. hohe Qualität, Zuverlässigkeit und Sachlichkeit
  3. Usability und Klarheit

Korrekt, digitale Barrierefreiheit war nicht als Leitziel ausgegeben. Sie war vielmehr der Kern des Ganzen und prägte das gesamte Projekt.


User Interface in barrierefreiem Design

Für die Neugestaltung der Homepage, zunächst für das Mega-Menü, orientierten wir uns sowohl an qualitativen als auch an quantitativen Untersuchungen und Daten. Es zeigte sich, dass die NDA-Zielgruppen mehr erwarten als die gängige Sortierung der Inhalte anhand von Drop-downs. Also kam zweierlei hinzu: eine Schnellauswahl zum Filtern zentraler Informationen und eine individuelle Suchfunktion für die gesamte Website.

Bei all dem sollte barrierefreies Webdesign auf keinen Fall unsere Kreativität einengen. Vielmehr sollte sie uns anspornen, querzudenken und das Design auf neue Art und Weise anzugehen. Auch inklusives Design soll schließlich großartig aussehen! Die Verwendung markenspezifischer Farben ist ein zentraler Aspekt aller Designprozesse, und hier galt es, die Farben zur Optimierung der Seite zu nutzen, ohne dass die Ästhetik auf der Strecke bleibt.

Auch sprachlich sollte die Seite inklusiv werden. Die Einbindung einer Funktion für die irische Sprache, also das Gälische, und Videos in irischer Zeichensprache geben dem Nutzerpotenzial und der User Experience einen Schub.


Innovationen und Technologie für barrierefreies Webdesign

Als es an die technische Umsetzung ging, legten sich unsere Entwicklungsprofis besonders ins Zeug, einwandfreien Code zu produzieren. Er musste sich in verschiedenen Tests beweisen, zum Beispiel beim Einsatz von Screenreadern, bezüglich der Farbverhältnisse sowie Kontraste und in puncto Tauglichkeit der Alternativtexte.

Welche Elemente digitaler Barrierefreiheit über das gesamte Projekt hin vor allem zum Einsatz kamen?

  • Screenreader: Derartige Software gibt blinden oder in ihrem Sehvermögen stark eingeschränkten Menschen Zugang zu Inhalten von Websites, indem sie mit sogenannten Text-to-Speech-Systemen (man kann sagen: mit künstlich erzeugten Stimmen) die Inhalte hörbar vorliest.
  • Alternativtexte: Dies sind Texte, die Bilder, Grafiken und andere visuelle Elemente einer Website beschreiben. Damit können Screenreader verbale Beschreibungen des Bildmaterials vorlesen und somit denen erklären, die sie nicht sehen oder erkennen können.
  • Tastaturnavigation: Sie ermöglicht es, sich auf Websites ausschließlich über die Tastatur (also ohne Maus) gezielt zu bewegen, Text auszuwählen und Links anzuklicken.
  • Untertitelungen und Transkriptionen: Dies sind Verschriftlichungen von Audio- und Videomaterial. Sie machen Informationen für diejenigen verfügbar, die nur schlecht hören können oder gar taub sind.

Die neue NDA-Website sollte in jeder Hinsicht barrierefrei werden, bis hin zum Contentmanagement-System. Und das ist sie nun: minutiös abgestimmt auf die Richtlinien für barrierefreie Webinhalte (Web Content Accessibility Guidelines, kurz WCAG).


Eine entscheidende Erkenntnis für uns bei Kooba aus der Kooperation mit der NDA ist, wie umfassend deren Expertise in puncto digitale Barrierefreiheit ist. Ob Workshops, Kundenmeetings oder Projektergebnisse: Alles wurde für Teammitglieder mit Sehbehinderung oder mit Hörproblemen adaptiert. Die Perspektive, die wir einnehmen mussten, war also nicht nur die von Websitebesucher:innen, sondern auch die der NDA-Vertreter:innen. Also gestalteten wir auch unsere Workshops und Trainings barrierefrei und inklusiv.


Umsetzung und Ergebnisse des NDA-Projekts

Die Website wurde im November 2022 gelauncht und macht sich bereits richtig gut. Sie ist gänzlich responsiv und überzeugt auch optisch auf allen Geräten. (Kooba ist eine Mobile-first-Agentur. Solche Aspekte liegen uns also sehr am Herzen.)

Wir konnten eine Plattform aufbauen, die für barrierefreies Webdesign Maßstäbe setzt. Sie punktet mit unkomplizierter Navigation, Nutzerfreundlichkeit und ansprechendem Design für alle. Die gesamte Seite ist konsequent nach den strengen WCAG-Standards gebaut, was in diesem Fall wie füreinander gemacht ist.

Mit Fug und Recht können wir sagen: Wir haben eine Website kreiert, die in Irland zum höchsten Standard für inklusives Webdesign geworden ist. Wir haben unser Herzblut in dieses Produkt einfließen lassen, das unsere Design- und Entwicklungsteams herausgefordert und noch besser gemacht hat. Dabei konnten wir viele Erkenntnisse und Erfahrungen für unseren Kooba-Prozess übernehmen, wovon angesichts der wachsenden Bedeutung von barrierefreiem Design definitiv viele Projekte profitieren werden.


Wir verraten Dir mehr über unsere Erfahrungen in Sachen barrierefreies Webdesign und die Arbeit von Kooba!

Journal full list