Yahoo! User Interface Blog (YUIBlog)

Direkte Suche machen Accessible

8. August 2011 um 21.44 Uhr durch Caridy Patino | In Barrierefreiheit , Entwicklung | 6 Kommentare

Vor ein paar Monaten starteten wir die erste Beta-Version von Search Direct. Dieses neue Produkt untersucht das Konzept der Echtzeit-Feedback, sofort liefert Antworten auf die Anwender mit jedem Tastendruck. Angesichts der Vielfalt der Yahoo! 's Publikum, wollten wir machen Suchen Direktflüge so zugänglich wie möglich. Anfangs glaubten wir, dass dies eine leichte Aufgabe sein, da dieses Produkt auf YUI 3, eine JavaScript-Bibliothek mit Zugang in seine DNA gebacken basieren würde. Entgegen meinen Erwartungen als Ingenieur, wandte sich diese Aufgabe als schwieriger als erwartet.

Einführung Suchen Direktflüge

Obwohl direkte Suche wird von Grund auf mit YUI die Komponente Infrastruktur aufgebaut, wird am deutlichsten sichtbar wird seine prominenten Schnittstelle auf der Basis von YUI AutoVervollständigen-Widget , das viele Eingabehilfen direkt aus der Box enthält. Anregungen zu einer bestimmten Abfrage werden in diesem autocomplete Umsetzung angezeigt. Direkte Suche auch über einen Content-Panel, auch bekannt als die reiche Tafel, wo Vorschlag im Zusammenhang mit Inhalt angezeigt wird. Die Absicht der reichen Tafel ist es, eine direkte Antwort auf den Benutzer, wenn ein Vorschlag aus der AutoVervollständigen-Liste ausgewählt wird.

Eine neue Reihe von Vorschlägen wird in der Liste auf jeden Tastendruck angezeigt, und der erste Vorschlag ist standardmäßig ausgewählt. Diese Standard-Auswahl wird eine weiche Auswahl genannt. Weiche Auswahlen und nachfolgenden Interaktionen mit der Vorschlagsliste diktieren den Inhalt, der in die reiche Tafel wiedergegeben wird. In Wirklichkeit sind die Dinge ein wenig komplizierter (Performance-Optimierungen, zusätzliche Cache-Schichten, etc.), sondern für die der Einfachheit halber können wir davon ausgehen, dass dies der gängigen Workflow ist.

Eingabehilfen

Auf der Suche nach was suchen Direkte zugänglich, schauten wir uns die Durchführung der Such-Assistent, eine Technologie, dass Yahoo! ein paar Jahre Pionierarbeit zurück, ebenso wie die einheimischen Eingabehilfen von YUI.

Nach dieser Untersuchung wurden drei primäre Eingabehilfen für Suchen Direktflüge vorgeschlagen:

• Mit dem YUI Internationalisierung Dienstprogramm zur lokalisierten Inhalten dienen.
• Einstellen role und aria-* Attribute auf Elemente der Autocomplete-Widget, das identifiziert und von einem Screen Reader verarbeitet werden müssen.
• Mit einem versteckten div , die eine Live-Region repräsentiert ( aria-live ), um den Benutzer benachrichtigen, wenn etwas passiert. ZB ist die Anzahl der verfügbaren Vorschläge, die ausgewählte Vorschlag, usw.

Der Plan war, den Nutzer über Änderungen in der Suche Direkte Schnittstelle zu benachrichtigen, und bieten eine Reihe von Tastenkombinationen, um die folgenden visuellen Komponenten zu navigieren:

• Suchfeld
• Submit-Button
• Vorschlagsliste
• Rich-Panel

Klingt wie ein Kinderspiel, oder? Nun, lassen Sie uns einen Schritt zurück.

Das Problem

Was wir hier haben sind zwei asynchrone Prozesse - einer von ihnen für die Aktualisierung der Vorschlag Satz und das andere für das Abrufen von entsprechenden Antworten - und sie sind beide wirklich schnell. Wir reden über 250ms Ende zu Ende reden. Da die Schnittstelle an einem solchen rasanten Tempo verändert, die Verfolgung der alles sein kann für einen Screenreader Nutzer schwierig. Es wird eine Größenordnung komplizierter, wenn Updates geschehen in einem asynchronen, nahezu in Echtzeit Weise. Da der Screen-Reader wurde von jeder Änderung in der Schnittstelle mitgeteilt wird, hat die resultierende Geschwätz es schwierig zu verstehen, was los war zu machen.

In Ermangelung einer akzeptablen Lösung, begannen wir die Zusammenarbeit mit Yahoo! 's Resident Zugänglichkeit Guru, Victor Tsaran ( @ vick08 ) zu versuchen und sich etwas einfallen besser.

Das erste Mal sahen wir uns mit Victor Suchen Direktflüge interagieren, es war mir sofort klar, dass eine Mehrheit der seinen Fokus auf die reiche Tafel statt der Vorschlagsliste war. Das war eine Überraschung für mich, wie wir die Liste angesehen als die "Quelle der Wahrheit". Während einer unserer Sitzungen hatten wir ein Glücksfall, wenn wir an all die Eingabehilfen von der Liste zu deaktivieren passiert. Sobald der Lärm von der Liste eingeführt geschnitten wurde, begann Suche Direkt zum Sinn, Victor zu machen!

Wie Nutzer von Screenreadern wahrnehmen Suchen Direktflüge

