¡Carnaval de Sistemas de Diseño! Un Componente Accesible, Muchas Máscaras Bonitas

Bienvenidos a todos. Soy Kathleen McMahon, y estoy aquí hoy para hablar sobre el design sistema Carnival. Un componente accesible. Muchas máscaras bonitas.

Y antes de comenzar, aclaremos algunos detalles. Asegurémonos de que mi clicker está funcionando. No lo está. Genial. ¡Vamos! Ahora, es un éxito. Mi presentación se publicará en notice. Eso es https://notist.org. Incluyendo enlaces a recursos. Después de mi charla. Algún tiempo.

Y mi nariz está corriendo. ¿Por qué mi nariz está corriendo? También publicaré la URL completa en Twitter. Me niego a llamarlo X. En Twitter. Algún tiempo después de mi presentación. Puedes seguirme. En resource 11 en Twitter, Instagram, GitHub, Mastodon, Blue Sky. Donde puedas encontrarme. Resource 11.

¿Y quién soy yo de nuevo? Permíteme retroceder y presentarme un poco mejor. Soy ingeniero, soy diseñador y soy orador. Soy un corredor de ciclocross ocasional. En disfraz, por supuesto. Muy mal corredor. Me encantan las luces. Ir a la playa, coleccionar dólares de arena.

Es literalmente el donde está Wally del océano. Amo a mis gatos Thor y Otis. Y colecciono una cantidad ridícula de cristales. Gracias, COVID. Aficiones. Y los fotografío. Pero Otis tiene muchas opiniones. Interfiere. Y tiene opiniones sobre dónde debería poner mis atenciones. Gracias, Otis. Y ahora Thor ha aprendido a hacer lo mismo con mi colección de dólares de arena. Está muy satisfecho consigo mismo. Pero ¿quién podría resistirse a ellos? Y así es como yo, como individuo neuro especiado y brillante, sacudo mi ansiedad. Así que yay por ser neuro especiado.

He trabajado en algunos design systems incluyendo O'Reilly media, Watch Darkly, más recientemente, más recientemente, Northwestern Mutual, y me encantan los design systems. Siempre son la novedad. Ese T-Rex siempre me atrapa cada vez. ¿A quién no le encanta un T-Rex, verdad? Y los design systems son como arrear gatitos. Siempre divertido. Muchas partes móviles. Y creo que los design systems son como un carnaval. ¿Y qué quiero decir con eso? Así que, cuando visité Venecia el otoño pasado, me fascinaron las máscaras. Me encanta su belleza. Y su variedad. Y estaban por todas partes en Venecia. Dondequiera que mires. En las tiendas. Los souvenirs. E incluso hice mi propia máscara. Y aprendí que las máscaras tienen una rica historia de proporcionar acceso y ayudar a una persona a mezclarse para ocultar su género, su identidad, su clase social.

Y algunas de las máscaras más conocidas son la bauta, la maretta, la gagna y el arlequín. Y llevar estas máscaras te da acceso y la posibilidad de acceder a lugares con más libertad. Como este desfile de góndolas durante el carnaval de Venecia.

Similar a un sistema de design, cuando están bien hechas, las máscaras pueden crear una experiencia consistente. Pero, ¿esta experiencia es consistente para todos? Hablemos de accessibility. Nuestros usuarios tienen diferentes necesidades en diferentes momentos. Desde la visión, la audición, las habilidades motoras, cognitivas, sensoriales, el lenguaje, las necesidades de bajo ancho de banda. Nuestros usuarios tienen diferentes necesidades y tan a menudo, la accessibility es lo que se maneja al final. Así que no queremos dejar atrás a nuestros usuarios.

Entonces, ¿qué significa esto sobre los componentes de design accesibles en general? Bueno, hay un informe llamado WebAimillion. Y ha sido publicado durante los últimos cinco años. Y si has leído los resultados, son un poco preocupantes. Es un análisis de accessibility de las principales un millón de páginas de inicio. Y me voy a centrar sólo en los atributos ARIA presentes en la página de inicio. Ha habido hasta un 29% de aumento en los atributos ARIA añadidos en el último año. Y en los últimos cinco años, la cantidad de atributos ARIA ha casi cuadruplicado desde 2019. Eso significa que hay más de un 68% más de errores detectados en las páginas de inicio que en las que no tienen atributos ARIA adicionales presentes. Eso significa que nuestros desarrolladores tienen buenas intenciones, pero están empeorando la web en el espíritu de buenas intenciones.

