Wie wir die Barrierefreiheit als Designwerkzeug nutzten

Anlässlich des Global Accessibility Awareness Day teilen wir mit, wie Yellos Produkt- und Engineeringfokus auf Barrierefreiheit zu einer Neugestaltung unseres Application Site Headers geführt hat.

Blick aus dem Büro von Yello Chicago

Wir bei Yello entwickeln Software, mit der unsere Kunden die besten Talente für ihre Organisationen finden und mit ihnen in Kontakt treten können. Ein wesentlicher Teil davon ist, dass Kandidaten und Personalvermittler mit unterschiedlichem Hintergrund ihr Interesse erfolgreich vermitteln und am Einstellungsprozess teilnehmen können.

Wir haben den Unternehmenswert, "das zu tun, was für den Kunden richtig ist", den wir täglich in unsere Arbeit einfließen lassen. Es hilft uns, bessere Entscheidungen zu treffen, und kürzlich hat es uns geholfen, uns für Barrierefreiheit einzusetzen.

Warum barrierefrei gestalten?

(Tldr; erstens ist es das Richtige und zweitens das Gesetz.)

Für diejenigen, die mit der Barrierefreiheit nicht vertraut sind, ist unten eine kurze Geschichte.

Zugänglichkeit bezieht sich auf das Merkmal, dass Produkte, Dienstleistungen und Einrichtungen von Menschen mit einer Vielzahl von Behinderungen unabhängig voneinander genutzt werden können.

Barrierefreiheit als Designanliegen wurde immer wichtiger, als 1990 das Gesetz über Amerikaner mit Behinderungen (ADA) verabschiedet wurde.

Dann wurde 1998 eine Änderung von Section 508 des Rehabilitationsgesetzes von 1973 verabschiedet, die vorschrieb, Zugänglichkeitsstandards für Software, Websites und andere Informationstechnologien zu erstellen. Während diese Standards für US-Bundesbehörden galten, wurden sie auch von vielen anderen Institutionen und Organisationen übernommen.

Laut Daten, die 2012 vom Census Bureau veröffentlicht wurden, haben 18,7% der US-Bevölkerung, über 56 Millionen Menschen, irgendeine Art von Behinderung. Dies schließt geschätzte 8,2% ein, die Schwierigkeiten beim Heben oder Greifen haben, was ihre Fähigkeit zur Verwendung einer Maus oder Tastatur beeinträchtigen könnte. Außerdem haben geschätzte 3,3% der Amerikaner eine Sehbehinderung und sind möglicherweise auf eine Bildschirmlupe, einen Bildschirmleser oder eine Form der Farbenblindheit angewiesen.

Aus diesen Zahlen geht hervor, dass unsere Kunden wahrscheinlich auf unterschiedliche Weise mit unserer Anwendung interagieren und dass wir unabhängig davon eine konsistente und verständliche Erfahrung sicherstellen müssen. Damit wir das tun, was für den Kunden richtig ist, müssen wir alle unsere Kunden berücksichtigen und unterstützen.

Anfang letzten Jahres haben die Produkt-, Design- und Entwicklungsteams von Yello eine Barrierefreiheitsinitiative ins Leben gerufen: Jede neue Komponente oder Funktion, die wir entwerfen und bauen, erfüllt die Standards der WCAG-Konformitätsstufe AA und Section 508.

Wo wir angefangen haben

Unsere Barrierefreiheitsinitiative hat festgestellt, dass auf jede neue Komponente zugegriffen werden kann. Wie gehen wir jedoch mit vorhandenen Komponenten um? Das Erreichen der Stufe AA ist ein großes Unterfangen, daher mussten wir irgendwo anfangen. Wir haben unseren Header der Anwendungssite aus folgenden Gründen als Ausgangspunkt gewählt:

  1. Wenn Sie unterstützende Technologie wie einen Screenreader verwenden, ist der Site-Header Ihr Einstiegspunkt in unsere Anwendung.
  2. Es befindet sich auf jeder einzelnen Seite unserer Anwendung, sodass alle Benutzer davon profitieren.

Gleichzeitig haben wir Nutzungsdaten in Google Analytics überwacht und festgestellt, dass 30 bis 40 Prozent unseres Datenverkehrs von Smartphones stammen. Dies hat uns ermutigt, reaktionsschnelles Design und erste Mobiltechniken für die neuesten Funktionen unserer Anwendung zu nutzen. Kurz gesagt, unser aktueller Site-Header, der nur für Desktops oder große Bildschirme funktioniert, funktioniert nicht für Benutzer, die versuchen, Geräte mit kleineren Bildschirmen zu verwenden.

