Mejoras de UX para la accesibilidad del teclado

¿Cómo podemos proporcionar una experiencia de usuario accesible para los usuarios de tecnología de asistencia y solo teclado sin afectar la experiencia de otros usuarios? Le pedimos amablemente a Aaron Pearlman, diseñador principal de UX en Deque Systems, que comparta algunas herramientas y técnicas prácticas para garantizar que todos brindemos una experiencia inclusiva y accesible para nuestros usuarios.

Como parte de nuestra Membresía Smashing, realizamos Smashing TV, una serie de seminarios web en vivo, todas las semanas. Sin rodeos: solo seminarios web prácticos y procesables con preguntas y respuestas en vivo, a cargo de profesionales muy respetados de la industria. De hecho, el horario de Smashing TV ya parece bastante denso, y es gratis para los miembros de Smashing, junto con las grabaciones, obviamente .

¡Esperamos que disfrute el seminario web tanto como nosotros!

Aaron Pearlman: Deberías poder ver mi pantalla. Bien, ahora mismo, déjame solo... Ahí vamos, muy bien. Bueno, hola a todos. Como dije, soy Aaron Pearlman, el diseñador principal de experiencia de usuario de Deque. Y creo, uh, déjame mover, Zoom tiende a poner un poco de interfaz de usuario en el camino, así que pido disculpas si parece que me muevo frenéticamente y el mouse, con suerte, no aparece. Por eso, hoy vamos a hablar sobre los tipos de optimizaciones que puede realizar para los usuarios de solo teclado y tecnología de asistencia. Como mencioné hace un momento, este tipo de optimizaciones, este tipo de cosas no van a impedir que nadie más use su... tampoco van a dejar de ser utilizadas por otras personas. Simplemente tienden a ser cosas que van a ser más ventajosas para los usuarios que utilizan predominantemente un sistema con tecnología de asistencia al usuario únicamente de teclado.

Aaron Pearlman: Para aquellos que no están familiarizados con lo que eso significa, lo que es una tecnología de asistencia para el usuario solo del teclado: un usuario solo del teclado sería alguien que normalmente usa su teclado para atravesar un sistema. Por lo tanto, van a usar mucho la pestaña y la tecla Mayús y las teclas de flecha para recorrer su sistema, por lo que el enfoque es muy importante para ellos. Es posible que encuentre que este individuo puede tener problemas de habilidades motoras, también puede tener deficiencias de la vista, los usuarios de solo teclado y luego los usuarios de tecnología de asistencia también usan un teclado para atravesar su sistema, también pueden usar otras tecnologías de asistencia como pantalla medidores como VoiceOver o un lector de braille o algo así.

Aaron Pearlman: Entonces, eso es en lo que nos estamos enfocando: nuestros usuarios de esa naturaleza porque una buena parte de las personas que tienen discapacidades tienden a caer en este campo. Eso no significa que todo el mundo. Ciertamente, hay una miríada de diferentes discapacidades y gradaciones en el medio, pero para este propósito, esto es en lo que nos vamos a enfocar hoy.

Aaron Pearlman: Entonces, un poco de descripción general de lo que vamos a cubrir: vamos a hablar un poco del proceso de diseño con mucho tal vez haciendo un poco de un tipo de ejercicio que nosotros podría entrar, tal vez no, antes de ir a los enlaces de salto. Y luego omitir enlaces será una de las características que cubriremos, formas de optimizar su modal y cómo manejar el enfoque. Entonces, estas serán las tres grandes categorías que cubriremos y luego tendremos tiempo para preguntas cuando hayamos terminado.

Aaron Pearlman: Para empezar, pensé que podríamos hacer un poco de descripción general del proceso de diseño de UX. Estuve en diferentes talleres y esas cosas, descubrí que hay una gran cantidad de personas diferentes de muchas disciplinas diferentes, no todos son diseñadores de experiencia de usuario, por lo que es posible que no estén tan familiarizados con el proceso que emplean muchos diseñadores de UX. Entonces, para esto, pensé que solo lo repasaríamos brevemente, no vamos a gastar mucho tiempo en ello, pero creo que vale la pena repasarlo brevemente. También porque también se relacionará con el diseño accesible. Entonces, la mayoría del diseño de UX tiende a pasar por un proceso llamado descubrimiento, no siempre se llama descubrimiento, a veces se llama ideación rápida, iteración rápida. Mucha gente le da diferentes nombres, pero el punto es que es la parte del proceso de diseño donde ocurre gran parte de la fabricación.

Aaron Pearlman: Es una gran parte del tiempo en el que también tenemos diferentes ideas y recopilación de requisitos, es uno en el que se investiga mucho y se sintetiza eso con sus objetivos organizacionales y se filtra eso con toda esa información, y lo que sale de eso es típicamente artefactos que nos permiten construir el sistema que vamos a hacer o las funciones que vamos a hacer. Esos tienden a ser, no siempre lo son, pero tienden a ser cosas como prototipos, a veces verás modelos mentales que también saldrán de ellos. Pero un prototipo en algún nivel de fidelidad que sea un reflejo de cómo su usuario objetivo va a lograr sus objetivos. El TLDR es ese diseño reiterado y lo probamos con los usuarios y lo reiteramos, lo probamos con los usuarios, lo reiteramos, lo probamos con los usuarios y, al final, termina construyéndose.

