Yahoo! interfaz de usuario de blog (YUIBlog)

Hacer la búsqueda de acceso directo

08 de agosto 2011 a las 9:44 pm por Caridy Patiño | En Accesibilidad , Desarrollo | 1 comentario

Hace unos meses pusimos en marcha la primera versión beta de búsqueda directa. Este nuevo producto explora el concepto de información en tiempo real, al instante la entrega de respuestas para el usuario con cada golpe de teclado. Dada la diversidad de la audiencia de Yahoo! 's, hemos querido hacer la búsqueda directa de lo más accesible posible. Inicialmente, se creía que esto sería una tarea fácil ya que este producto se basará en tres YUI, una biblioteca de JavaScript con la accesibilidad al horno en su ADN. Contrario a mis expectativas como ingeniero, esta tarea resultó ser más difícil de lo que esperábamos.

La introducción de búsqueda directa

A pesar de búsqueda directa se construye desde la base utilizando la infraestructura de YUI componente, su interfaz más visiblemente prominente se basa en el widget de YUI Autocompletar que incluye muchas características de accesibilidad a la derecha de la caja. Sugerencias en relación con una consulta en particular se muestran en esta implementación de autocompletado. La búsqueda directa también cuenta con un panel de contenido, también conocido como el panel de ricos, donde se muestra el contenido sugerencia relacionada. La intención del panel de rica es proporcionar una respuesta directa al usuario cuando una sugerencia de la lista de autocompletado seleccionada.

Un nuevo conjunto de sugerencias se muestra en la lista en cada golpe de teclado, y la primera sugerencia es seleccionada por defecto. Esta selección por defecto se llama una selección blanda. Selecciones suaves y las interacciones posteriores, con la lista de sugerencias dictar el contenido que se representa en el panel de rica. En realidad, las cosas son un poco más complicado (optimizaciones de rendimiento, las capas adicionales de memoria caché, etc), pero en aras de la simplicidad, podemos asumir que este es el flujo de trabajo común.

Las características de accesibilidad

En la búsqueda de hacer la búsqueda de acceso directo, nos fijamos en la aplicación de la Asistente de búsqueda, una tecnología que Yahoo fue pionero hace unos años, así como las características de accesibilidad nativas de YUI.

Después de esta investigación, tres características de accesibilidad principales fueron propuestos para la búsqueda directa:

• Uso de la utilidad de internacionalización YUI para servir el contenido localizado.
• Establecer role y aria-* atributos de los elementos en el widget de autocompletado, que deben ser identificados y procesados ​​por los lectores de pantalla.
• El uso de un oculto div que representa una región en vivo ( aria-live ) para notificar al usuario cuando ocurre algo. Por ejemplo, el número de sugerencias disponibles, la sugerencia seleccionada, etc

El plan consistía en notificar al usuario de cualquier cambio en la interfaz de búsqueda directa, y proporcionar un conjunto de atajos de teclado para navegar por los componentes visuales siguientes:

• Cuadro de búsqueda
• Botón de envío
• Lista de sugerencias
• Panel de rica

Suena como una brisa, ¿verdad? Bueno, vamos a dar un paso atrás.

El problema

Lo que tenemos aquí son dos procesos asíncronos - uno de ellos para la actualización del conjunto de la sugestión y el otro para la recuperación de sus correspondientes respuestas - y los dos son muy rápido. Estamos hablando de finales 250ms hasta el final. Puesto que la interfaz está cambiando a un ritmo tan rápido, no perder de vista todo lo que puede ser difícil para un usuario de lector de pantalla. Se pone un orden de magnitud más complicado cuando las actualizaciones ocurren en una máquina asíncrona, casi en tiempo real forma. Debido a que el lector de pantalla fue la notificación de cualquier cambio en la interfaz, la charla que resulta hace difícil entender lo que estaba pasando.

A falta de una solución aceptable, que empezó a colaborar con gurú de Yahoo! 's residentes de accesibilidad, Victor Tsaran ( @ vick08 ) para tratar de llegar a algo mejor.

La primera vez que vimos a Víctor interactúan con búsqueda directa, que fue inmediatamente claro para mí que la mayoría de su atención se centró en el panel de rico, en lugar de la lista de sugerencias. Esto fue una sorpresa para mí, como hemos visto en la lista como "la fuente de la verdad". Durante una de nuestras sesiones, que tuvo un golpe de suerte cuando pasó a desactivar todas las características de accesibilidad de la lista. Tan pronto como el ruido introducido por la lista era corta, búsqueda directa comenzó a tener sentido para Víctor!

Cómo los usuarios de lectores de pantalla perciben de búsqueda directa

Después de darse cuenta de que estábamos tratando de resolver el problema equivocado, nos fuimos de nuevo a la historia de usuario original: "Como usuario, puedo obtener una respuesta al escribir". Obtener la respuesta a través de los usuarios era la prioridad. Después de redefinir el problema, nos hemos concentrado nuestros esfuerzos en la implementación de accesibilidad en el lector de pantalla priorizado el contenido del panel ricos sobre la lista de sugerencias.

