causar más problemas de accesibilidad. Así que si tu sitio web tiene botones y enlaces, por favor asegúrate de que estén indicados como botones y enlaces en tu HTML. Entonces, realmente tendremos que encontrar otra forma de solucionar este problema. Pero no te preocupes, porque he experimentado este problema. En un sitio web anterior en el que trabajé, después de desarrollar gran parte de la funcionalidad en la biblioteca de componentes de React, nos dimos cuenta de que teníamos este problema en todas partes, desde nuestros componentes de tarjetas hasta diferentes listas y otros campos de formulario dentro de nuestro sitio web. Había elementos interactivos anidados por todas partes, lo que causaba problemas con todas nuestras herramientas de asistencia. Entonces, la gran pregunta es, ¿cómo mitigamos este problema? ¿Cómo lo solucionamos? ¿Cómo mejoramos esto para nuestros usuarios? Bueno, hay varias formas de abordar este problema. Primero, si aún no has comenzado tu sitio web o no has desarrollado tu biblioteca de componentes, hay muchas cosas que puedes hacer antes de comenzar. Lo primero que puedes hacer es, si es posible, desanidar estos elementos interactivos. Asegúrate realmente de que no estén dentro uno del otro. Muévelos fuera de los elementos interactivos anidados y haz que sean un elemento interactivo separado por sí mismos. Y si tienes una biblioteca de componentes, algo que recomendaría es que, al comenzar, limites las configuraciones de los desarrolladores para tu biblioteca de componentes. Como establecer el strong typing y las propiedades de rol para que si alguien pasa alguna funcionalidad, realmente estés limitando el alcance y asegurando que no se creen muchos problemas de accesibilidad. Pero probablemente te estés preguntando, ¿qué pasa si ya he escrito todo mi sitio web? ¿Qué pasa si ya he escrito todo mi sitio web o toda mi biblioteca de componentes y está por todas partes y no sé cómo solucionarlo para mi empresa sin que sea muy costoso? Bueno, hay algunas otras cosas que podemos hacer aquí. Veamos el ejemplo de Google. Digamos que tu diseñador dice que este diseño debe verse exactamente así, que realmente necesitamos tener esta experiencia de tarjeta interactiva con un botón dentro de ella para un menú desplegable y no podemos cambiar realmente la experiencia de usuario para eso. Bueno, una cosa que puedes intentar es desanidar primero esos elementos y luego puedes usar propiedades CSS para superponer realmente ese botón uno encima del otro. Creará el efecto visual de que están anidados, pero en cuanto a la semántica, no están anidados y están separados en la estructura del DOM. Así reducirás el problema de crear errores de accesibilidad en tu sitio web. Pero digamos que no puedes desanidarlos por alguna razón. Bueno, y te animo a tener mucho cuidado aquí, puedes intentar modificar algunos de los roles. Ahora, quiero que tengas mucho cuidado con esto porque podrías ocultar accidentalmente mucha funcionalidad de clic en tu sitio web. Pero con este ejemplo, lo que pudimos hacer es dentro de ese menú desplegable, ya había un objetivo de clic para activar toda la tarjeta. Entonces, pudimos establecer el div externo como un rol genérico de grupo o incluso podríamos eliminar completamente el rol y hacer que el objetivo de clic sea muy genérico. Pero sabiendo que los usuarios que usan lectores de pantalla u otras herramientas de asistencia pueden usar ese botón desplegable para hacer clic en la acción del botón completo. Así que hay algunas cosas con las que puedes experimentar. Pero cuando juegues con los roles, te animo a tener mucho cuidado. Pero en general, si estás probando alguna de estas funcionalidades, cualquiera que sea la opción que elijas, te animo a realizar grupos de enfoque con usuarios que utilicen diferentes herramientas de asistencia. Te darán comentarios sobre si es realmente claro, si es realmente conciso, si funciona con tu herramienta o funcionalidad, y podrán navegar fácilmente por tu sitio web sin problemas. Y en general, sin importar qué opción elijas, te animo a compartir tus aprendizajes sobre qué enfoque tomaste. Escribe documentación dentro de tu empresa, comparte tus aprendizajes en línea porque en general, las soluciones accesibles están en constante evolución. Sé que cuando me encontré con este problema hace años, no había documentación en línea sobre cómo resolver este problema. Entonces, cualquiera que sea la opción que elijas para tu empresa o para tu sitio web, por favor documenta y compártelo en línea para que podamos crear constantemente soluciones mejores y más accesibles. Y si realmente disfrutaste de mi presentación y quieres ver más, mi nombre es Kat Johnson, y espero que te pongas en contacto y me sigas en mi sitio web, katinamachines.com, o en mi LinkedIn. Muchas gracias por acompañarme en esta presentación, y espero que tengas un excelente resto de tu tiempo en la Cumbre de React. Gracias.
Comments