Aaron Pearlman: Usted cree que eso es importante, las consideraciones para la accesibilidad son que queremos pensar y hacer accesibilidad a lo largo de ese proceso de diseño. Y pueden ameritar diferentes niveles de fidelidad, pensando en diferentes tipos de cosas, realmente depende. No entraré mucho en eso, pero en general, queremos incorporar esas heurísticas y métodos, y como diseñadores, vamos a aumentar nuestros poderes de accesibilidad con el tiempo, al igual que crecemos nuestros poderes de ser un buen diseñador de experiencia de usuario a lo largo del tiempo. No hay una expectativa al principio de que vas a ir y leer WCAG 2.1, luego vas a leer la especificación ARIA, y luego vas a terminar y no vas a cometer más errores, o no se perderá nada en lo que respecta a sus diseños y diseño accesible. Eso no es necesariamente razonable por ningún tramo de la imaginación.

Aaron Pearlman: Solo debes saber que vas a aprender con el tiempo. Ciertamente todavía me equivoco en accesibilidad, y todo en lo que trabajo y se trata solo de mejorar. Entonces, [inaudible] porque siempre estoy diseñando de manera accesible. Entonces, un pequeño complemento, aunque es relevante para lo que vamos a trabajar hoy, se llama Trane. Es nuestra biblioteca de patrones totalmente accesible en Deque, la usamos para construir nuestros propios productos. Es un marco front-end de HTML, CSS y JavaScript, bastante similar a Bootstrap, si alguna vez has usado algo así. También tenemos una biblioteca de reacción que también es una biblioteca hermana. Nuestro equipo se desarrolla en reaccionar. Pero vamos a ver algunas de las cosas aquí hoy como ejemplos. Pero esto es de código abierto, está disponible, habrá un enlace al final de esta presentación, que pondré a disposición de todos.

Aaron Pearlman: Y es gratis para que lo use y obtenga sucursales y lo use para el contenido de su corazón o contribuya a él, nos encantaría ver una contribución también. Entonces, solo un pequeño complemento, pero nos referiremos a él a medida que avanzamos. Entonces, lo primero que vamos a ver son los enlaces de salto. Y para aquellos que no estén familiarizados con lo que es un enlace de salto, los enlaces de salto son pequeños enlaces que tenderán a aparecer como la primera tabulación en una aplicación web o sitio web. Y lo que le permiten hacer es permitirle eludir partes del sitio web. ¿Por qué querrías hacer eso?

Aaron Pearlman: Bueno, si tiene un sitio web que tiene un menú realmente rico, que puede ser un gran menú de cartelera o simplemente tiene muchas cosas, si es un usuario de tecnología de asistencia o solo teclado, cuando llegue a eso sitio y su VoiceOver comienza a leerlo, o incluso no, incluso, tal vez usted es un usuario vidente, solo usa su teclado, tendrá que alternar entre tabuladores a través de todos esos elementos diferentes para llegar a los contenidos o al espacio de trabajo que quieras empezar sea cual sea la actividad que estés realizando allí. Entonces, lo que le permite hacer un enlace de omisión es omitir típicamente, típicamente la navegación para llegar al área de trabajo de esa aplicación.

Aaron Pearlman: A veces puede haber varios enlaces y, por lo general, solo se ve uno, pero tenemos algunos ejemplos. Te mostraré un ejemplo de dónde puedes usar múltiples enlaces de salto también. Así que pensé que podríamos ver un par de tipos diferentes de enlaces para saltar o algunos tipos diferentes de enlaces para saltar, y luego miraremos otra página que no tenga un enlace para saltar, y tal vez hablar un poco sobre dónde uno podría ser útil allí. El primero que vamos a ver, espero que puedas ver mi pantalla. El primero que vamos a ver es este enlace de salto que usamos en deque.com y lo que es, es lo que yo llamaría un elemento de desplazamiento en el sentido de que desplaza la página. Entonces, cuando entro aquí, puedo ver que el enlace de salto está ahí y me dirá que salte al contenido.

Aaron Pearlman: Y cuando seleccione eso, me enviará al contenido a continuación, y lo llamo desplazamiento porque literalmente se inserta y se esconde y se inserta allí y lo desplaza. Este fue el enlace de salto que elegimos usar para nuestro contenido, pero es uno que es muy común. Verá que se inserta en la parte superior de un sitio web o una aplicación web. El próximo que vamos a ver es uno en un sitio que estoy seguro que muchos de ustedes han usado o usado con bastante frecuencia. Es Amazon, veremos su enlace de salto. Cuando me muevo allí, si mira en la esquina superior izquierda, lo verá superpuesto, este es un estilo de superposición, esto es muy, muy común donde superpondrá el contenido, por lo que a menudo omitirá lo que sea detrás de él para mostrarle el salto al contenido principal allí.

Aaron Pearlman: Los pros y los contras entre desplazar y superponer son insignificantes. Si descubre que su contenido es algo que nunca desea ofuscar, entonces puede insertar algo y simplemente usarlo, desplazar uno, viceversa, no importa, eso también está bien. Si está diseñando contenido que se lee de derecha a izquierda, como el contenido en árabe, puede colocar su enlace de omisión en la esquina superior derecha, puede merecerlo. Realmente se reduce a lo que es apropiado. Pero en última instancia, esa discreción será para el diseñador en su equipo. Entonces, este es un ejemplo de dos enlaces de salto que eran un solo enlace de salto, y pensé en mostrarles uno donde hay múltiples opciones dentro del enlace de salto.

