Barrierefreies UI-Design fördern

Barrierefreiheit ist heutzutage ein wichtiges Thema, und je älter wir als Webgestalter werden, desto wichtiger wird es! Das mag zynisch klingen, aber was ich sagen möchte ist, dass es an der Zeit ist, dass wir anfangen, das Web für alle zu gestalten, denn das Web war für alle gedacht, und immer weniger können wir vorhersagen, wo, wann und wie unsere Arbeit konsumiert wird.

Barrierefreiheit liegt nicht nur bei Entwicklern

Als Entwickler stoßen wir oft auf Barrierefreiheit nach dem Design, wenn wir Dinge tun wie die Implementierung der richtigen role und aria Attribute, sicherstellen, dass die Navigation per Tastatur funktioniert, und Elemente verantwortungsvoll ausblenden. Im Allgemeinen konzentrieren sich unsere Bemühungen zur Barrierefreiheit darauf, wie wir spezifische Komponenten und Funktionen barrierefrei gestalten können, wie z. B. ein SVG-Iconsystem oder hilfreiche Tooltips.

Angesichts unserer Rolle als Entwickler ist das sinnvoll. Mängel bei der Barrierefreiheit entstehen jedoch oft im UI-Design selbst, und je nach unserer Arbeitsumgebung haben wir Entwickler nicht unbedingt die Autorität oder die Bandbreite, um uns für Barrierefreiheit in den Designs einzusetzen, die uns übergeben werden.

Nehmen wir zum Beispiel an, Sie erhalten die Aufgabe, eine Sketch-Datei in eine einseitige WordPress-Seite umzuwandeln.

Das Design wurde endlich vom Kunden abgenommen, und nun haben Sie ein Wochenende Zeit, das Ding zu bauen, plus weitere zwei Tage, um es mit der Qualitätssicherung zu perfektionieren. Wenn Sie sich das Design zum ersten Mal ansehen, stellen Sie fest, dass auf kleinen Geräten die zierliche Serifenschrift über einem Hintergrundbild für sehbehinderte Besucher schwer zu lesen wäre.

Sie, der barrierefreiheitsbewusste Entwickler, könnten auf verschiedene Weise vorgehen

1. Bleiben Sie still und befriedigen Sie Ihr Gewissen in Bezug auf Barrierefreiheit, indem Sie dort, wo Sie können, barrierefreie Entscheidungen im Code treffen
2. Gehen Sie fort und nehmen Sie Verbesserungen der Barrierefreiheit am UI vor, während Sie entwickeln, präsentieren Sie sie im fertigen Produkt und erklären Sie sich danach
3. Erstellen Sie eine Liste mit Änderungsvorschlägen, um sie dem Designer zu schicken und darum zu bitten, dass sie in den Mockups implementiert werden, damit Sie sie dann entwickeln können

Ich war kürzlich in einer solchen Situation und, verurteilen Sie mich, wenn Sie wollen, ich habe mich für Nummer eins entschieden.

Hätte ich die Zeit und den Mut gehabt, hätte Nummer 2 mich am weitesten gebracht, aber angesichts der Natur meiner Rolle als erstmaliger Auftragnehmer bei dieser schnelllebigen Agentur, mit der ich eine Arbeitsbeziehung aufbauen wollte, hatte ich das Gefühl, dass ich meine Befugnisse überschreiten würde und war noch nicht bereit, das Risiko einzugehen, am Anfang zu laut zu sein. Ich habe mich aus ähnlichen Gründen gegen Nummer 3 entschieden, hauptsächlich aus Angst, dem bereits extrem beschäftigten Designer mehr Arbeit und Stress zu verursachen.

Jetzt, wo ich die Erfahrung der Vergangenheit habe, darf ich der Liste vielleicht noch einen vierten Punkt hinzufügen?

4. Senden Sie eine prägnante Liste mit nicht-technischen Tipps zur Barrierefreiheit für UI-Design an alle im Team, damit diese in Zukunft barrierefreiere Designentscheidungen treffen

Wo findet man eine solche Liste? Nun, Sie haben Glück! Lesen Sie weiter!

Nicht-technische Tipps zur Barrierefreiheit für UI-Design

