Los elementos interactivos de NIST aparecen. Además, por favor limita configuraciones de roles específicas que podrían ser problemáticas para la experiencia. Si tienes un cierto componente, digamos que permites a los usuarios modificar la propiedad de rol en HTML, tal vez en lugar de hacerlo abierto, intenta y restríngelo a propiedades que aún preservarán la experiencia accesible de tu componente. Así que ahora, una vez que hayas intentado todas esas cosas, intentando limitar la exposición de estas experiencias interactivas de NIST, el siguiente paso es intentar preservar y reestructurar tu experiencia para que se traduzca bien a los lectores de pantalla y otras herramientas de asistencia. Así que volvamos al ejemplo de Google y lo que podemos intentar aquí. Digamos que intentas desanidar la experiencia y fuiste capaz de mover estos elementos aparte, pero aún quieres crear esa experiencia de UX de los botones superponiéndose uno al otro, similar a otros patterns en la web. Una cosa que podemos hacer para crear esa experiencia es usar CSS para superponer los elementos y hacer que se apilen uno encima del otro. Eso te está dando el efecto de elementos interactivos anidados sin todos los efectos negativos en la accessibility y los usuarios de lectores de pantalla.
Otra estrategia que puedes intentar aquí para preservar la experiencia de UX, pero aún hacerla accesible, es que puedes jugar con las propiedades de rol de diferentes elementos para hacerlos trabajar de manera mucho más efectiva. En este ejemplo, digamos que el objetivo de clic dentro de esta área es el mismo que el objetivo exterior. En ese caso, una recomendación sería cambiar el rol del contenedor a algo genérico que realmente no se muestre a los usuarios de lectores de pantalla, pero preservando los botones internos para que los usuarios de lectores de pantalla puedan pasar el ratón sobre esa experiencia y escuchar ese objetivo de clic para que sepan activarlo si quieren seguir ese enlace. Y finalmente, esta es una sugerencia que abarca todo es, te animo, si estás intentando reestructurar estas experiencias, has desanidado y estás intentando recrear esta sensación en la UX para los usuarios de lectores de pantalla, a crear grupos de enfoque, hablar con los clientes, hablar con las personas que usan herramientas de asistencia y obtener sus comentarios sobre la interacción existente, recomendaciones sobre cómo mejorar la experiencia, o incluso trabajar con tus PMs y diseñadores sobre cómo puedes usar otras herramientas de ingeniería para crear una experiencia cohesiva para los usuarios de lectores de pantalla y los usuarios que utilizan otras herramientas de asistencia.
Y luego, una vez que hayas hecho todo esto, ahora que has solucionado tu problema de elementos interactivos anidados y está bien detrás de ti, te animo a compartir tus aprendizajes. Yo te animo a escribir documentation, compartirla en línea en Stack Overflow, en conferencias si eso es lo tuyo, y compartirla en línea porque estos problemas con elementos interactivos anidados, cuando estaba investigando, no había ninguna documentation y unas pocas pepitas de información fue lo que me ayudó realmente a resolver y crear una solución que funcionó para nuestro sitio web.
Así que dado eso, hablemos de lo que decidimos hacer con nuestro sitio web. Lo primero que intentamos hacer fue limitar estos patterns. Y lo intenté realmente duro. Intenté desanidar estos elementos interactivos para nuestro sitio, pero fue una pesadilla. El problema con nuestro sitio web es que muchos de estos componentes fueron construidos como parte de nuestra component library interna y estaban muy bien, uno, estaban muy bien anidados, y dos, se usaban muy ampliamente en todo nuestro sitio web. Así que para desanidar estos elementos y reestructurarlo de una manera que funcionaría con los lectores de pantalla en una estructura de DOM de HTML, habría cambiado nuestras props muy salvajemente y requeriría mucho refactoring no sólo en nuestra component library, sino en todos nuestros sitios asociados. Así que decidimos que, bueno, tal vez podríamos explorar eso en el futuro, por el momento queríamos abstenernos de hacer ese cambio sustancial porque requiere tanto refactoring. Así que en lugar de eso, lo que decidimos hacer fue realmente enfocarnos en dada la estructura del DOM de nuestros componentes, ¿qué podemos hacer para reestructurarlo de una manera que transmita el significado a nuestros clientes y facilite a los usuarios de lectores de pantalla? Así que volviendo a ese bug inicial, de vuelta en mi historia, tengo esta experiencia de lista, toda la fila es un botón de rol, y hay un botón dentro de él y estamos experimentando usuarios de lectores de pantalla. El primer paso que nos dimos cuenta fue 1, ese rol necesitaba ser un elemento de lista. Sí, hay un elemento clickable y por eso estábamos obteniendo bugs de accessibility. Pero para hacerlo accesible y transmitirlo a los usuarios de lectores de pantalla, necesitas asegurarte de que todos los elementos de una lista son de rol de elementos de lista para que funcione bien con los lectores de pantalla.
Y luego, eso realmente ayudó y solucionó el bug de accessibility que estábamos experimentando en esta área de botón justo aquí porque ahora no está anidado dentro de un botón y causando todo este lío para los usuarios de lectores de pantalla. También restringimos las propiedades para esta experiencia de lista empezamos a ir a nuestros socios y a recomendar y añadir en nuestra documentation indicando que si tienes un botón dentro de tu experiencia que ya es un objetivo de clic, no se recomienda hacer que toda la región sea clickable, de esa manera no causas todos estos problemas. Pero también teníamos elementos de lista, tenemos una component library muy compleja, también teníamos listas donde toda la fila estaba destinada a ser un botón. Para esas situaciones lo que decidimos hacer fue asegurarnos de que el contenedor exterior para toda esa fila fuera de rol de elemento de lista, pero añadimos un rol adicional de un botón dentro de él. Así que cuando los usuarios de lectores de pantalla están navegando esta experiencia pueden escuchar y escuchar que este contenedor entero es una lista con elementos de lista y luego dentro del elemento de la lista hay un objetivo de clic al que pueden navegar.
Y luego para nuestras experiencias de carrito completas, para esta situación nos dimos cuenta de que a lo largo de nuestro sitio el contenedor entero de ese carrito es el mismo que el objetivo de clic interno, así que decidimos cambiar el rol del contenedor exterior a un rol genérico de grupo que básicamente es solo un término genérico que dice que toda esta área es una colección de cosas.
Comments