Unser vorheriger Site-Header reagiert auf die Größenänderung des Browsers.

Entscheiden, welche Änderungen vorgenommen werden sollen

Wir kannten einige der Punkte, die wir korrigieren mussten - der Farbkontrast war nicht im empfohlenen Verhältnis von 4,5: 1, die Tastaturzugänglichkeit und die Textgröße, um nur einige zu nennen. Von dort aus haben wir eine Barrierefreiheitsprüfung durchgeführt, um Einzelheiten zu ermitteln. Einige davon waren:

  • Schaltflächen und Symbolverknüpfungen benötigen Beschreibungen
  • Unser Suchfeld benötigte eine Beschriftung für Screenreader, da der Platzhaltertext normalerweise übersprungen wird
  • Platzhaltertext in unserer Suchleiste überschneidet sich mit anderen Inhalten auf kleineren Bildschirmen
  • Benutzer konnten nicht mit einer Tastatur auf alle Links in der Kopfzeile zugreifen, und die Tab-Reihenfolge entsprach nicht den Erwartungen

Da der Site-Header auf jeder Seite verwendet wird, war uns bekannt, dass Änderungen daran jeden Benutzer betreffen würden. Wir wollten das Risiko minimieren, indem wir uns so wenig wie möglich ändern und gleichzeitig unsere Ziele in Bezug auf Zugänglichkeit und Reaktionsfähigkeit erreichen. Die erste Version dieses Redesigns hatte minimale Änderungen. Wir haben Farben, Abstände, Arienrollen und Beschreibungen aktualisiert, aber als wir damit begannen, entdeckten wir ein paar weitere Probleme.

Ursprünglicher Site-HeaderDesign nach anfänglicher Barrierefreiheit

Ch-ch-ch-Änderungen

Responsive Modals, Fly-outs und Suche, oh mein Gott!

Unsere Site-Kopfzeile enthält mehrere Navigationslinks zu wichtigen Teilen unserer Anwendung. Daher mussten wir eine Möglichkeit finden, diese auf kleinen Bildschirmen anzuzeigen, ohne dass nur wenig Platz auf dem Bildschirm vorhanden ist. Wir haben uns für ein allgemeines Muster entschieden, das als „Flyout-Menü“ bezeichnet wird und in dem Navigationslinks angezeigt werden, wenn ein Benutzer auf die Menüschaltfläche klickt.

Navigationslinks im Flyout-Menü auf einem kleinen Bildschirm

Ebenso haben wir eine Schaltfläche in unserer Kopfzeile, über die Benutzer Unternehmensalarme oder -ankündigungen anzeigen können. Diese Nachricht wird modal angezeigt. Leider hatten wir keine zugänglichen oder reaktionsfähigen Modal- oder Flyout-Komponenten.

Vorwärts und aufwärts

Der Zweck eines Überlagerungselements (wie eines Flyouts oder Modals) besteht darin, einen vom Rest der Seite getrennten Kontext zu erstellen, damit sich ein Benutzer auf eine bestimmte Aufgabe oder Information konzentrieren kann.

Zu diesem Zweck sollte ein Overlay eine „Fokusfalle“ erstellen. Wie im Flyout-GIF oben dargestellt, sollte der Fokus eines Benutzers niemals auf der Tastatur liegen, wenn er durch „fokussierbare“ Elemente (interaktive Elemente wie Links oder Schaltflächen) navigiert Lass das Overlay. Stattdessen durchläuft es jedes der Elemente im Flyout oder Modal, bis der Benutzer das Flyout beendet.

Homepage-Nachricht reagiert auf die Größe des Browsers.

Bei der Entwicklung neuer reaktionsschneller Flyout- und Modal-Komponenten haben wir alle wichtigen Richtlinien zur Barrierefreiheit eingehalten. Dazu gehören unter anderem:

  • Erstellen Sie eine Fokusfalle, damit der Benutzer den Fokus nicht verlässt, bis er dies ausdrücklich wählt.
  • Schließen Sie das Overlay-Element, indem Sie die Escape-Taste auf der Tastatur drücken.

Von der Suchleiste zum Suchsymbol

Dies war eine schwierige Frage. Wir wissen, dass viele unserer Kunden und internen Benutzer bei Yello diese Suchleiste, die wir OmniSearch nennen, häufig nutzen. Einige verwenden es, um schnell eine bestimmte Person zu finden, während andere es verwenden, um zu einem bestimmten Ereignis oder einer bestimmten Stellenanzeige zu navigieren. Wir sind uns darüber im Klaren, dass sich eine Änderung auf viele unserer Benutzer auswirken kann. Daher nehmen wir die Änderung nicht leicht.