Es folgt eine Liste von einfachen, jargonfreien „Tipps zur Barrierefreiheit für UI-Design“, die Sie als Entwickler mit allen im Unternehmen teilen können: UI-Designer, Content-Anbieter, Projektmanager und Kunden gleichermaßen. Je mehr wir das Bewusstsein für Barrierefreiheit schärfen und kritisch über die uns zur Implementierung vorgelegten Mockups nachdenken, desto barrierefreier wird das Web sein!

Ich habe die untenstehenden Beispiele aus verschiedenen trendigen Website Feeds ausgewählt und die fantastische Funkify Chrome Extension verwendet, um das Nutzererlebnis von Website-Besuchern mit unterschiedlichen Fähigkeiten und Behinderungen zu simulieren.

Zuerst

Sparsam mit Animationen.

Mit großer Macht kommt große Verantwortung. Das moderne Web gibt uns die Macht, Inhalte nach Belieben einfliegen, hereinzoomen oder herunterfallen zu lassen, aber abgesehen vom Wow-Faktor, wie tragen diese Animationen zum Leseerlebnis auf Ihrer Website bei? Wie werden die Animationen ausgelöst? Können sie versehentlich ausgelöst werden und einen verwirrenden Ruck im Fluss des Besuchererlebnisses verursachen?

Nehmen Sie dieses Beispiel einer Website für Autoreparaturen. Ich habe den "Elderly Ellen"-Filter von Funkify angewendet, um leicht verschwommenes Sehen und zittrige Hände zu simulieren

Wenn ich Ellen wäre, würde dieses Erlebnis mich wahrscheinlich von den Dienstleistungen von Service King abhalten! Jemand wie Elderly Ellen ist ständig frustriert von Technologie. Es ist unnötig, ihr diesen Stress zu bereiten, wenn sie versucht, etwas über die Reparatur ihres Autos nach einem bereits traumatischen Auffahrunfall zu lesen.

Stellen Sie sicher, dass Hintergrund- und Textfarben ausreichend Kontrast haben.

Obwohl dieser mittelgraue Text auf dem hellgrauen Hintergrund genau richtig aussieht, ist er schwer zu lesen... und unmöglich zu lesen, wenn man draußen in der Sonne arbeitet (keine häufige Situation, aber ich habe es schon einmal getan). Hier ist ein Beispiel des oben genannten Grau-auf-Grau-Szenarios

Und jetzt, das gleiche Beispiel, das vom "Sunshine Sue"-Filter von Funkify betroffen ist, lässt unsere kontrastarmen Bildunterschriften einfach unsichtbar erscheinen!

Die Lösung? Führen Sie Ihre Farbauswahl durch den WebAIM-Kontrastprüfer, um zu sehen, ob sie die Standards für Lesbarkeit und Farbkontrast erfüllen. Wenn nicht, passen Sie die Farbwerte an, bis sie es tun.

Die Funkify-Erweiterung kann verwendet werden, um *alles* zu testen, was in einem Browser sichtbar ist. Selbst wenn ein Design-Mockup noch nicht in Code umgesetzt ist, kann ein Bild oder PDF im Browser geöffnet werden und die Erweiterung funktioniert trotzdem!

Seien Sie sehr vorsichtig, wenn Sie Text über Bilder legen, oder lassen Sie es sein.

Es mag genau richtig aussehen, die zierliche Serifenschrift über dem großen Header-Bild zu haben, aber können Sie sie lesen, wenn Sie Ihre Sicht leicht verschwimmen lassen? Wenn nicht, erhöhen Sie den Kontrast zwischen Text und Bild, vielleicht indem Sie die Textfarbe aufhellen und die Transparenz des Bildes auf einem dunklen Hintergrund erhöhen.

Auf der Website von Burberry muss der Benutzer beispielsweise aus einem Dropdown auswählen, um die Website aufzurufen. Der Text, der das Dropdown identifiziert, ist jedoch kaum lesbar über dem Hintergrundbild. Es gibt viele Möglichkeiten, dies aus Designperspektive zu lösen, aber als schnelles Beispiel könnten wir einen dunklen Hintergrund unter den hellen Text legen, um etwas mehr Kontrast zu schaffen

Ähnlich verhält es sich mit dem filigranen beschreibenden Text unter dem Bild auf Teslas neuer Semi-Website. Er ist filigran und schön, aber kaum lesbar, wenn man die Sicht mit "Blurry Bianca" leicht verschwimmen lässt