Aaron Pearlman: Voy a sacar ese ejemplo, esto es de nuestra biblioteca de patrones. Ahora, para este ejemplo en particular, en realidad no diseñaría algo que tuviera múltiples enlaces de salto porque realmente no lo merece, pero lo hicimos con el propósito de demostrarlo. Así que voy a tabular y en la esquina superior izquierda, usamos una superposición que muestra dos enlaces de omisión justo aquí. Y estas son tabulaciones dentro de aquí, así que si presiono tabulador nuevamente, vamos a tabular al siguiente y si lo quito, desaparecerá. Si vuelvo a tabular, se irá e irá al encabezado en la parte superior. Voy a cambiar la pestaña hacia atrás, cambiar la pestaña hacia atrás para que podamos ver que podemos entrar y salir de aquí.

Aaron Pearlman: Y luego continuaré e ingresaré uno de estos solo para que puedan verlo. Y lo que sucede en este punto cuando lo selecciono, me envía al área de trabajo y en realidad enfoca esa área de trabajo. Lo que verá para muchas aplicaciones web es que en realidad no muestran el enfoque en sí mismo, queríamos mostrar que en nuestras aplicaciones, esto no es un enfoque de elementos, por así decirlo, pero es algo que puede tomar enfocar. Y luego desde aquí, vamos a enfocarnos y luego podemos ir a los diferentes elementos dentro de allí que son el foco de todos los elementos que están dentro de allí, los elementos [inaudible 00:12:28]. Entonces, esos son ejemplos de algunas formas diferentes en las que puede omitir enlaces.

Aaron Pearlman: Como dije, hay un ejemplo dentro de la biblioteca de patrones, puede usarlo, también tenemos una versión, creo que aquí tiene errores. También tenemos un solo ejemplo de enlace de omisión, y también puede usarlo. Así que tenemos un par de ejemplos diferentes aquí. Pero esos son ejemplos de formas comunes en las que puede usar los enlaces de salto. Y son principalmente beneficiosos para las personas que solo usan su teclado para navegar por el sistema cuando usan una tecnología de sistema como resultado de eso.

Aaron Pearlman: Pero, a veces, puede haber otros casos en los que un enlace de salto podría ser potencialmente beneficioso. He visto que puede ser potencialmente beneficioso. Podría imaginar una instancia en la que el gran espacio de trabajo de su sitio tal vez sea un montón de resultados de búsqueda y hace una puntuación perezosa en la que se desplazará hasta la parte inferior y luego cargará más resultados, se desplazará hasta la parte inferior y ' Cargará más resultados, se desplaza hasta la parte inferior y se cargarán más resultados.

Aaron Pearlman: Bueno, ¿cómo llegas al pie de página? Y he tenido este problema en realidad antes, donde fui a los motores de búsqueda y nunca pude llegar al pie de página. Y lo que hubiera estado bien es el enlace de omisión que en realidad me permitió saltar al pie de página, porque estaba buscando información en el pie de página. Entonces, hay formas en que omitir enlaces puede ser beneficioso para eso. No es la única forma en que puedes resolver ese problema. Ciertamente, también puede usar teclas físicas o menús de acceso directo. Hay muchas técnicas diferentes para lograr estos objetivos, pero esa es en la que los enlaces de omisión tienden a ser muy buenos [inaudible 00:14:13]. Algunas cosas a tener en cuenta al diseñar un enlace de salto es que, por lo general, será la primera tabulación en la aplicación web de su sitio web.

Aaron Pearlman: Y ahí es donde comúnmente se encuentra, por lo que si estoy gritando o soy un usuario que solo usa el teclado, puedo acceder a él de inmediato. Es lo primero que puedo hacer cuando entro. Entonces, si es algo que una aplicación web que uso con frecuencia, puedo ir directamente a lo que estoy tratando de hacer. También debe representarse visualmente donde se supone que debe estar en la información, básicamente en la IA, para que pueda poner enlaces de omisión y otras partes de su aplicación también, como si pudiera poner uno aquí si quisiera, encontrar un largo sitio de pila de desplazamiento y quería hacer eso, y quería tener un enlace de salto dentro de algo. Estoy bastante seguro de que puede anclarse en diferentes cosas como esa, pero debería representarse visualmente donde debería estar, dentro de la aplicación.

Aaron Pearlman: En general, eso es extremadamente poco común. La mayoría de los enlaces de salto están siempre en las primeras tabulaciones. En general, no hagas eso. Creo que técnicamente puedes, pero yo diría que no. Y luego, lo último es que es un elemento interactivo y es el contraste de color pasado, así que asegúrese de que lo haga, si decide usar una imagen o algo en ella, lo haría, pero si lo hizo, debe tener el nombre accesible adecuado junto con él también. En general, la mayoría de la gente usa textos y enlaces, por lo que se marcará como un enlace. Solo asegúrese de que esté pasando el contraste de color para que [inaudible 00:16:07]. Muy bien. Así que eso es todo lo que tenemos para omitir enlaces.

Aaron Pearlman: Es un patrón bastante sucinto pero muy común que se ve en todas partes y es algo que se puede agregar de manera justa, es bastante sencillo agregarlo a su aplicación web, pero puede marcar una gran diferencia para las personas que usan su teclado o tecnología del sistema. Así que permítanme seguir adelante y cerrar esto y pasar a las optimizaciones modales. Eligió hacer esto porque los modales son muy, muy, muy, muy comunes entre la mayoría de las aplicaciones web y vienen en muchos foros diferentes, muchas maneras diferentes en que se forman y crean los modales.