Die Entscheidung, dies zu aktualisieren, kam von einigen Stellen. Das Feedback unserer Kundenerfolgsmanager hat ergeben, dass zwei markante Suchleisten, eine in der Kopfzeile und eine darunter auf der Seite selbst, die Kunden verwirren.

Suchbalken duellieren. Site-Header-Suche über Kandidatensuche.

Wir möchten auch die Erfahrung von Mobilgeräten auf Desktops vereinheitlichen. Unser kleines Bildschirmdesign hat ein Suchsymbol, das beim Antippen zu einer vollständigen Seite führt. Einer unserer Front-End-Ingenieure wies darauf hin, dass es einfacher wäre zu bauen, wenn wir das gleiche Verhalten auf größeren Bildschirmen beibehalten würden. Wir diskutierten dies als Team und stellten fest, dass die Erfahrung dazu beitragen könnte, die Kundenverwirrung zu beseitigen, dass zwei Suchleisten auf Seiten vorhanden sind.

Bei der Recherche nach Entwurfsmustern für die Suche haben wir festgestellt, dass das Lupensymbol eines der wenigen universellen Symbole auf dem Markt ist. Dies gab uns die Gewissheit, die Eingaben zu entfernen, da Benutzer diese Schaltfläche als Suchfunktion kennen oder schnell erkennen würden.

OmniSearch modal auf kleinem Bildschirm.OmniSearch modal auf großem Bildschirm.

Da OmniSearch jetzt unsere reaktionsschnelle und zugängliche modale Komponente verwendet, ist die Suchfunktion für alle Bildschirmgrößen gleich. Auf größeren Bildschirmen haben wir Tipps für die Tastaturnavigation hinzugefügt, um den Benutzern mitzuteilen, dass sie ihre Suchergebnisse mit der Pfeiltaste durchsuchen, eine mit der Eingabetaste auswählen oder das Modal mit der Escape-Taste schließen können.

Wenn Sie die Sucheingabe entfernen und sich auf das Suchsymbol verlassen, haben Sie Platz in der Mitte der Kopfzeile geschaffen und die Hauptnavigation hervorgehoben und leichter lesbar gemacht.

Erfolg bestimmen: Wann sind wir fertig?

Zu Beginn dieses Projekts haben wir uns als Team (Produktmanager, Designer und Front-End-Ingenieur) darauf geeinigt, dass unsere Ziele Zugänglichkeit und Reaktionsfähigkeit sind. Sobald wir also alle Punkte in der Barrierefreiheitsprüfung angesprochen haben und eine reaktionsfähige Kopfzeile und Navigation hatten, wären wir genug getan, um sie freizugeben.

Neuer Site-Header, der auf die Browsergröße reagiert.

Unser Farbkontrastverhältnis für Links und Schaltflächen beträgt jetzt 9,51: 1. Alle Links und Inhalte sind unabhängig von der Bildschirmgröße zugänglich.

Was kommt als nächstes?

Gegenwärtig sammeln wir Feedback zum neuen Design und leiten es an die Benutzer weiter, um sicherzustellen, dass es den Bedürfnissen aller gerecht wird. Sobald wir dieses Update veröffentlichen, können wir noch mehr tun, um die Barrierefreiheit zu verbessern, z.

Dieses Update schafft die Voraussetzungen für zukünftige Verbesserungen unserer Suchfunktionen und ermöglicht reaktionsschnellere Seiten. Wir rechnen damit, aus dem Feedback der Benutzer zu lernen und es auch in zukünftige Designiterationen zu integrieren.

Wir hoffen, bald mehr mit Ihnen zu teilen!

Einige hilfreiche Ressourcen und Artikel

WebAIM-Farbkontrastprüfung

Einführung in ARIA-Labels

Zugänglichkeit vor Ästhetik

Beispiel für einen barrierefreien modalen Dialog

Vielen Dank, dass Sie gelesen haben, wie die Barrierefreiheit zu einem besseren Design für alle unsere Benutzer geführt hat! Ich bin Stephanie, eine Designerin bei Yello. Wenn Sie mit unserem Team an solchen Projekten arbeiten möchten, stellen wir Designer und Ingenieure ein. Auf unserer Karriereseite erfahren Sie mehr über die Arbeit bei Yello.

Besonderer Dank geht an Tom Benneche, Luke Skertich und Ashley Collins für ihre Hilfe, ihr Feedback und die GIF-Erstellung beim Schreiben dieses Beitrags.