Entonces, ¿qué podemos hacer al respecto? La página de la guía de prácticas de autoría ARIA, o APG por sus siglas en inglés, ha creado estos recursos que son increíbles para nosotros y son pautas que debemos seguir. Son prácticas, patrones de design, y ejemplos, como el widget de divulgación, y si se construye correctamente, puede tener algunos usos en su sistema de design. Se puede utilizar para cosas como ventanas emergentes, consejos de conmutación y búsquedas de conmutación. Ahora voy a hacer una divulgación sobre mi divulgación. Así que mis charlas suelen ser inmersiones profundas sobre cómo construir un componente accesible en cada detalle mínimo, pero nuestra charla es de 20 minutos. Y todos quieren llegar a las preguntas y respuestas y llegar a esa barcade. Así que lo voy a mantener a un nivel alto porque esto podría ser literalmente una charla de 45 minutos y no quiero hacer eso a ustedes. Quiero ser amable. Así que voy a ir un poco más rápido. Pero comparto ejemplos de código con todas mis charlas, con todas mis notas, y así proporcionaré todo eso en enlaces con mis charlas después para que no se pierdan nada. Tendrán todo eso después, después del hecho, así que no se preocupen. Así que la anatomía de un widget de divulgación es un botón que abre y cierra un contenedor y devuelve el foco a ese botón.

Y el sitio WAI, o el sitio APG, tiene un patrón para eso. Se llama el Patrón de Divulgación Así Ocultar. Está documentado. Y tienes que tener estas tres interacciones primarias de teclado para resolver ese criterio. Tienes que soportar, digamos, pulsaciones de barra espaciadora y tecla enter, pulsaciones de tecla escape, clics de ratón.

Y para hacer eso en React, empiezas con el elemento de botón JSX, que, bajo el capó, renderiza un elemento de botón HTML, que, por defecto, soporta clics de ratón, pulsaciones de tecla enter, y pulsaciones de barra espaciadora gratis. Magia. Genial. Entonces, una vez que tienes eso, es cuando añades justo el soporte ARIA suficiente para que los lectores de pantalla sepan cuándo ese widget va a ser abierto y cerrado. Y en el caso de si tienes muchos widgets en la página, ¿qué contenedor en esa página se está abriendo y cerrando?

Así que en nuestro botón, vamos a añadir el atributo ARIA controls para decirle a la tecnología asistiva qué elemento está controlando el botón. En este caso, es el ID del contenedor. Y luego vamos a añadir ARIA expanded para decir si el widget está expandido o no. Es booleano. Y ARIA label en casos en que necesitamos una etiqueta de botón más precisa, especialmente si estamos haciendo botones de iconos. Y luego vamos a añadir estado y manejadores de clic para alternar la apertura y cierre del contenedor. Así que cuando hacemos eso, vamos a usar el hook use date. Y definir set como open e inicializar use date a false. Y opcionalmente, vamos a establecer una prop expanded por defecto para usar date en esos casos en que tenemos que tener nuestro widget abierto por defecto. Por ejemplo, si estás trabajando en un banco y tienes que tener un widget de términos de servicio, abierto por defecto. Eso es algo que los bancos tienen que hacer. Así que es bueno tener esa prop en tu componente.

Luego, cuando tienes ese estado definido, puedes meterlo en una función de apertura de alternancia y alternar ese set is open a false con esa función de apertura de alternancia. Mete esa función en tu manejador de clics. Y luego en tu prop re-expanded de botones, la prop re-expanded comunicará si está abierto a false dependiendo de esa prop is open. Luego, en tu div, puedes meter esa prop is open con los hijos y sólo renderizar los hijos si esa prop is open es true. Ahora tienes los fundamentos de un widget de divulgación. Luego puedes añadir un poco de mejoras, como si quieres llevarlo un poco más allá con UX, como la gestión del enfoque. Y esto es como el avance. El patrón mejorado para los widgets de divulgación. Por ejemplo, cuando usas la tecla escape, cuando cierras el widget con la tecla escape devolverá el enfoque justo de vuelta a ese botón.

Entonces puedes crear, usar la ref, crear una ref de botón, inicializar useRef a null, y luego crear un manejador onKeyUp, escuchar las pulsaciones de la tecla esc con el código de tecla de 27 y si el estado está abierto. Y si está abierto, establece toggle isOpen a false. Y luego establece la ref actual en foco. Y luego en el div envolvente, ten tu función de manejador de tecla arriba, pon esa función de manejador en el evento sintético del div envolvente y pasa esa ref de botón al botón.

