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

Rate this content
Bookmark

Los componentes del Sistema de Diseño son como invitados en un Carnaval Veneciano, disfrutando de las festividades. Un invitado, el widget de divulgación, lleva tres máscaras distintas, elevando un Carnaval a un Baile de Máscaras. O... ¿lo es? ¿A qué tipo de Carnaval estás asistiendo si esas máscaras se mezclan? En esta charla, aprenderás el secreto para crear un componente reutilizable, y accesible, que puede enmascararse como muchos y dar a tu biblioteca de componentes acceso a las atracciones más exclusivas del Carnaval.

27 min
13 Nov, 2023

AI Generated Video Summary

La Charla discute el concepto de Carnaval del sistema de diseño y su relación con las máscaras. Enfatiza la importancia de la accesibilidad en los sistemas de diseño y proporciona pautas para implementar el patrón de Divulgación Así Ocultar. La Charla también cubre temas como la gestión del enfoque, las interacciones del ratón y la extensión del widget de divulgación. Advierte contra la mezcla de diferentes roles y complejidad en los sistemas de diseño, utilizando el ejemplo de un carrusel. En general, la Charla destaca los desafíos y consideraciones al crear sistemas de diseño efectivos.

1. Introducción al Sistema de Diseño Carnival

Short description:

Bienvenidos a todos. Soy Kathleen McMahon, y estoy aquí hoy para hablar sobre el sistema de diseño Carnival. Mi presentación se publicará en notice. Eso es https://notist.org. Incluyendo enlaces a recursos. Después de mi charla. Algún tiempo. 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.

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.

2. Sistema de Diseño Carnival y Máscaras

Short description:

Es literalmente el donde está Wally del océano. He trabajado en algunos sistemas de diseño incluyendo O'Reilly media, Watch Darkly, más recientemente, más recientemente, Northwestern Mutual, y me encantan los sistemas de diseño. Siempre son la novedad. Y los sistemas de diseño son como arrear gatitos. Siempre divertido. Muchas partes móviles. Y creo que los sistemas de diseño 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. 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.

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.

3. Sistema de Diseño Carnival y Accesibilidad

Short description:

Máscaras como la bauta, maretta, gagna y arlequín proporcionan acceso y libertad. La accesibilidad a menudo se maneja al final, dejando atrás a los usuarios. El informe WebAimillion muestra resultados preocupantes, con un aumento significativo en los atributos ARIA y los errores detectados. La guía de prácticas de autoría ARIA proporciona pautas y ejemplos, incluyendo el widget de divulgación para ventanas emergentes, consejos de conmutación y búsquedas de conmutación.

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.

4. Implementación del Patrón de Divulgación Así Ocultar

Short description:

El sitio WAI o el sitio APG tiene un patrón llamado el Patrón de Divulgación Así Ocultar. Proporciona pautas para implementar interacciones de teclado, soporte ARIA y gestión de estado. Utilizando los atributos y hooks apropiados en React, puedes crear un widget de divulgación que permita a los usuarios abrir y cerrar contenedores con facilidad. Además, puedes mejorar el widget con características como la gestión del enfoque, asegurando una experiencia de usuario sin problemas.

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.

5. Implementación de la Gestión de Enfoque y Clics del Ratón

Short description:

Para habilitar la gestión del enfoque, crea una referencia de botón, inicializa useRef a null y escucha las pulsaciones de la tecla ESC. Prueba con usuarios de tecnología de asistencia y normaliza los estados de enfoque de CSS. Establece una relación de contraste consistente de tres a uno para los controles interactivos. Personaliza otros estilos según sea necesario. Implementa la gestión de clics del ratón con una referencia de contenido y un manejador de clics fuera.

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.

6. Implementando Interacciones del Ratón e Iconos

Short description:

