Beginnen Sie mit barrierefreiem / inklusivem Design - 5 Tipps

Global Accessibility Awareness Day

Heute, am 16. Mai, ist der Global Accessibility Awareness Day. Eines unserer Ziele bei Monkeyshot ist es, jedes digitale Produkt für alle Benutzer zugänglich und inklusiv zu machen, unabhängig von deren Kontext. Aus diesem Grund halten wir uns über die Richtlinien zur Barrierefreiheit auf dem Laufenden, indem wir Spezialisten in unsere Projekte einbeziehen.

Es ist nicht immer einfach, diese Einstellung in Ihrem Team zu erreichen. Lassen Sie uns ein paar grundlegende Tipps geben, um loszulegen.

1. Stellen Sie Ihr Team auf die Notwendigkeit eines barrierefreien Designs ein

Als in Europa ansässige UX-Agentur sind wir an EU-Gesetze gebunden, in denen die Barrierefreiheitsstufen festgelegt sind, denen unsere Arbeit, insbesondere für öffentliche Dienste, entsprechen soll. Dies ist eine Möglichkeit, sich und Ihre Kunden zum Entwerfen für alle zu motivieren. Indem wir Benutzer mit einer Sehbehinderung in unsere Benutzertests einbeziehen, stellen wir uns den Fragen der Barrierefreiheit. Und wenn wir es eher vergessen, sind einige unserer farbenblinden Kollegen nur einen Schreibtisch entfernt, um uns daran zu erinnern.

Wir halten uns nicht nur an das EU-Recht, wir konzipieren auch für alle Benutzer, die wir unterwegs treffen.

2. Leicht zugängliche Sprache funktioniert für alle

Marie Van Driesche, eine Interaktionsdesignerin bei ABN Amro, erklärte während ihres Vortrags auf der AWWWARDS in Amsterdam Anfang dieses Jahres, dass leicht zugängliche Sprache und klares Schreiben für alle von Vorteil sind. Für sie als gehörlose Person ist die Gebärdensprache ihre erste Sprache und die gesprochene Sprache ihre zweite.

Stellen Sie sich vor, Sie lesen einen komplizierten französischen Text, aber Ihr Französisch ist nicht Ihre gesprochene Sprache. Nicht so einfach, oder?

Sehen Sie sich den ganzen Vortrag von Marie auf Vimeo an.

3. Seitenstruktur und Titel

Hilfstechnologien wie Bildschirmlesegeräte und Braille-Systeme stützen sich auf die Seitencodestruktur. Sie interpretieren Code ziemlich linear und geben ihn in der Reihenfolge an den Benutzer weiter, in der der Code "gescannt" wird. Gut geschriebener Code springt nicht zwischen Bildschirmelementen hin und her.

Für Benutzer, die auf unterstützende Technologien angewiesen sind, würde dies zu einer unverständlichen Website führen. Die Strukturierung Ihres Codes so, dass Screenreader alles in der richtigen Reihenfolge übersetzen, ist nicht nur für die Barrierefreiheit von Vorteil, sondern auch für Ihr Projekt. Die Implementierung einer klaren Codestruktur ermöglicht eine einfachere Übertragung des Codeaufwands, schnellere Codeüberprüfungen und Projektwartbarkeit.

4. Fallbacks für alle Ihre Medieninhalte

Durch Hinzufügen von Beschreibungen zu Bildern (oder Alt-Tags in Ihrem Code) können Sie dem Benutzer mitteilen, wofür das Bild verwendet wird. So können Screenreader und Braille-Systeme die Bilder, Videos oder Audiodateien für den Benutzer übersetzen. Wenn Sie die Bilder auf Ihrer Website beschreiben, können Sie als zusätzlichen Vorteil die Relevanz der Bilder überdenken. Vielleicht ergibt dieses Foto überhaupt keinen Sinn ...?

Stellen Sie für die Videowiedergabe Untertitel bereit, die für Hilfstechnologien oder Benutzeraktionen aktiviert werden können. Sprachassistenten können Ihnen beim Einstieg in diese Abschriften helfen, falls Sie mit der überwältigenden Aufgabe konfrontiert sind, Ihre Videos zu transkribieren.

5. Überlegen Sie, was Sie von Ihrem Benutzer verlangen

Das Sprechen und Testen mit all Ihren Benutzern stellt sicher, dass Sie sich in sie einfühlen können. Sie überdenken damit den gesamten Prozess der Customer Journey.

Dadurch wird nicht nur die Gesamtqualität Ihrer Website verbessert, sondern auch die Barrierefreiheit Ihrer Geschäftsprozesse. Überprüfen Sie jeden Schritt auf dem Weg. Wenn Ihr Kundenprozess beispielsweise einen Anruf erfordert, müssen Sie auch gehörlosen Menschen unterstützende Alternativen anbieten.

Pictare genommen während eines usertests mit einer sehbehinderten Person.

BONUS - Einfache Tools für schnelle Überprüfungen

Es kann schwierig sein, alle neuen WCAG 2.1-Richtlinien in Ihr Projekt aufzunehmen und zu verfolgen. Basierend auf diesen Richtlinien haben wir unsere eigene Checkliste erstellt (leider derzeit nur auf Niederländisch verfügbar). Alle Richtlinien und Beschreibungen sind in einer einfachen Übersicht zusammengefasst. Verwenden Sie es in Ihrem Team, um Ihre Fortschritte bei den WCAG-Richtlinien zu verfolgen.

Sie finden diese Excel-Datei hier (Datei auf Niederländisch). Wir empfehlen, vor der Verwendung den Haftungsausschluss auf der letzten Registerkarte zu lesen. Beachten Sie, dass dieses Tool von uns erstellt wurde, um unsere Designer und Kunden zu unterstützen. Es wird weder von WCAG noch von W3C hergestellt oder validiert.

Hier ist eine Liste zusätzlicher Tools, die wir täglich verwenden, um Kontrast, Textgröße usw. zu überprüfen:

  • Stark, ein Sketch-Plugin zur Überprüfung von Farbkontrasten
  • Contrast Grid, ein Webtool zur Überprüfung von Kontrasten
  • NoCoffee, ein Chrome-Plugin-Simulator für Sehbehinderungen
  • BOSA Accessibility Check, ein einfaches Lesezeichen, um die aktuelle Website auf Barrierefreiheit zu überprüfen

Wie fordern wir uns heraus?

Mit unserem Team führen wir monatliche Sitzungen zum Wissensaustausch durch. Inklusives und barrierefreies Design steht regelmäßig auf der Tagesordnung.

Von Zeit zu Zeit veranstalten wir Benutzertests, um zu erfahren, wie Menschen mit Behinderungen beliebte Apps, Websites und digitale Produkte nutzen, an denen wir gearbeitet haben. Es liegt etwas außerhalb der Komfortzone, aber es öffnet die Augen und ist auf jeden Fall die Investition wert.

Am 7. Juni schließen wir uns mit unseren Kollegen von Leap Forward zusammen und führen einen inklusiven Design-Hackaton durch. An einem Tag werden wir Konzepte erstellen, um die tatsächlichen Herausforderungen zu lösen, mit denen die Stadt Gent konfrontiert ist. Bleiben Sie über unseren Medium-Blog in Kontakt, um von unseren Erfahrungen zu lernen und ein Zeichen für inklusives Design zu setzen!