Y volviendo por un segundo. Ahora tu widget está configurado para la gestión del enfoque. Lo cual es genial. Ahora este es un patrón extendido que es impresionante. Pero voy a hacer una advertencia. Siempre prueba esto con usuarios de tecnología de asistencia. Porque quieres asegurarte de que todos los que usan tecnología de asistencia están teniendo la experiencia que esperas. Así que no dejes fuera a esos usuarios de tecnología de asistencia cuando estés haciendo esto.

Ahora, antes de continuar, asegúrate de normalizar tus estados de enfoque de CSS. No los ocultes. Puedes hacer esto globalmente, normalizar tus estados de enfoque haciendo estrella, el pseudo estado de enfoque así y poner el contorno a cero. Pero si haces eso, reemplázalo con algo más. De esta manera podrías tener un estilo genérico, bonito y consistente en todo en tus componentes. Y luego lo que puedes hacer, y aquí puedes establecer una relación de contraste consistente de tres a uno porque eso es para los estados de enfoque, eso es para los controles interactivos. Tiene que ser un mínimo de tres a uno para los controles interactivos, borde al fondo. O tres a uno o mayor. Y luego para cualquiera de tus otros estilos, entonces puedes personalizar. Para tus botones, quiero algo diferente. Pero al menos lo tienes normalizado para todo en tu sitio. Tienes un estado de enfoque normalizado y luego puedes personalizar en casos individuales. Así que es una forma muy bonita de conseguir que todo sea consistente.

Una vez que tienes eso, puedes hacer la gestión de clics del ratón. Y luego puedes hacer otra ref para tu ref de contenido. Personaliza eso a null y pásalo a tu div envolvente. Y luego tienes un manejador de clics fuera. Lo que esto está haciendo es escuchar si estás haciendo clic fuera de tu objetivo.

Entonces, si esa ref, si la ref contiene el objetivo, es decir, si estás haciendo clic dentro del objetivo, la ventana, el div permanecerá abierto. Pero si haces clic fuera del objetivo, establece isOpen en falso. Cierra tu widget. Esto es útil si tienes muchos widgets en la página. Esto cerrará ese widget. No tendrás todos estos widgets abiertos en la página. Así que esto es bueno para la gestión del ratón.

Y cuando tienes ese controlador, puedes usar el hook useEffect y escuchar si esto está abierto, añades un oyente de eventos para mouse up y key up y pasas ese controlador para una devolución de llamada. Y así, si está abierto, pasa ese oyente de eventos. De lo contrario, elimina el oyente de eventos. Y luego haz una función de limpieza para eliminar cualquier oyente de eventos perdido. Y luego, para prevenir re-renderizados, pasa esa variable isOpen al último array para asegurarte de que estás previniendo re-renderizados. Ahora tienes un widget de divulgación bastante robusto.

Y es aquí donde la gente va a empezar a ser un poco ingeniosa, como oh, esto es genial. Podemos usar esto para hacer consejos de conmutación, que no son descripciones emergentes. Son diferentes. Porque los consejos de conmutación contienen contenido interactivo y son compatibles con dispositivos táctiles, punteros no ratón y rastreadores oculares donde las descripciones emergentes no lo son. Y lo bueno de esto es que la gente va a usar esto, y sé que vas a volver y hacer esto en su lugar. Sé que todos ustedes van a hacer esto. Así que si vas a hacer esto, vamos a hablar de iconos.

Entonces, con los iconos, pueden ser informativos o decorativos. Así que con los iconos informativos, necesitan tener texto descriptivo emparejado con ellos, y los iconos decorativos necesitan ser ocultados a la tecnología de asistencia porque no tienen ningún valor más allá de la decoración. Así que para hacer esto, añadiremos un nuevo componente a la mezcla y ese será el para mí uso el componente de icono react de Font Awesome porque es genial porque debajo del capó usan SVGs y los preparan de una manera que los hacen decorativos por defecto. Y preparan los SVGs para hacerlos decorativos y luego puedes emparejarlos con etiquetas ARIA para hacerlos informativos según sea necesario. Así que aquí, sólo los renderizo si la prop icon se pasa al nivel del botón. Y si se pasa el icono, puedes renderizar el icono de Font Awesome, pasar el icono, estilizar si quieres y luego añadir si quieres un icono grande o pequeño. Así que es bastante genial. Y luego puedes emparejar ese icono con un texto de botón visible si quieres. O puedes emparejarlo con una etiqueta ARIA y pasarla... ¡Woo! ¡Guau! Muy bien.