Para gestionar las interacciones del ratón, utiliza el hook useRef y los oyentes de eventos para mouse up y key up. Implementa una función de limpieza para eliminar los oyentes de eventos perdidos. Esto se puede utilizar para crear consejos de conmutación, que son diferentes de las descripciones emergentes. Los iconos pueden ser informativos o decorativos. Utiliza el componente de icono react de Font Awesome para renderizar iconos SVG y combínalos con etiquetas ARIA para la accesibilidad.

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.

7. Implementando el Widget de Divulgación

Short description:

Pasa un botón con clases personalizadas y etiqueta ARIA. Extiende el widget con una divulgación que contiene un formulario de búsqueda. Utiliza la gestión de enfoque dirigida para establecer el enfoque en abrir. Previene re-renderizados optimizando el uso del efecto. Esto extiende la funcionalidad del widget.

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.

8. Extendiendo el Widget de Divulgación

Short description:

Tengo este genial widget de divulgación que puede ser extendido para incluir una navegación de hamburguesa y ser rediseñado para parecer enlaces. También puede incorporar una lista desordenada con enlaces y ser utilizado como un enlace de menú de conmutación.

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.

9. Añadiendo Botones y Enfoque Errante

Short description:

Añadamos botones e implementemos el enfoque errante en el widget de divulgación. Podemos crear una etiqueta personalizada en lugar de un elemento de lista y añadir cualquier elemento HTML que queramos. Esto es súper eficiente y permite un código conciso. No es gran cosa.

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.

10. Mezclando Roles y Complejidad

Short description:

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. ¿Pero es esto 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ú. 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. 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 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 sistema de diseño. En tu sistema de diseño. Dios mío.

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.

11. Los Peligros de Mezclar Máscaras

Short description:

Tengo un carrusel. No quiero un carrusel en mi sistema de diseño pero amo mi carrusel. Este es mi carrusel favorito. Así que no mezcles tus máscaras, si puedes evitarlo. Los sistemas de diseño siempre son la novedad.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Axe-core is a popular accessibility testing engine that is used Google, Microsoft, and hundreds of other companies to ensure that their websites are accessible. Axe-core can even integrate into many popular testing frameworks, tools, and IDEs. In this advanced session, we'll be learning how to configure axe and its integrations to fine tune how it runs and checks your pages and code for accessibility violations.
JSNation 2022JSNation 2022
24 min
a11y and TDD: A Perfect Match
Accessibility has been web development's ugly duckling for quite some time now. I often get asked, "when should you test for a11y in your apps?" My answer is simple, "right from the start!". Regardless of the framework considered - React, Svelte, Vue, YourOwn™️ - as developers we are in a privileged position to help the ugly duckling grow into a beautiful swan. How? By diving deep into the pond and harnessing the power of Javascript APIs to build the right components for your web apps. And how can do you know you are building them right? By pairing Test Driven Development with the Testing Library family. Ready to grow your web apps into swans?
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.
React Advanced Conference 2021React Advanced Conference 2021
32 min
How to do Good Without Doing Anything
There’s no arguing that building accessible websites is a force for good. But ensuring that our React websites and apps work for everyone can be time-consuming and isn’t always easy to get right. Luckily, investing a little bit of time on your accessibility workflow and setting up a series of automated tools will end up saving you tons of time and energy in the long run.In this talk I will demonstrate how you can leverage automated tools, clearly documented code standards and a well-defined development process in order to make building and testing accessible React apps a breeze. I will discuss the ways that I automate certain aspects of my development workflows to catch accessibility errors, define and set up tests and go through the entire lifecycle of accessibility feature development using a real-world example.
JSNation 2023JSNation 2023
30 min
Accessible Component System Through Customization
Most current UI libraries provide great user experience with a vast of components. But when it comes to heavy customization, and non-standard scenarios, especially for E-Commerce, they become hard to manage, scale or even slow down performance.
How to create a UI library that provides users the most possible freedom in customizing components, while keeping our performance and scalability to the fullest? How much accessible we can provide out of the box to our users? How much customization freedom is enough?
That's what my talk's about.

Workshops on related topic

React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creating Accessible React Native Apps
Workshop
React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in!