Por ejemplo, si el usuario escribe "miami wea" , el lector de pantalla les diré dos cosas:

• 10 sugerencias.
• Del tiempo en Miami, FL. HOY, Parcialmente nublado, 89 ° F 77 ° F. MAÑANA, Parcialmente nublado, 90 ° F 74 ° F ...

A continuación, seguir leyendo el resto del contenido del panel ricos. El usuario no necesita saber todas las 10 sugerencias al frente, cada vez que la lista de actualizaciones. Si quieren saber, la información es fácilmente accesible a través de la navegación mediante teclado.

Para asegurarse de que la lista de sugerencias es agregar valor a la experiencia, nos aseguramos de que la primera frase en el panel de ricos está muy relacionado con la sugerencia correspondiente. Por ejemplo, basado en el ejemplo anterior, "weather miami" es la primera frase en el panel de rica por la sugerencia: "El clima de Miami".

Victor Tsaran, del Laboratorio de Accesibilidad Yahoo, muestra cómo funciona en FireFox con el lector de pantalla NVDA:

La experiencia de lector de pantalla para nuestra aplicación es más fácil de seguir ya que ahora sólo se centran en los siguientes dos componentes visuales:

• Cuadro de búsqueda
• Panel de rica

Cambios en la lista de autocompletar en su conjunto ya no son seguidos, y el botón de enviar es ignorado ya que el usuario siempre puede pulsar Enter para la consulta actual o usar un atajo de teclado (tecla de acceso tilda: [control, alt or shift] + ~ ) para cambiar entre el elemento de entrada y el panel de rica. Estas opciones de navegación del teclado se revela al usuario cuando el cuadro de búsqueda es reconocido por el lector de pantalla.

Desde el punto de vista de ingeniería, este cambio simplifica enormemente las cosas. La cantidad de la manipulación del DOM en el componente más activo se redujo drásticamente, mejorando el rendimiento global de búsqueda directa. He aquí un ejemplo de la aplicación:

 SDAAria función () {
     var nodo = = this._liveRegion Y.Node.create ('<div role="status" class="off-screen" aria-live="assertive"> </ div>');
     / / Se crea la región de ARIA en vivo ...
     . Y.one ('body') append (nodo);
     / / Para escuchar el aria: mensajes en vivo para actualizar la región viven
     this.on ('aria: en vivo ", this._handlerMsg, this);
     / / Escuchando chismes: actualización para anunciar el número de sugerencias
     this.on ('cotilleo: refresh', this._handleGossipRefresh, this);
 }
 SDAAria.ATTRS = {
      cadenas: {
          valueFn: function () {
              volver Y.Intl.get ('sd-aria ");
          }
      }
 };
 SDAAria.prototype = {
     _ariaSay: function (stringID, info) {
         var message = this.get ("cadenas". stringID +) | |'';
         this._liveRegion.setContent (info Y.Lang.sub (mensaje, info): mensaje);
     },
     _handlerMsg: function (e) {
         if (e.id) {
             this._ariaSay (e.id, e.subs);
         }
     },
     _handleGossipRefresh: function () {
         var size = this.get ('sugerencias') size ().;
         this._ariaSay (tamaño (> 0 "sugerencias": "NO_SUGGESTIONS '), {
             n: el tamaño
         });
     }
 };

Lecciones aprendidas

Al crear una interfaz accesible, es importante hacer las preguntas correctas. Hacer de cada bit de su solicitud de acceso puede no ser el enfoque correcto.

Retroalimentación solicitud a principios de los usuarios de lectores de pantalla - no se supone que tiene sus bases cubiertas hasta llegar algunos comentarios de los usuarios. Utilizando todas las herramientas y características a su disposición no puede tener el efecto deseado.

Los usuarios de lectores de pantalla pueden tener dificultades para hacer el seguimiento de actualizaciones en tiempo real, sobre todo si los lectores de pantalla son bombardeados con las notificaciones. En estos casos, menos puede ser más. Identificar y centrarse en lo que es importante para el usuario en lugar de tratar de replicar la experiencia en bruto de la aplicación de lector de pantalla.

Sobre el autor: Caridy Patiño, director de la interfaz de búsqueda de Yahoo! directo. Ha sido desde hace mucho tiempo colaborador de YUI y creador de Burbujas Biblioteca de extensiones de YUI, así como invitados blogger en YUIBlog.com compartir algo de su extensa experiencia en la construcción de alto rendimiento de las aplicaciones web. Estrategias de carga, las arquitecturas orientada a eventos y SSJS son algunos de los temas en los que Caridy pasa la mayor parte de su tiempo en estos días.

Buscar conversaciones: Bloglines | technorati

Compartir y ampliar: Marcar con del.icio.us | Digg it! | reddit!