Pásalo con un botón... Y también asegúrate de que si es un botón solo de icono, te aseguras de que estás añadiendo una etiqueta ARIA en él. Y también puedes tener clases personalizadas para sobrescribir los estilos. Y lo que también es agradable en él es que en tu widget de divulgación para cuando estás extendiendo este widget, puedes pasar cosas como un div y algún otro... Un párrafo en él. Y pasa una etiqueta aria, un icono, y... Si es un botón solo de icono. Y... Algunas clases más. ¡Y boom! Lo activó. Y es accesible.

Y luego puedes hacer lo mismo con ese mismo patrón y hacer una divulgación con una búsqueda de conmutación, con un formulario de búsqueda incrustado. Tomas el mismo widget de divulgación, metes un formulario, como hijos, y puedes usar un enfoque dirigido para la gestión. Así que lo que vamos a hacer aquí es pasar un texto de botón y un icono y poner en el on submit y prevenir la acción por defecto, y luego añadir en alguna búsqueda y valor... Ya sabes, las etiquetas y los nombres y el tipo de... Es una búsqueda... Tengo que leer mis cosas porque estoy tratando de mantener todo a tiempo. Como todo está incrustado en el formulario, estamos obteniendo nuestro atributo de botón gratis. Vamos a hacer... Voy a hablar muy rápidamente sobre la gestión de enfoque dirigida. Estamos haciendo la primera referencia de ítem, la gestión de enfoque dirigida. Así que básicamente cuando abres el widget, puedes establecer el enfoque directamente en el primer... Mi cerebro acaba de salir TDAH. ¡Vuelve! Cuando abres el widget, voy a enviarlo directamente a la entrada. Así que básicamente tienes esta primera referencia de ítem. También vas a pasar esa referencia de entrada directamente a esa primera referencia de ítem y cómo haces esto en tu uso del efecto, hay un if anidado. Si está abierto y si tienes una primera referencia de ítem, enfócala y pon esa primera referencia de ítem como el segundo ítem en el array de tu array en la parte inferior. Así que previenes re-renderizados. Y así es como puedes tener una gestión de enfoque dirigida para tu widget de divulgación. Y aquí es donde te das cuenta, oh, esto está extendiendo las cosas.

Esto es realmente genial. Tengo este genial widget de divulgación. Y es cuando tienes algo realmente genial y empieza a complicarse porque aquí es donde un diseñador empieza a entregarte cosas como la navegación de hamburguesa. Piensas, oh, puedo agregar esto a nuestro widget de divulgación. Y esto parece una navegación de hamburguesa, pero estos parecen botones, pero tal vez sean enlaces. Así que vamos a rediseñarlos para que parezcan enlaces para comunicar la intención. Y luego podría añadirlo a este widget, como introducir una lista desordenada con algunos enlaces en este widget de divulgación. ¡Genial! Guay. Mapear algunos enlaces. Eso podría ser genial. Podría hacer un enlace de menú de conmutación de este widget de divulgación. Bastante agradable. Empecemos a extender este patrón un poco más.

Oh, tal vez podríamos usar algunos botones aquí. No hay problema. Este es un patrón realmente poderoso. Añadamos algunos botones. No hay problema. Los enlaces son botones. No es gran cosa. Hagamos botones. Genial. Mapearlo con teclas, botones. Bonito.

¿Qué tal si hacemos un enfoque errante? Entonces, cuando tienes botones y cosas, ¿por qué no añadimos soporte para el teclado si subimos y bajamos con las flechas? Podemos añadir un enfoque errante a este widget de divulgación. Eso podría ser realmente divertido. Añadamos un manejador con devoluciones de llamada y estados y efectos y añadamos un gancho de enfoque errante aquí. Eso podría ser divertido. Añadamos eso a nuestro widget de divulgación. Así que vamos a añadir esto, y vamos a añadir esta función de enfoque errante para ver si estamos buscando códigos de teclas y con longitud. Y vamos a añadir esto a nuestro widget con una devolución de llamada. Y eso es bastante agradable.

Pero entonces, ¿qué tal si en lugar de una lista, hacemos una etiqueta personalizada? En lugar de un elemento de lista y un botón o un enlace, puedo simplemente crear una etiqueta personalizada. Una etiqueta constante igual a etiqueta, y puedo pasar cualquier etiqueta que quiera, enlace, botón, etiqueta P, cualquier cosa. Esto es súper eficiente. Puedo pasar cualquier elemento HTML que quiera aquí. Estoy ahorrando tiempo ahora. Esto es increíble. Puedo hacer todas estas cosas, pasar, extender mis propiedades, y luego puedo añadir este elemento de menú. Esto es realmente agradable. Esto es tan conciso ahora. Así que tagpalooza, y tengo algunos roles nuevos, otro rol ARIA aquí. No es gran cosa.