Aaron Pearlman: Pero algunas cosas comunes que veo que aparecen en más de las cosas que podemos corregir, hasta que hay algunas optimizaciones que podemos hacer para que sea una mejor experiencia para los usuarios de solo teclado y tecnología de asistencia. Y en general, creo que tu modal es mucho mejor. Una cosa que pensé que mostraría aquí muy rápidamente es que una cosa importante que un Modal debe hacer es poder atrapar el foco dentro de él. Quería mostrar un ejemplo de... está justo aquí. Por cierto, me encanta regatear, así que esto no es una broma contra ellos. Esto es probablemente solo un pequeño descuido aquí. Los usé todo el tiempo como un sitio encantador y tiene cosas maravillosas.

Aaron Pearlman: Entonces, si tuviera que presionar el inicio de sesión, lo siento, el registro. Aquí hay un modal aquí y algo que puede suceder a veces. Si te fijas bien, estoy presionando tabulador, tabulador, tabulador, tabulador. Como puede ver detrás de la pantalla, es un poco difícil de ver. Puede ver que el enfoque no ha quedado atrapado dentro del Modal y esto puede suceder a veces. Entonces, si fuera un usuario que usa tecnología de asistencia o solo teclado, sería muy difícil para mí volver a esto.

Aaron Pearlman: Es algo que sucede muy, muy, muy, muy comúnmente, y ciertamente puede suceder cuando estás insertando diferentes cosas interesantes en Modal. Entonces, algo de lo que queremos asegurarnos, y la razón por la que lo menciono, la razón por la que en realidad es muy, muy importante es que cuando se evoca un modal, debe anunciarse a sí mismo a la persona que lo evocó, saber qué básicamente solo abrieron, pero en realidad abrieron lo correcto.

Aaron Pearlman: Entonces, la forma en que puede anunciarse a sí mismo es que el cuerpo del modal debe enfocarse o potencialmente el encabezado del modal puede enfocarse para que podamos decirle al individuo que está evocando el modal, que es lo que esta pasando Entonces, si tienen voz, están usando, por ejemplo, VoiceOver, les dirá lo que están mirando. Así que pensé en dar un par de ejemplos de formas en que se puede enfocar el cuerpo y luego un ejemplo de cómo el modelo puede enfocar el encabezado en su lugar y luego qué podemos hacer con eso.

Aaron Pearlman: Voy a abrir esto muy rápido aquí. Muy bien. Y entonces, el modal que tienen para esto, creo que es un sitio de ropa aquí mismo. Y lo que sucedió es que enfocó el cuerpo y puedo mostrarlo mejor al... Voy a activar VoiceOver muy rápido. Voy a tirar hacia arriba.

VoiceOver: VoiceOver en Chrome.] Bonobos, [inaudible 00:20:10]-

Aaron Pearlman: Y no podrás escucharlo-

VoiceOver: Google Chrome, [email protected]

Aaron Pearlman: Pero podrás verlo.

VoiceOver: cierre la tarjeta, su tarjeta está vacía, el grupo tiene el foco del teclado. Actualmente estás en el grupo al abrir tu tarjeta, cierra la tarjeta, tu tarjeta es un grupo vacío. Actualmente estás en el grupo dentro del contenido web, VoiceOver desactivado.

Aaron Pearlman: Justo allí, cuando lo enfoqué, se leyó un poco de todo lo que estaba pasando en su tarjeta cerrada y su tarjeta está vacía debido a que la compra estaba enfocada en ese punto. Y eso es perfectamente válido. Esa es una forma perfectamente válida de enfocar tus modales. No es un problema en absoluto. Y luego, desde allí, puede recorrer todo lo que hay dentro de él. Otra forma común de evocar un modal es enfocar el encabezado.

Aaron Pearlman: Y eso es lo que hacemos en los modales que usamos para nuestras aplicaciones: enfocamos el encabezado. Así que voy a evocar el modal, y como pueden ver aquí, el foco está justo aquí donde dice modal con formulario, el foco está justo ahí en el encabezado. En realidad, en lugar de indicar eso como un índice, lo enfocamos programáticamente. Y la razón por la que nos enfocamos programáticamente en que, a medida que paso el tabulador por aquí, ahora va al botón de cerrar, también en el encabezado, luego al primer elemento interactivo, que es el campo al siguiente campo, al siguiente campo, al siguientes campos, tabulando de nuevo para guardar, tabulando de nuevo para cancelar.

Aaron Pearlman: Y desde aquí, cuando presiono el tabulador, si ese encabezado fuera una tabulación, iría allí, pero decidimos no hacerlo. En cambio, llegamos al final y la razón por la que lo hacemos es que si alguien estaba usando Voice Over, ya que es posible que haya visto algo de lo que se estaba escribiendo y me estaba entrando en los oídos al mismo tiempo, en realidad era un poco distrae porque habla muy rápido, es un poco charlatán. Entonces, una de las optimizaciones que queríamos hacer para la experiencia aquí era hacerla un poco menos ruidosa. Así que sí, lo anunciamos, nos enfocamos programáticamente en modal con formulario cuando llegan allí por primera vez, para que les permita saber que el modal que evocaron es en realidad en lo que están enfocados actualmente.

