Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad

Bienvenidos a todos. Gracias por unirse a mí aquí hoy. Hoy voy a hablar sobre los Elementos Interactivos Anidados en la Accesibilidad de Nightmare. Solo tenemos un tiempo limitado para esta charla, así que vamos a empezar rápidamente. Pero antes de comenzar realmente, déjenme contarles un poco sobre mí. Mi nombre es Kat Johnson. Soy una ingeniera senior de front-end en Khan Academy y me encanta hablar sobre la accesibilidad y cómo crear sitios web accesibles. Así que vamos a sumergirnos en el tema. Pero antes de adentrarnos en cómo solucionar este problema, hablemos de qué son los Elementos Interactivos Anidados. Es posible que no hayan escuchado hablar de ellos. Los Elementos Interactivos Anidados, en términos muy simplificados, son elementos interactivos anidados dentro de otros elementos. Por ejemplo, tener un enlace dentro de otro enlace o un botón dentro de otro botón. Aquí hay un pequeño fragmento de código que muestra esto. La razón por la que esta estructura es problemática es porque es un HTML incorrecto. En los primeros días de los sitios web y la web, no tenía mucho sentido anidar botones dentro de botones o enlaces dentro de enlaces. Realmente no había un caso de uso para esto. Pero a medida que la web ha evolucionado, estamos viendo esto cada vez más en muchas de nuestras experiencias de usuario en la web, desde Google hasta este sitio web que me gusta usar llamado The Mountaineers. Encontrarán muchos botones o enlaces dentro de enlaces y algunos de estos pequeños menús de botones. Pero es posible que se pregunten, ¿cuál es el problema? Puede que sea incorrecto semánticamente en HTML, pero como usuario, nunca tuve problemas al usar esta experiencia. Puedo hacer clic, navegar y usar muchos de estos botones anidados. Así que no parece ser un gran problema. El problema real es que, al ser un HTML incorrecto, afecta mucho a los lectores de pantalla y otras herramientas de asistencia. Debido a que es un HTML incorrecto, muchos lectores de pantalla y otras herramientas de asistencia, cuando leen su HTML, no saben cómo leer esa información y transmitirla al usuario. Esto suele causar muchos errores y una gran falta de comunicación para muchas herramientas de asistencia, lo que dificulta mucho que los usuarios interactúen con su sitio web. Entonces, ahora deben estar pensando, bueno, podría solucionar esto. Simplemente eliminaré el atributo de rol igual a botón o usaré un div HTML genérico y dejaré la funcionalidad de clic. Eso debería solucionar este problema de accesibilidad, ¿verdad? Bueno, están equivocados. No hagan esto. Es posible que estén solucionando el problema de los elementos interactivos anidados, pero ahora están ocultando elementos interactivos de otros lectores de pantalla y otras herramientas de asistencia. Entonces, cuando un usuario navega por su sitio web con Narrator o NVDA, pasarán por este elemento en su HTML y no anunciará que es un botón en el que necesitan hacer clic. Ocultarán esa información y realmente degradarán la experiencia de su sitio web y

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.