Überprüfen Sie die Lesbarkeit von Schriftstärken und -größen.

Je dünner die Schriftstärke und je kleiner die Größe, desto schwerer ist sie zu lesen. Selbst ich, als hörender, gut sehender Mensch, ertappe mich manchmal dabei, den Haupttext zu vergrößern, weil er so verdammt leicht und klein ist, auch wenn der Farbkontrast stimmt. Wenn Sie bei der leichten Schrift bleiben müssen, können die Erhöhung der Größe und des Zeilenabstands Wunder wirken.

Ich frage mich gerne: Besteht er den leicht schielenden Test? Das heißt, wenn ich leicht schiele, kann ich den Text immer noch erkennen?

Externe Links kennzeichnen.

Wenn es eine Anforderung ist, dass ein Link in einem neuen Tab geöffnet wird, hinterfragen Sie zuerst, ob dies eine Anforderung sein *sollte*, und kennzeichnen Sie es dann visuell mit einem kleinen Symbol oder Hinweis in der Benutzeroberfläche.

Zusätzlich können Designer in ihren Designs eine Notiz machen, wo bildschirmleserfreundlicher Text eingefügt werden sollte, der darauf hinweist, dass der Link den Benutzer von seinem aktuellen Ansichtsfenster wegführt. Dies kam mir durch einige ausgezeichnete Antworten auf eine Twitter-Konversation in den Sinn; lesen Sie sie hier.

Differenzieren Sie zwischen aktionsorientierten Social-Media-Links und Profil-Links.

Wenn wir kleine Social-Media-Icons sehen, gehe ich davon aus, dass sie zu den entsprechenden Social-Media-Profilen *verlinken*. Manchmal sind diese Icons jedoch tatsächlich *Aktionen*, die anstatt zu einem Profil zu verlinken, einen "New Tweet"-Dialog oder ähnliches öffnen. Diese Aktionen sollten als solche gekennzeichnet werden.

Verlassen Sie sich nicht zu 100 % auf Symbole und Farben zur Kommunikation.

Es ist leicht anzunehmen, dass jeder weiß, dass ein Hamburger-Symbol ein Menü anzeigt oder dass jeder mit den verschiedenen Versionen des LinkedIn-Icons vertraut ist. Das ist jedoch nicht der Fall und verursacht einen Moment der Verwirrung und Beleidigung, der für weniger informierte Website-Besucher nicht notwendig ist. Besonders wenn Ihr Publikum eher älter und/oder weniger technikaffin ist, stellen Sie sicher, dass Sie sich nicht auf vermeintliches Allgemeinwissen verlassen.

Die Abhängigkeit von Farben zur Bedeutung verursacht ein ähnliches Problem, und noch mehr für Benutzer, die von Farbenblindheit betroffen sind. Ein kürzlicher Artikel von Smashing Magazine behandelt dieses Problem im Detail und verwendet das Beispiel eines Farbwählers auf einer Schuhverkaufs-Website, der für farbenblinde Benutzer zu einer ganz anderen Palette führt.

Wie würde das Design ohne Interaktivität aussehen?

Wenn ein Benutzer nur scrollen könnte, macht der Inhalt dann noch Sinn? Gibt es Bereiche, in denen die Bildunterschrift anstelle des Ausblendens unter einem schicken Hover-Effekt einfach sichtbar sein könnte? Was ist mit Touchscreens, wo Hover-Effekte ganz anders behandelt werden?

Was noch?

Sind Ihnen Probleme mit der Barrierefreiheit bei Designs aufgefallen, die Sie implementiert haben? Wie sind Sie damit umgegangen? Welche anderen Tipps können wir Designern und Produzenten für die Erstellung barrierefreierer UI-Designs geben?

Der erste Schritt zur Förderung des barrierefreien UI-Designs ist, einfach zweimal darüber nachzudenken, was Sie als Entwickler implementieren sollen. Versuchen Sie beim Codieren eines Designs, einige dieser Funkify-Filter anzuwenden und sehen Sie, welche Ergebnisse sie liefern. Denken Sie kritisch über die Designs nach, die Ihnen vorgelegt werden, und starten Sie eine Unterhaltung mit Ihren Kollegen.