Aaron Pearlman: Pero no es necesario que lo anunciemos una y otra vez si tuvieran que pasar por este ciclo de turnos a través de este modal. Por lo tanto, es una pequeña optimización que probablemente sería completamente invisible para la mayoría de los usuarios de solo mouse citados. Pero esa pequeña optimización, se puede imaginar si usara mucho los modales para completar formularios con frecuencia y fuera un usuario que usara solo teclado o tecnología de asistencia, esa optimización se sumaría con el tiempo. Entonces, los pequeños usuarios experimentan las cosas que podemos hacer, que pueden marcar una diferencia significativa en general en el cuidado que podemos poner en nuestros diseños, de modo que sean la experiencia más frecuente que podamos brindar.

Aaron Pearlman: Hablando de manejar el enfoque, el último que vamos a abordar es el manejo del enfoque en sí. Y vimos un ejemplo de ello, ¿qué puede pasar si el foco se pierde en ciertos tipos de manejo? Pero en lugar de ser solo algo que puede ser un problema importante, la forma en que maneja el enfoque puede cambiar significativamente la experiencia que tendría un individuo. Realmente la regla sobre el manejo del enfoque, especialmente con las dos instancias que vamos a ver ahora, que son, eliminar y agregar elementos a su espacio de trabajo o lo que sea que esté trabajando es que... Definitivamente puede cambiar la forma en que alguien interactúa con él. Y, por lo tanto, queremos que siga la experiencia esperada que tendría para alguien que es un usuario solo del mouse o un usuario vidente, un usuario solo del mouse, debería decir.

Aaron Pearlman: En este caso vamos a ver... porque aquí vamos a ver... Bueno, déjame alargarlo. Espera un segundo. Voy a tener que sacar esto de aquí temporalmente. Aquí vamos. Por lo tanto, no debería poder ver un ejemplo de un modal que he diseñado, en realidad es un solo modal, tenemos dos tipos de imágenes y solo uno muestra lo que hay debajo del pliegue allí en lugar de hacer uno realmente , muy mal o simplemente lo dividí para que pudieras ver lo que había debajo en el pliegue. Y en el lado derecho, si miras, hay un icono de papelera que se está enfocando actualmente. Entonces, cuando hacemos clic en el ícono de la papelera, suponiendo que no haya un diálogo que diga: "¿Está seguro de que desea eliminarlo?"

Aaron Pearlman: Supongamos que ese no es el caso. Entonces, la verdadera pregunta es, ¿qué sucede con el enfoque allí? Porque cuando se presiona o se selecciona el ícono de la papelera, se eliminarán las instrucciones que están aquí y también se eliminará a sí mismo. Entonces, ¿a dónde va el enfoque? Entonces, como diseñadores, queremos elegir dónde va el foco porque, de lo contrario, los navegadores elegirán el foco si está creando una aplicación web dentro de una aplicación web y no queremos que el navegador elija dónde va el foco porque Tiende a tirar cosas al cuerpo. Entonces, en este caso, donde realmente queremos que vaya el enfoque es que queremos que el enfoque vaya al siguiente elemento enfocable, no necesariamente al... lo que yo llamaría el análogo a eso, que será enfocar el próximo bote de basura, el bote de basura para instrucciones a, en cambio, enfocamos las instrucciones a sí mismo.

Aaron Pearlman: Y la razón por la que querríamos hacer eso, es que puedes imaginarte si alguien pulsa accidentalmente, usando su teclado solo pulsa Intro, luego vuelve a pulsar Intro. Simplemente habría eliminado dos conjuntos de instrucciones en lugar de uno. Y nos gustaría, evitamos eso para un usuario de mouse solo al tener esas cosas físicamente separadas. Pero también queremos poder prevenir eso porque el enfoque es lo que están usando para atravesar esto. Así que pensé en mostrar otro ejemplo de lo que hacemos cuando eliminamos el último elemento de toda la sección aquí.

Aaron Pearlman: Ahora que tenemos instrucciones de cocina, la instrucción final para la instrucción uno, ¿dónde va el enfoque aquí? Ahora, para este en particular, seguirá el ejemplo de lo que era el anterior, que en realidad irá al siguiente foco pero se llenará nuevamente, que es el ingrediente uno por la misma razón por la que no nos gustaría lanzar a la papelera de nuevo porque entonces, si alguien vuelve a presionar seleccionar o regresar, estaríamos... Borrarían accidentalmente dos cosas que no querían, que no querían.

Aaron Pearlman: Por la misma razón, no necesariamente querríamos arrojar eso a uno de estos enlaces aquí porque tendríamos el problema opuesto en el que también estarían agregando cosas accidentalmente. Y no necesariamente queremos que vaya al cuerpo, porque vamos al cuerpo y su usuario de Voice Over, su usuario de Assistant Technology, simplemente comenzará a hablar sobre el modal nuevamente o en lugar de permitirle continuar interactuando y haz lo que te propusiste hacer.

Aaron Pearlman: Y finalmente, el ejemplo final que tengo aquí es qué hacemos cuando vamos a eliminar el último elemento en este caso, en el modal aquí, no queda nada. ¿Dónde lo enviaría? Y esto definitivamente depende de la discreción de los diseñadores hacia dónde debe ir. No hay, no va a ser inaccesible si eliges enviarlo a la ropa o enviarlo a foco tal vez a la cancelación. No necesariamente lo hace inaccesible, es solo eso, realmente se reduce a lo que esperarías. ¿Qué información le gustaría transmitir? ¿Qué narración desea transmitir a ese usuario y dónde elegimos enviarla, ya que elegimos enviarla de vuelta al encabezado para que el usuario sepa que todavía está en el modal, todavía está allí, no lo hemos hecho? t lo cerró sobre ellos, por ejemplo allí.