Nach der Realisierung, dass wir versuchten, das falsche Problem zu lösen, gingen wir wieder auf den ursprünglichen Benutzer Geschichte: "Als Benutzer kann ich eine Antwort bekommen, als ich geben". Anreise über die Antwort an den Benutzer war die Priorität. Nach Neudefinition des Problems, konzentrierten wir unsere Bemühungen auf die Zugänglichkeit einer Implementierung, bei der Screenreader priorisiert die reiche Tafel Inhalte über das Vorschlagsliste.

Zum Beispiel, wenn der Benutzer "miami wea" , wird der Screen-Reader sage ihnen zwei Dinge:

• 10 Tipps.
• Wetter Miami, FL. HEUTE, Gewitter, 89 ° F 77 ° F. MORGEN, Vereinzelte Gewitter, 90 ° F 74 ° F ...

Es wird dann weiterhin das Auslesen der Rest der Platte reichen Inhalt. Der Anwender muss nicht alle 10 Vorschläge im Vorfeld wissen, jedes Mal, wenn die Liste aktualisiert. Wenn sie wissen wollen, sind die Informationen leicht zugänglich über die Navigation per Tastatur.

Um sicherzustellen, dass die Vorschlagsliste ist die Wertsteigerung der Erfahrung stellen wir sicher, dass der erste Satz in der reichen Tafel ist eng mit dem entsprechenden Vorschlag im Zusammenhang. Zum Beispiel, basierend auf dem vorherigen Beispiel "weather miami" ist der erste Satz in der reichen Tafel für den Vorschlag: "Miami Wetter".

Victor Tsaran, der Yahoo! Accessibility Lab, zeigt, wie es auf Firefox funktioniert mit dem NVDA Screenreader:

Der Screenreader Erfahrung für unsere Anwendung ist einfacher zu folgen, da wir erst jetzt auf den beiden folgenden visuellen Komponenten konzentrieren:

• Suchfeld
• Rich-Panel

Änderungen an der AutoVervollständigen-Liste als Ganzes werden nicht mehr verfolgt, und der Submit-Button wird ignoriert, da der Benutzer immer schlagen können für die aktuelle Abfrage eingeben oder eine Tastenkombination (Tilda Zugriffstaste: [control, alt or shift] + ~ ) um zwischen dem Eingang und dem reich-Panel wechseln. Diese Tastatur-Navigation Optionen werden für den Benutzer, wenn das Suchfeld durch den Screenreader anerkannt wird enthüllt.

Aus technischer Sicht, diese Änderung stark Dinge vereinfacht. Die Höhe der DOM-Manipulation in der aktivste Komponente wurde drastisch reduziert, die Verbesserung der Gesamtleistung der Suche Direct. Hier ist ein Beispiel für die Umsetzung:

 Funktion SDAAria () {
     var node = this._liveRegion = Y.Node.create ('<div role="status" class="off-screen" aria-live="assertive"> </ div>');
     / / Erstellen des ARIA Live-Region ...
     Y.one ('body') append (Knoten).;
     / / Hören für Arie: Live-Nachrichten, um den Live-Region aktualisieren
     this.on ('Arie: live', this._handlerMsg, this);
     / / Hören für Klatsch: Aktualisieren, um wie viele Vorschläge bekannt geben
     this.on ('Gossip: refresh', this._handleGossipRefresh, this);
 }
 SDAAria.ATTRS = {
      Streicher: {
          valueFn: function () {
              zurück Y.Intl.get ('sd-Arie');
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay: function (stringID, subs) {
         var message = this.get ("Strings". + stringID) | |'';
         this._liveRegion.setContent (? subs Y.Lang.sub (Nachricht, subs): message);
     },
     _handlerMsg: function (e) {
         wenn (e.id) {
             this._ariaSay (e.id, e.subs);
         }
     },
     _handleGossipRefresh: function () {
         var size = this.get ('Vorschläge') size ().;
         this._ariaSay ((size> 0 'Vorschläge':? 'NO_SUGGESTIONS'), {
             n: Größe
         });
     }
 };

Lessons learned

Bei der Erstellung einer Schnittstelle zugänglich, ist es wichtig, die richtigen Fragen zu stellen. So dass jedes Bit Ihrer Anwendung zugänglich möglicherweise nicht der richtige Ansatz zu sein.

Fordern Sie frühzeitig Rückmeldungen von Benutzern von Screenreadern - nicht davon ausgehen, dass Sie Ihre Basen bedeckt, bis Sie einen Benutzer-Feedback zu bekommen. Mit Hilfe jedes Werkzeug und Funktion zu Ihrer Verfügung haben nicht die beabsichtigte Wirkung.

Nutzer von Screenreadern können Schwierigkeiten haben, die Verfolgung von Echtzeit-Updates, vor allem, wenn Screen-Reader mit Meldungen bombardiert werden. In diesen Szenarien kann weniger mehr sein. Identifizieren und konzentrieren, was für den Anwender anstatt zu versuchen, die rohen Erfahrungen mit der Anwendung für den Screenreader replizieren wichtig.

Über den Autor: Caridy Patiño, Principal Frontend für Yahoo! Search Direct. Er war ein langjähriger YUI Contributor und Schöpfer von YUI-Bibliothek Sprudelnde Extension, sowie Gast-Blogger bei YUIBlog.com teilen einige seiner umfangreichen Erfahrung im Aufbau Hochleistungs-Web-Anwendungen. Lädt Strategien, ereignisgesteuerte Architekturen und SSJS sind einige der Themen, bei denen Caridy verbringt die meiste seiner Zeit in diesen Tagen.

Finden Gespräche: Bloglines | technorati

Teilen und zu erweitern: Lesezeichen mit del.icio.us | Digg it! | reddit!