Y luego tendremos cierta separación de preocupaciones aquí con nuestro enfoque errante, nuestras listas desordenadas, y ahora tenemos un componente de elemento de lista, y ahora tenemos nuestros botones de menú, y ahora tenemos un componente de elemento de lista, tenemos la etiqueta elegante. Y luego tal vez deberíamos tener un poco de magia ternaria. Tal vez podamos añadir una lista. Tal vez podamos añadir esta lista de enlaces o lista de botones. O tal vez podamos hacer el enfoque errante. O tal vez podamos hacer esta otra cosa. Mira lo grande que está empezando a ser este widget de divulgación. Se está volviendo bastante grande, ¿verdad? Quiero decir, si está abierto, si es una lista, puedes hacer solo el widget, o podemos hacer, como, los hijos, así que podemos ser realmente elegantes. Una lista o hijos. ¿Pero es esto una buena idea? ¿O no es una buena idea? ¿De qué patrón hemos pasado? Hemos pasado de un widget de divulgación a un menú y una barra de menú. Hemos cambiado los roles de ARIA aquí al ser todos inteligentes y empezar a añadir etiquetas y roles y listas de menús. Así que simplemente hemos sobrecomplicado nuestra vida. Y al hacer eso, hemos confundido a nuestros usuarios de lectores de pantalla porque solo estamos mirando algo visualmente y simplemente metiendo cosas en este único componente. Así que no es una buena idea empezar a mezclar estos roles. Y simplemente empezaste a crear este patrón de mega menú y luego podrías empezar a añadir casillas de verificación y enlaces e incluso un menú tiene un rol de elemento de lista y una casilla de verificación tiene un rol de lista de radio, creo. Así que se está volviendo realmente difícil. Entonces, ¿qué estamos haciendo? Es muy importante mantener a tus usuarios separados, de lo contrario, empiezas a tomar decisiones imprudentes como crear platos con gelatina y mariscos y las cosas pueden salir mal muy rápidamente. Literalmente he tenido esta diapositiva en todas las charlas que he dado desde 2019, por cierto, estoy muy orgulloso. Pero es muy importante recordar no mezclar las máscaras, porque si mezclas las máscaras, las cosas pueden empezar a salir mal. El caos puede empezar a suceder y la gente puede volverse muy caótica. Y yo puedo simplemente sentarme allí. Creo que tengo pequeñas luces. No sé si mis luces van a funcionar. Puedo hacer que funcione. Voy a encontrar mis luces. ¿Mis luces? Mis luces están funcionando. Pero, si te vuelves aún más complejo, pueden ir aún peor. Porque cuando te vuelves demasiado complejo, eventualmente terminas con un carrusel en tu design system. En tu design system. Dios mío.

Tengo un carrusel. No quiero un carrusel en mi design system pero amo mi carrusel. Este es mi carrusel favorito. Dios mío. Buen clip. Buen clip. Lo tomaré. Buen clip. Bonito y algunos dinosaurios, a todos. Esto es épico. El dinosaurio es épico. Dios, es increíble. Es increíble. Mira, terminé con un carrusel. Vamos mal.

Así que debo decir, la community Open UI W3C está trabajando en una solución, por ejemplo, en widgets de divulgación, y por lo tanto habrá una solución para componentes nativos que vendrán para widgets de divulgación por lo que no tendremos que reconstruir esto pronto. Así que estoy muy feliz de decir que eso viene. Pero quiero decir, evita carnavales caóticos como el que acabas de ver, si puedes, y también como el que está en la pantalla aquí, que es el Carnaval de Via Reggio, que tiene algunas carrozas extremadamente grandes en Italia, y de lo contrario tendrás una experiencia completamente diferente a la que querías. Así que no mezcles tus máscaras, si puedes evitarlo.

Así que para concluir, los Design Systems, nuestro carnaval, nuestros usuarios son diversos... ¡No mezcles tus máscaras, no mezcles tus máscaras! o tomarás malas decisiones, y puedes terminar en un carnaval completamente diferente al que esperabas. Y una experiencia que no querías. Y los Design Systems siempre son la novedad. Gracias.