Aaron Pearlman: Y eso es en realidad un cambio programático porque, como dije, no es una voz terrible. No es un elemento enfocable tan terrible como ese. Entonces cambiamos programáticamente el enfoque a eso en este ejemplo en particular. Entonces, esos son algunos buenos ejemplos de qué hacer quizás con el enfoque cuando estás eliminando elementos. Así que pensé que podrías... Mostraría un ejemplo de lo que haces cuando agregas un artículo. Así que tengo un ejemplo de eso muy rápido aquí para la retención del enfoque.

Aaron Pearlman: Y justo aquí, vamos a presionar este agregar otro... puede enfocarse aquí, agregar otro ingrediente y luego cambiar el enfoque al ingrediente real en este caso, el campo que agregó por dos razones, una, porque la suposición es agregar el siguiente campo con el que queríamos interactuar y ese sería el comportamiento esperado si fuera un usuario de Mouse-Only, lo agregaría presumiblemente para poder comenzar a escribir texto en él.

Aaron Pearlman: Y, de nuevo, no necesariamente querríamos mantener el enfoque en otro ingrediente por la misma razón que si presionan regresar nuevamente, no querríamos agregar dos ingredientes en lugar de uno. Debería ser el problema opuesto del ejemplo anterior. Y el último, el último ejemplo que quería mostrar, porque creo que podría valer la pena mostrarlo es... en realidad tengo ese ejemplo, puedo sacarlo un poco. Pero puedo describirlo muy, muy bien en eso, si tienes, ¿qué haces cuando evocas un modal? Por ejemplo, guardaste algo, el modal desaparece, a dónde va ahora el foco y lo que tendemos a hacer, pero la regla general es que quieres enviarlo de vuelta a cualquier elemento [inaudible 00:31:03] obtiene.

Aaron Pearlman: Entonces, si imaginas que tienes un pequeño lápiz de edición y lo seleccionas, abres el modal, completas ese modal, presionas guardar, querrás enviar el enfoque nuevamente a ese elemento interactivo que tiende a ser … o lo hacemos. Puede haber casos en los que desee enviarlo a otro lugar. Si es un mago y va a otro lugar después de eso, nuevamente a discreción del diseñador, a cuál es la narrativa que intenta decirnos a dónde ir. Pero para cosas que son como la... instancia que acabo de describir, que es muy común. Evocas un modal, o haces algo con él y se descarta como resultado de eso y el contexto no necesariamente cambia.

Aaron Pearlman: Y no querrás enviar ese enfoque de regreso a donde estaba. Y la razón para hacerlo es para que un usuario de tecnología de asistencia o solo teclado pueda retomar el lugar donde se encuentra. Porque recuerda que están en ese espacio y ese espacio es algo lineal en cuanto a cómo atraviesan y especialmente cuando estás usando la ciudad para atravesar todo. Entonces, creo que estamos a unos 40 minutos, casi a tiempo para todos los ejemplos y cosas que tenía. Así que se lo devolveré a Scott.

Scott: Gracias Aarón. Eso fue bastante impresionante, y tenemos muchas preguntas de los asistentes, así como algunas de forma individual que no pudieron asistir hoy porque está de viaje. Entonces, Poan, que es un asistente habitual de nuestros seminarios web, pregunta: "Cuando elimina elementos, ¿no deberíamos tener un reconocimiento de la acción y mover el enfoque allí y luego pasar al siguiente elemento?"

Aaron Pearlman: al eliminar un elemento, ¿debe tener un... se refiere a un aviso como un brindis o dice que debe tener una región en vivo que le permita saber lo que está sucediendo? Si está cambiando el enfoque para eliminar un elemento, como los que acabo de mostrar en ese caso en particular, la evocación de esa eliminación, por ejemplo, debería ser lo suficientemente adecuada para hacerles saber que, de hecho, lo eliminaron.

Aaron Pearlman: Debería haberse ido. Además, si están usando Voice Over, también lo captará. Si está interactuando con algo y está haciendo cambios en otro lugar, por ejemplo, como si hiciera algo y luego cambiara algunas métricas en algún lugar, por ejemplo, probablemente querrá usar una región en vivo que haga algo cortésmente para permitirles saber que eso ha pasado. Eso es algo que está más o menos fuera del alcance de donde estás trabajando específicamente. Espero haber respondido a tu pregunta. Podría ser sumergirse en algo que es un poco más técnico. Es posible que deba seguir un poco más con algo de eso, si vamos a profundizar en la implementación técnica.

Scott: Perfecto.

Aaron Pearlman: Mi desarrollador, por lo que no te llevan a llegar, pero en general ese suele ser el caso. El ejemplo que mostré debería ser adecuado. Si lo desea porque es una eliminación, podría tener una parte intermedia en la que arroje una alerta y diga: "¿Está seguro de que desea que elimine esto?" En cuyo caso, solo lo está reforzando aún más lo que está sucediendo.

Scott: Genial. Entonces, sí, trate de mantener las preguntas enfocadas en la experiencia del usuario. Entonces, desde el punto de vista de la experiencia del usuario, ¿cómo administraría el enfoque para los mensajes de notificación?

Aaron Pearlman: ¿Enfoque para una notificación? Puedo mostrarte uno si quieres verlo.

Scott: Claro.

