Time to market
6 Monate
Für den Blinden- und Sehbehindertenverband Niedersachsen e. V. (BVN) entwickelten wir gemeinsam mit und im Auftrag von der Holisticon AG ein Portal zur Vermittlung von rollstuhlgerechtem und barrierefreiem Wohnraum.
Die Umsetzung wurde unter strenger Überprüfung der Richtlinien der BITV (Barrierefreie-Informationstechnik-Verordnung) und WCAG (Web Content Accessibility Guidelines) Testverfahren durchgeführt.
adira.de ist ein Projekt des Blinden- und Sehbehindertenverbands Niedersachsen e.V. (BVN)
Holisticon AG
Selbsthilfe- und Interessenverband der Menschen in Niedersachsen, die sehbehindert, blind, mehrfachbehindert, hörsehbehindert oder taubblind sind
Vermarktung von garantiert barrierefreiem und rollstuhlgerechtem Wohnraum mit Anbindung an etablierte und standardisierte Schnittstellen der Wohnungswirtschaft
Erstellung einer Portallösung zur Vermarktung und Vermittlung von barrierefreiem und rollstuhlgerechtem Wohnraum als barriefreier Online-Service gemäß BITV und WCAG Richtlinien inkl. vollständiger Formularstrecke zur Veröffentlichung von Inseraten
Beratung, Architektur, UX-Design, UI-Design, Backend-Entwicklung, Frontend-Entwicklung, Produktiv-Betrieb
Typo3, Fluid, Sass, JS
Innerhalb der ersten Projektphase galt es, aus einem bereits existierenden Design-Prototypen fachliche und technische Anforderungen für die Realisierung abzuleiten. Insbesondere die allgemein geltenden Richtlinien zur Barrierefreiheit gemäß BIK (barrierefrei informieren und kommunizieren) sollten in diesem Schritt überprüft und in Einklang mit dem zu entwickelnden Produkt gebracht werden.
Die zweite Projektphase umfasste umfangreiche Optimierungen in der gesamten Bedienoberfläche hinsichtlich Barrierefreiheit und Usability.
Zunächst wurde eine funktionale Version des im Vorwege entstandenen Design-Prototypen umgesetzt. Diese setzt sich aus einem Service zur Verwaltung von Wohnungsangeboten, einem Redaktionssystem zur Administration der Website und der Bedienoberfläche zusammen, die speziell für die Nutzung von Screenreadern optimiert wurde.
Die erste veröffentlichte Version des Portals wurde in Zusammenarbeit mit blinden und stark sehbehinderten Testpersonen überprüft. Das Feedback wurde mit dem Maßnahmenkatalog der BIK zur Realisierung von barrierefreien Websites abgeglichen. Darüber hinaus wurden die Hinweise der Plattform „leserlich.info“ berücksichtigt.
Daraus resultierend entstand ein neues UI-Konzept, welches gewährleistet, dass erforderliche Kontraste und Schriftgrößen eingehalten werden. Die Struktur der vorhandenen Seiten wurde dahingehend angepasst, dass über Screenreader vorgelesene Inhalte gut verständlich dargestellt wurden.
Im Zuge der 2. Projektphase konnte mit adira.de ein Portal entwickelt werden, das für Interessenten von rollstuhlgerechtem und barrierefreiem Wohnraum ohne Einschränkungen bedienbar ist. Anbieter solcher Wohnangebote werden über das Eingabeformular informiert, ob ihre Wohnungen den geltenden Anforderungen gerecht werden.
Hans-Werner Lange Geschäftsführer Blinden- und Sehbehindertenverband Niedersachsen e. V., Initiator adira.deBei adira.de geht es darum, in alle Richtungen weitestgehend barrierefrei zu sein. Daher ist unsere Aufgabe, zukünftig sowohl den Service immer weiter zu verbessern als auch das Thema Barrierefreiheit noch weiter zu optimieren.
Der Service zur Anlage von Wohnungsangeboten beinhaltet in der Basis die relevanten Abfragefelder, um ein Wohnungsangebot allgemein zu beschreiben. Teil der Validierungsautomatik ist die Überprüfung verschiedener Werte, welches die Mindestvoraussetzungen zur Erfüllung der Kriterien für eine rollstuhlgerechte oder barrierefreie Wohnung sind. Als simples Beispiel dafür kann das Vorhandensein eines Aufzuges genommen werden. Dieser ist erforderlich, wenn die Wohnung rollstuhlgerecht sein soll und sich nicht im Erdgeschoss befindet. Eine Vielzahl solcher spezifischer Feldtypen wurde in Abstimmung mit dem BVN in die Eingabemaske integriert und unterstützt Anbieter von Wohnungen dabei, alle notwendigen Angaben zu treffen, die zur vollumfänglichen Beschreibung einer Wohnung nötig sind. Gleichzeitig hilft dieser Validierungsprozess dabei zu gewährleisten, dass keine Wohnungen angeboten werden, die die Kriterien nicht erfüllen.
Die uns bereits bekannten Limitierungen hinsichtlich Barrierefreiheit konnten auf Basis der ersten veröffentlichten Version bestätigt werden. Das Feedback mehrerer Testpersonen wurde konsolidiert und mit dem Maßnahmenkatalog abgeglichen, der Bestandteil der BITV und WCAG Testverfahren ist. Um den darin festgehaltenen Richtlinien gerecht zu werden, war die Zielvorgabe für die zweite Projektphase die Entwicklung eines neuen UI-Konzeptes. In Konsequenz daraus erfolgte die frontendseitige Umsetzung und die Überführung des Formulars zur Eingabe von Wohnungsangeboten in das neue UI. Im Zuge dessen wurde auch das UX-Konzept überarbeitet und das Eingabeformular u. a. auf thematisch gegliederte Einzelschritte verteilt.
Das bereits existierende und abgestimmte Interfacedesign sollte in puncto Barrierefreiheit optimiert werden. Es sollte demnach kein neuer Entwurf entstehen. Dennoch waren in der Basis alle Bestandteile zu überprüfen, die Auswirkungen auf die Barrierefreiheit haben. Geringe Farbkontraste wurden erhöht, Schriftstärken angepasst, Zeilenabstände erhöht und Interaktionselemente besonders gekennzeichnet. Außerdem wurde das gesamte Erscheinungsbild stärker vereinheitlicht. Innerhalb unseres Toolings halfen uns Erweiterungen dabei, im Design-Prozess herauszufinden, ob die neu definierten Schriftformatierungen über eine ausreichende Lesbarkeit verfügen. Auch frühzeitige User-Tests haben uns dabei unterstützt, das Interfacedesign zu optimieren und eine gute Basis zu entwickeln.
Ebenfalls innerhalb der zweiten Projektphase überarbeiteten wir das Eingabeformular zur Speicherung und Veröffentlichung von Wohnungsangeboten. Im Unterschied zur ersten Lösung, die als eigener Dienst mit eigenem UI entwickelt wurde, integrierten wir das Formular vollständig in das Portal und überarbeiteten die Struktur. Statt alle Eingabefelder auf einer Seite abzufragen, sammelten wir thematisch zusammenhängende Felder und verteilten diese auf einzelne Schritte. Diese UX Anpassung hat zum Ergebnis, dass die Anbieter zu jedem Zeitpunkt wissen, wie viele Schritte noch vor ihnen liegen und welche Art von Information auf dem jeweiligen Schritt abgefragt wird. Bei der nachträglichen Bearbeitung eines Wohnungsangebotes lässt sich komfortabel zu der gewünschten Position navigieren.
Ein weiterer Vorteil der Migration des Eingabeformulars war die deutliche Optimierung von dessen Barrierefreiheit. War die initiale Umsetzung rein funktional, konnten wir in der neuen Version von der UI-Komponenten-Bibliothek profitieren, die bereits in der Basis über ausreichende Kontraste und Schriftgrößen verfügt.
Für das Angebot der Wohnungswirtschaft wurde eine Schnittstelle etabliert, die einen nahtlosen Export von Exposés aus der Immobilien-Software zu adria.de ermöglicht. So lassen sich auch Inserate administrieren, ohne diese parallel auf zwei unterschiedlichen Quellen zu pflegen.
Ideen für nützliche Tools und Services im Rahmen des Portals gibt es genügend. So ist geplant, in einer weiteren Ausbaustufe die Wohnungsangebote um eine Wheelmap zu erweitern. Diese stellt basierend auf einer spezifischen GEO-Location Informationen zu rollstuhlgerechten Orten zur Verfügung. Dazu gehören der ÖPNV, Einkaufsmöglichkeiten, Kulturstätten, öffentliche Einrichtungen und Gastronomie. Auch für Screenreader lassen sich diese Informationen verarbeiten, indem die relevantesten Orte anstatt auf einer Karte als Listeneinträge vorgelesen werden.
Auch Usability Features für Interessenten sollen in weiteren Ausbaustufen berücksichtigt werden.
Wir freuen uns in diesem Projekt unsere Expertise in der Entwicklung barrierefreier Lösungen ausgebaut zu haben und sind gespannt, wo die Reise von adira.de noch hingehen wird.
Malte Gärtner Projektleiter adira.de, Blinden- und Sehbehindertenverband Niedersachsen e. V.Chroma Experience ist gelungen, nicht allein die Wohnungssuche, sondern auch die neue entwickelte Eingabemaske barrierefrei zu gestalten – und so die Anforderungen an unser Portal sogar überzuerfüllen!