Barrierefreiheit
UX Design
Entwicklung
Veranstaltungen für Alle
Veranstaltungen barrierefrei gestalten
Eine Plattform, die Veranstalter:innen und Menschen mit und ohne Behinderungen zusammenbringt, damit Kultur- und Sportevents für alle erlebbar werden. Wir haben genau das gebaut! Auf der Reise im Auftrag der „Initiative Barrierefrei Veranstalten“, ist Veranstaltungen für Alle entstanden, eine Ruby on Rails Webanwendung, die Inklusion fördert.
Die Challenge
Während Kultur- und Sportevents für viele problemlos und spontan besucht werden können, stehen etwa 13 Millionen Menschen in Deutschland vor Hürden, die ihre Teilnahme erschweren oder verhindern. Wie kann eine App dazu beitragen, dass Veranstaltungen zukünftig für mehr Menschen mit Behinderungen zugänglich werden? Welche Funktionen braucht es dafür? Welcher Dialog muss über die Plattform geschaffen werden, um alle Akteure gemeinsam und auf Augenhöhe abzuholen? Es braucht mehr Bewusstsein, Unterstützung und Wissenstransfer.
Ein barrierefreies UX Design
Veranstaltungen für Alle soll ganz im Zeichen digitaler Inklusion so vielen Menschen wie möglich als Event- und Informationsplattform zur Verfügung stehen. Hierfür arbeiten wir nach den vier Prinzipien der Web Content Accessibility Guidelines: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit, Robustheit. Dabei geht UX Design weit über das berücksichtigen assistiver Technologien, der Anpassung von Farben & Kontrasten hinaus. Vorab haben wir die Bedürfnisse der Zielgruppen zu identifizieren haben wir Personas angelegt, User Interviews geführt, eine Customer Journey Map erstellt und Hypothesen mit Wireframes getestet. Um Menschen mit kognitiven Behinderungen die Inhalte zugänglich zu machen, haben wir beim Vertesten mit Click Dummies und für offene Fragen mehr Zeit eingeräumt.
Leichte Sprache und Alternativtexte
Im Projektverlauf war auch die richtige Umsetzung von leichter Sprache im User Interface Design wichtig. Ein Layout das Klarheit und Lesbarkeit gewährleistet, indem es Linksbündigkeit, einen Satz pro Zeile beziehungsweise eine stark begrenzte Anzahl an Zeichen vorweist, macht den Unterschied. Ob kognitive Beeinträchtigungen, Legasthenie, funktionaler Analphabetismus oder Hörschädigung – viele Menschen profitieren davon.
Screenreadertauglichkeit
Damit die assistive Technologie ihre Aufgabe erfüllen kann, erhalten alle dekorativen Elemente, wie Bilder oder Grafiken, Alternativtexte. Wörter erfüllen hier dieselbe Funktion wie Bilder – sie transportieren Gefühle und wirken sich zudem positiv auf die SEO aus.
Schrift und Buttons
Mit Atkinson Hyperlegible ist eine Schrift zum Einsatz gekommen, die speziell für Menschen mit teilweiser Sehbehinderung entwickelt wurde. Die Buttons wurden so umgesetzt, dass bei der Nutzung erkennbar ist, wo sich der User befindet.
Stereotypen, Visualisierungen und Learnings
Unbewusst und unbeabsichtigt haben wir Vorurteile in Grafiken einfließen lassen. Wie kam es dazu? Wir wollten eine diverse Gruppe darstellen, die Freude ausstrahlt. Dafür nutzen wir in Grafiken oft extreme Situationen (wie das Springen), um die Emotion auf den ersten Blick zu transportieren. Dadurch haben wir jedoch noch mehr Distanz zum Rollstuhlfahrer geschaffen. Um ein inklusives Bild zu vermitteln, haben wir mehr Nähe zwischen den Personen reingebracht. Gutes Learning, und alles eine Sache der Kommunikation.
Dark Mode – Dunkelmodus
Der Dunkelmodus ist mittlerweile State-of-the-Art im UX Design.
Ein hoher Kontrast zwischen Text und Hintergrund macht Inhalte auf dem Bildschirm leichter lesbar und optimiert die Usability. Eine gute Umsetzung erfordert die richtige Anpassung der Farben, der Kontraste, die von Grafiken, Bildern und Icons, die Menschen mit Sehbehinderungen, Legasthenie, Migräne oder Lichtempfindlichkeit unterstützt.
Barrierefreies Frontend und Backend – von Beginn an mitdenken
Barrierefreie Webentwicklung ermöglicht es einem breiteren Publikum, Software zu nutzen und von ihr zu profitieren. Allen eine höhere Benutzerzufriedenheit zu garantieren, sollte auch beim Code als Standard von Beginn an mitgedacht werden: aus purer Menschlichkeit, um Marktreichweite zu erhöhen und Kosten im Nachgang zu vermeiden.
Wichtige Überlegungen bei der Entwicklung sind folgende:
- Von Beginn an beim Testen und Entwickeln den “Dark Mode” mitdenken, der Nutzern mit Seh-Beeinträchtigungen einen besseren Kontrast bietet.
- Icons müssen immer Labels für Screenreader haben, da Menschen mit Sehbeeinträchtigungen im Screenreader diese Icons sonst nicht verstehen können. (Labels können im HTML da sein, aber für sehende Nutzer versteckt werden)
- Website-Navigation funktioniert mit Screenreader anders, deshalb: selber in der Entwicklung mit Screenreadern testen.
- Screenreader sind wie Browser: Es gibt verschiedene mit Eigenheiten und unterschiedlichen Funktionsweisen
- Wenn Bilder (z.B. die Veranstaltungsfotos oder User-Profil) eingebunden werden: Denkt an die Alt-Texte für Screenreader. Im Idealfall können die Nutzer:innen beim Upload die Alt-Texte anpassen.
Genutzte Technologien
- Ruby on Rails
- PostgreSQL (Datenbank)
- Hotwire (für interaktive Komponenten und Offline-Funktionalität)
Projektumfang und Team
Ein wunderbares Projekt der Initiative Barrierefrei Veranstalten. Von Railslove waren dabei: UX Design – Isabell Solberg Entwicklung – Thomas Schrader, Stephan Pavlovic, Yasha Müller.
Projektleitung: Manuel Beck, DJK
Zum Thema barrierefreies Webdesign findet ihr Blogartikel auf unserer Website, u.a. zu UX Design, Farben, Kontraste, Screenreader.
_______
Der DJK Sportverband Köln e.V. ist Betreiber der Webseite und Heimat der Initiative. Wissenschaftlich begleitet wurde das Projekt vom Forschungsinstitut für Inklusion durch Bewegung und Sport (FIBS).
Der Plattform könnt ihr auch auf Instagram folgen.
Ziele und Bedürfnisse
Wir waren sofort vom partizipativen Ansatz der Initiative begeistert. Auf die Bedürfnisse von Menschen mit körperlichen und kognitiven Beeinträchtigung aufmerksam zu machen, die Veranstalter:innen an die Hand zu nehmen und kollaborativ Schritt für Schritt gemeinsam zu gehen. Für die drei Zielgruppen wurden folgende Bedürfnisse identifiziert und von uns umgesetzt:
- Für Veranstalter:innen ist die Thematik oft mit organisatorischer und finanzieller Überforderung behaftet. Daher braucht es einen niedrigschwelligen Zugang, der aktiv unterstützt, informiert und hilft mehr Reichweite für Events zu generieren. Events können im Kalender beworben werden und jeder kann mittels eines Selbstchecks herausfinden, welche Maßnahmen bei der eigenen Veranstaltung empfohlen werden.
- Besucher:innen mit Beeinträchtigungen erleben diverse Hindernisse, wenn es um den Besuch von Events geht. Vom Ticketkauf, der Anreise, Zugänglichkeit oder kommunikative Barrieren. Auf der Plattform können in einem Veranstaltungskalender Events gefunden werden, eine Filterfunktion ermöglicht die gezielte Suche nach Events, die den Bedarfen entsprechende Vorkehrungen zur Barrierefreiheit aufweisen. Ein eigenes Profil gibt Gelegenheit zum Austausch mit anderen Teilnehmenden und mit Veranstalter:innen.
- Das Inklusive Prüfer:innenteam war bislang mit Klemmbrett und Kugelschreiber unterwegs, dieses wurde nun durch eine digitale Checkliste, die 123 Punkte enthält, abgelöst. Um nicht von Internetverbindung abhängig zu sein, ist die Liste auch offline verfügbar und kann parallel bearbeitet werden. Die Tatsache, dass es sich hierbei um Expert:innen in eigener Sache handelt, ist ein wichtiger Bestandteil des partizipativen Konzeptes. Die qualifizierten Prüfer:innen sind selbst Besucher:innen mit Behinderungen, und gestalten so aktiv mit. Sie führen einen von den Veranstalter:innen beauftragten Barriere-Check vor Ort durch und können die Ergebnisse schnell auswerten.
Welche Sustainable Development Goals bedient das Produkt?
„Veranstaltungen für Alle“ kann dazu beitragen zwei Ziele für nachhaltige Entwicklung zu erreichen:
SDG 10 – Barrierefreiheit soll als ein gemeinsamer, partizipativer Entwicklungsprozess betrachtet werden. Durch den inklusiven, unterstützenden und informativen Ansatz werden alle Akteure zusammengebracht, und können sich für die Teilhabe aller engagieren.