Aaron Pearlman: Podemos elegir al azar porque tenemos notificaciones, que son notificaciones. Así que voy a abrir brindis aquí. Así que esto en realidad se está enfocando en este momento. Este brindis se evoca y se está enfocando en este momento y, como puede ver, puede tabular en la cláusula aquí mismo. So, it depends. So, if I finished something and I wanted to notify them that it's been finished and I toasted it, then I want to focus it so that they can see that it's been … that I'm communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don't use them very often, so I'm going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that's an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that's an animation wise can't animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you're doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we'll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you're going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don't know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It's a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they're tricky, but that doesn't mean that they can't be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia's asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I'm not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that's something that our developers have encountered before and how they've gotten around it. So we'll make a note of that and I'll try and circle back. But for the first one what's a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don't want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I'm a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. Saltar al contenido principal.

Scott: Okay. That's a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it's accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you're working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you'll get it and you'll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it's meeting at 4.5 to one.

Aaron Pearlman: So that's one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it's an interactive element that it's a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That's things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that's our accessibility engine. It's totally free. It's a little extension for chrome and Firefox and just hit the run button and see what you find. It's a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you're on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It's a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you've been doing design and UX for so long, but you've only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I've always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don't know as a person that very much appeals to me. And so it was just a good fit to learn design. That's really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don't not design accessible anymore. It's like UX designers don't design unless you're being tongue in cheek, you're not going to design something to have a really poor user experience. It's going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can't like not think about accessibility as I do designing and that's a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn't think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn't know focus was a state that you had full control over as well.

Scott: Our industry there's always a new trend that's just kind of how it goes, that's the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don't know if there's anything that's super trendy right now when I look at different sites and web applications that couldn't be designed excessively. I think there are pitfalls that that we've been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That's one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it'll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that's conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that's conveyed is if what's being conveyed is that the person is doing something that's, you wouldn't necessarily describe it as a man standing. It could be that they're playing baseball. Maybe that's the important part. So make sure that the, that the, the alternative text matches with the intended information that's trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn't accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don't do a great job of being evoked on focus as well. And they don't always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we're doing wireframes and design of the onset of the project, they're inherently not inaccessible. It doesn't really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they're done with it. Do you do audits throughout the process, at the end of the process? Like what's the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I'll go through a discovery process. They're going to be privy to that, they're not going to see it when the design is fully finished.

Aaron Pearlman: They're going to see it throughout the design. I'll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I've done, some of these ability testing that I've done. So, hopefully at that point nothing's really new to them that I'm not going to get any 11th hour that we can't even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there's a great resource that one of the designers from Adobe put together. I know there's like a pdf, there may be. There's like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don't think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It's a really, really wonderful resource. It's all included in here as well. That's a great way of saying, “Here's part of my prototype and here's the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman: Una de las cosas que hacemos es anotar mis diseños bastante. Todo, desde el tamaño de cómo se supone que deben ser ciertas cosas hasta los códigos hexadecimales o los valores RGBA de cómo se supone que se ve y se siente. Pero también hay anotaciones de accesibilidad que también puede agregar.

Aaron Pearlman: Y luego simplemente comunicándose, revisando las compilaciones a medida que avanzan, asegurándose de que cosas como si hizo enfoques personalizados que esos enfoques personalizados se vean geniales, verifique el contraste de color, asegúrese de que se transmita, que la fuente opciones que ha tenido hay algunas fuentes que cuando su peso es mayor y son más grandes. Su contraste de color no tiene por qué ser un 4,5. En realidad, puede ser un poco más bajo, pero solo querrás vigilar esas cosas. Así como también vigilarías las cosas de la experiencia. Querrá estar atento a las cosas que ha tenido en cuenta y anotado en sus diseños.

Scott: Así que nos quedan un par de minutos aquí. Así que haré una pregunta más. Algunas personas sienten que la accesibilidad puede sofocar la creatividad a lo largo del proceso de diseño. ¿Es algo con lo que te has encontrado? ¿Cómo crees que encaja la creatividad en el diseño accesible?

Aarón Pearlman: Claro. Esa fue una de mis reacciones iniciales al tener que diseñar de manera accesible, fue que alguien básicamente me puso las esposas y dijo: "Hay una caja mucho más pequeña en la que tienes que poder trabajar". Es cierto que diseñar de manera accesible significa que puede haber más desafíos porque hay más reglas que debes seguir. Pero al final, descubrí que la experiencia termina siendo mejor y yo no… Una vez que eliminé ese nombre inapropiado y comencé a hacer más y más diseños accesibles que eran accesibles según WCAG 2.0 AA, me di cuenta de que podía hacer casi todo. que quería hacer.

Aaron Pearlman: A veces solo necesitaba expresar o resolver problemas de una manera ligeramente diferente a como lo hacía antes. Pienso en mucha gente cuando piensa en diseñar de manera accesible… Te daré un ejemplo muy específico. Cuando piensan en diseñar accesibilidad, piensan: “Oh, bueno, no puedo hacer todas estas visualizaciones sofisticadas, por ejemplo. No voy a poder hacer todas esas cosas porque no van a ser accesibles, porque si una persona no puede verlas, no voy a poder hacer eso”.

Aaron Pearlman: Estaba diseñando una visualización que era simplemente básica, solo una especie de gráfico de líneas y debajo de eso, había un gráfico de líneas, en el eje x había, creo que era el tiempo y en el eje y era el uso o algo así que. Y había un pequeño gradiente agradable que descendía desde allí y había una especie de líneas de luz que iban detrás para delinear los meses y el tiempo. Y cuando hablé con uno de mis expertos en la materia sobre cómo hacerlo accesible, resultó que estaba seguro de que iba a decir: "No". Pero dijo que en realidad solo había algunas cosas que tenía que hacer para que este gráfico realmente atractivo fuera accesible. Uno, esa línea en la parte superior necesita pasar el contraste de color porque eso es lo que transmite la información de la tendencia a lo largo del tiempo.

Aaron Pearlman: El material degradado debajo es solo decoración y siempre que no interrumpa el paso del contraste de color de eso y las líneas del eje Y y X y terminó bien. Esas líneas detrás estaban bien, pero terminé agregando marcas en la parte inferior para indicar eso. Y luego, cuando pasé el mouse y me enfoqué, porque a veces puedes pasar el mouse y agregará un punto a una parte del gráfico de líneas, solo asegurándote de que el punto en sí pase el color. contraste. Lo hice haciendo el tipo de dona en la que pones un punto blanco con otro punto o debería decir que también tiene un trazo grande en el exterior.

Aaron Pearlman: Y luego agregué un poco de tratamiento allí que traería esas líneas que se desvanecieron hacia adelante. Y todo pasó contraste de color y terminó bien. Fueron visualizaciones realmente bonitas las que pasaron. Ahora concedido, no voy a entrar en todas las cosas de nombres accesibles y ser capaz de hacer eso. Muchas bibliotecas están en eso. Deja eso a un lado, al menos llamamos contraste porque es donde creo que muchos diseñadores luchan. Puedes hacerlo.

Aaron Pearlman: Se trata de ser realmente consciente de ese tipo de cosas, y obtener más ejemplos y probar y probar cosas diferentes, y tener otras personas con las que pueda presentar esas ideas y rebotarlas de un lado a otro y verificar nuevamente, realmente Haz eso. No creo que realmente inhiba nada. Simplemente hace que tengas que pensar un poco más claro sobre cómo lo vas a hacer y asegurarte de que estás mirando a través de la lente de cómo una persona se comprometió con esto si tenía baja visión o si no podía. No lo veo en absoluto o no pude escucharlo si está creando una aplicación de medios.

Scott: Una pregunta más, pero creo que deberíamos haberla tocado. ¿En qué etapa de su proceso comienza a pensar en la accesibilidad? Voy a asumir durante todo el proceso.

Aaron Pearlman: Sí, es durante todo el proceso. Seré un poco más en lugar de... Sé quién digo eso y suena un poco frívolo. Entonces, desde el principio, cuando esté haciendo cosas como la creación de prototipos de baja fidelidad, estará pensando en cosas como algunas cosas de orden de tabulación. Vas a estar pensando en quizás títulos y estructura, cosas así. Ese es el tipo de cosas de accesibilidad en las que piensas. Más adelante, a medida que aumenta la fidelidad, pensará en cosas más como los colores y las paletas que ha elegido, tal vez nombres accesibles, texto alternativo para cualquier cosa que pueda merecer eso, puede estar pensando, si está haciendo enfoques personalizados, por ejemplo, ahí es probablemente donde comenzará a pensar en eso.

Aaron Pearlman: No significa que no puedas pensar en eso cuando estás haciendo baja fidelidad, solo significa que, en general, cuando realizo mi proceso, esas cosas tienden a caer en esas categorías. Estás pensando en la accesibilidad todo el tiempo, pero no siempre estás pensando en todo, ya que estás en material de baja fidelidad, y estás ideando, y solo estás pensando en ideas, y solo estás trabajando a través de ideas, deje que las cosas creativas fluyan a medida que se sintoniza más con la accesibilidad, simplemente se abrirá paso intrínsecamente y habrá menos de una cosa consciente.

Scott: Sí. Lo suficientemente justo. Bueno, en ese sentido, se nos acabó el tiempo, Aaron. Muchas gracias por su tiempo y—

Aaron Pearlman: Eso fue genial. He tenido un tiempo maravilloso.

Scott: Vas a estar en el próximo par de conferencias Smashing, creo.

Aaron Pearlman: Estaré en el de Nueva York. Estaré en el de Nueva York.

Scott: Está bien. ¿Y ustedes están haciendo un taller allí?

Aaron Pearlman: Sí, lo somos.

Scott: Está bien. Increíble. Bueno, gracias nuevamente por su tiempo y solo para dejarles ver a los miembros que todavía están mirando, tenemos dos seminarios web la próxima semana. El primero es El poder de las personas digitales, con Kristina Podnar. Y luego tenemos un número tres en nuestra serie con Andrew Clarke, Decisiones de diseños inspirados, el número tres inspirado en Ernest Journal. Muchas gracias a todos por asistir hoy. Y nuevamente, esta grabación estará disponible en el panel de envío de miembros una vez que terminemos de editarla y esperamos verlos a todos la próxima semana. Así que gracias de nuevo Erin.

¡Eso es un envoltorio!

Agradecemos amablemente a los miembros de Smashing desde el fondo de nuestros corazones por su continuo y amable apoyo, y estamos ansiosos por organizar más seminarios web en el futuro.

No podríamos estar más felices de darle la bienvenida a Aaron a nuestra próxima SmashingConf New York (15 y 16 de octubre). ¡Nos encantaría verte allí también!

Háganos saber si encuentra útil esta serie de entrevistas, y a quién le gustaría que entrevistáramos, o qué temas le gustaría que cubramos y nos pondremos manos a la obra.