Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad

Rate this content
Bookmark

Se han desarrollado numerosas y notables nuevas experiencias de UX a lo largo de los años, como tarjetas que muestran una variedad de productos e ítems de listas clickeables con opciones de menú dinámicas, entre otros. Sin embargo, solo unos pocos son conscientes de los desafíos involucrados en la construcción de estas estructuras teniendo en cuenta la accesibilidad, y desafortunadamente, algunas de ellas son completamente inaccesibles.


En la charla de hoy, exploraremos algunos de estos patrones de UX web prevalentes y nos adentraremos en los desafíos ocultos que presentan. Si bien podemos ser capaces de mitigar algunos de estos problemas, otros sirven como cuentos de advertencia en accesibilidad.

This talk has been presented at React Advanced 2023, check out the latest edition of this React Conference.

FAQ

Catherine Johnson, también conocida como Cat Johnson, es una ingeniera de software que trabaja en Microsoft y se especializa en accesibilidad, enfocándose principalmente en componentes web de front-end y componentes de React.

Cat Johnson se encontró con problemas de accesibilidad relacionados con elementos interactivos anidados en la web, específicamente con el manejo incorrecto de roles de HTML en componentes interactivos que afectaban a los usuarios de lectores de pantalla.

Los elementos interactivos anidados son elementos interactivos que están anidados dentro de otros elementos interactivos. Estos pueden causar problemas con los lectores de pantalla porque no se leen correctamente al estar anidados de manera que contradice las recomendaciones básicas de HTML.

El enfoque inicial de Cat Johnson fue modificar los roles de HTML de los componentes para ajustarlos a las expectativas de accesibilidad, como cambiar un rol de 'botón' a 'elemento de lista' y viceversa, según los problemas identificados por los testers de accesibilidad.

Cat Johnson sugiere desanidar elementos interactivos siempre que sea posible, restringir configuraciones de componentes que puedan causar conflicto, y utilizar CSS para superponer los elementos en lugar de anidarlos, manteniendo la experiencia de usuario pero mejorando la accesibilidad.

Cat Johnson puede ser contactada a través de su sitio web catinthemachines.com, donde se muestra entusiasta de discutir sobre accesibilidad, arquitectura web y componentes de React.

Cat Johnson
Cat Johnson
23 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Los elementos interactivos anidados pueden causar problemas de accesibilidad en los sitios web, y el orador comparte una experiencia personal con un error de accesibilidad que involucra un componente de lista. Mitigar las estructuras interactivas anidadas implica limitar estos patrones durante el desarrollo y reestructurar los elementos existentes. El orador proporciona recomendaciones para mejorar la accesibilidad, como ajustar las propiedades de los roles y recopilar comentarios de los usuarios. La conclusión enfatiza la importancia de las soluciones accesibles y fomenta la compartición de recursos para construir experiencias más inclusivas.

1. Introducción a los Elementos Interactivos Anidados

Short description:

Bienvenidos a mi charla de hoy. Vamos a hablar sobre elementos interactivos anidados y una pesadilla de accesibilidad. Mi nombre es Catherine Johnson, ingeniera de software en Microsoft especializada en accesibilidad. Permítanme compartir una historia sobre mi interacción con los componentos interactivos de Nesta. Me encontré con un error de accesibilidad en nuestro sitio que involucraba un componente de lista. Inicialmente, la fila de la lista tenía un rol de botón, pero necesitaba ser un elemento de lista. Sin embargo, más tarde, recibimos comentarios de que debería ser un botón de nuevo. A veces, la orientación sobre accesibilidad cambia.

Bueno, bienvenidos a todos. Bienvenidos a mi charla de hoy. Vamos a hablar sobre elementos interactivos anidados y una pesadilla de accesibilidad. Mi nombre es Catherine Johnson, y gracias por acompañarme hoy. Entonces, como mencioné, mi nombre es Cat Johnson. Soy ingeniera de software. Trabajo en Microsoft, y enfoco gran parte de mi trabajo en los componentes web de front-end, específicamente en los componentes de React, y me especializo en accesibilidad. Aquí, por ejemplo, es uno de los sitios web en los que trabajo mucho en mi trabajo diario. Esta es la página de Tu Información en account.Microsoft.com. Hoy, voy a comenzar con una pequeña historia sobre mi trabajo y mi interacción con los componentes interactivos de Nesta. Entonces, en mi trabajo diario, estaré trabajando y programando como uno lo hace, y un día estaba trabajando, y me encontré con un error de accesibilidad en nuestro sitio. Estaba hablando con el probador, y me estaban explicando que había un problema con una sección de código en nuestra página. Esta era más o menos el área de nuestra UX con la que estaba teniendo un problema. Entonces, este contenedor completo aquí es un componente de lista que construimos en React. Aquí, puedes ver que tiene el rol de lista en HTML. Y dentro de él, tenemos una fila de lista dentro de esa lista, y tiene el rol de un botón. Le dimos el rol de botón porque toda esa fila de la lista es clickeable y es muy interactiva. Pero el error de accesibilidad nos dijo que, hey, el rol de lista, como el rol de botón, ahora necesita ser una lista. No es accesible. Entonces, recibí esa retroalimentación. Pensé, genial, perfecto. Vamos a eliminarlo, vamos a cambiarlo, vamos a cambiarlo a un rol de elemento de lista. Entonces, vuelvo a mi estación de trabajo, tecleo, lo arreglo. Envío el código, lo dejo en mi cerebro, y continúo mi trabajo. Entonces, pasan unos meses, estoy trabajando de nuevo, me encuentro con otro error de accesibilidad. Esta vez el probador me está explicando que es muy similar o está en la misma experiencia. Entonces, podemos ver que es la misma lista, todo tiene un rol de lista. Y esa fila que cambiamos a un elemento de lista, el probador de accesibilidad dijo, hey, no, no podemos tener un rol de elemento de lista en esto, todo esto es un botón y es clickeable y tiene interacción del usuario. Entonces, para los usuarios de lectores de pantalla, necesitábamos tener un rol de botón para explicar eso a los usuarios. Al principio, estaba un poco confundida con esta retroalimentación porque antes era un botón, pero ahora es un rol de elemento de lista, ¿cuál debería ser? Pero ¿sabes qué? A veces la accesibilidad

2. Elementos Interactivos Anidados y Errores de Accesibilidad

Short description:

Me encontré con un error de accesibilidad en nuestro sitio que involucraba un componente de lista. El error de accesibilidad indicaba que cuando los usuarios de lectores de pantalla navegaban a este botón interno, comenzaba a garabatearse y no se leía correctamente. Decidí que no iba a solucionar este problema de inmediato. Necesitaba investigar qué estaba sucediendo en esta experiencia para poder determinar realmente cuál es la mejor solución para nuestro sitio. Me di cuenta y descubrí que los problemas del lector de pantalla que estoy experimentando están todos relacionados con problemas en torno a los elementos interactivos anidados. Los elementos interactivos anidados son esencialmente elementos interactivos que están anidados dentro de otros elementos interactivos.

La orientación cambia. Así que, estaba como, está bien, no hay problema. Lo cambiaré a un botón. Eso está bien. No hay problema. Continúo con mi trabajo, lo arreglo, y luego pierdo totalmente la cabeza hasta algún tiempo después. Y de nuevo, trabajando en mi escritorio, recibo un error de accessibility, y este error de accessibility es ligeramente diferente. Así que, es la misma lista, la fila tiene un rol de botón, y dentro de toda esa fila, hay un botón que tenemos para los usuarios, y el error de accessibility indicaba que cuando los usuarios de lectores de pantalla navegaban a este botón interno justo aquí en el área verde, comenzaba a garabatearse, y no se leía correctamente. Y luego, encima de eso, el probador de accessibility dijo que toda la fila debería ser una lista de propiedades. Así que, en este punto, estoy simplemente alucinado. Estoy muy frustrado. No sé qué está causando el problema del lector de pantalla que hace que este botón interno se lea de manera extraña, pero hay muchos problemas de comunicación en torno a cuáles deberían ser estos roles y estas propiedades para que funcionen con los lectores de pantalla y las herramientas de asistencia. Así que, en este punto, decidí que no iba a solucionar esto de inmediato. Necesito investigar qué está pasando en esta experiencia para poder determinar realmente cuál es la mejor solución para nuestro sitio. Así que, comienzo a hacer algunas investigaciones. Empiezo a profundizar en ello, y he bloqueado el problema en dos puntos. Primero, necesito solucionar el problema del lector de pantalla porque en este momento tal como existe mi experiencia, está causando problemas y los usuarios que están utilizando lectores de pantalla u otras herramientas no pueden navegar a este botón interno y no pueden activar la experiencia que quieren usar. Luego el segundo problema que necesito solucionar es que necesito averiguar qué está pasando con este elemento de lista o botón o cualquier rol, como la falta de comunicación. ¿Por qué no está claro qué rol debería ser? Y necesito averiguar qué debería ser realmente. Así que empiezo a hacer algunas investigaciones. Empiezo a buscar en línea, buscando qué es el problema del lector de pantalla? ¿Qué está pasando ahí? Y es durante este proceso que me doy cuenta y descubro que los problemas del lector de pantalla que estoy experimentando están todos relacionados con problemas en torno a los elementos interactivos anidados. Así que vamos a profundizar en qué son los elementos interactivos anidados y por qué podrían estar causando problemas para nuestro sitio. Así que como una breve nota al margen, los elementos interactivos anidados son muy claros, como los elementos interactivos anidados son esencialmente elementos interactivos que están anidados dentro de otros elementos interactivos. Así que aquí hay un ejemplo muy simple y breve de código que es un gran ejemplo de muchos casos de elementos interactivos anidados. Tenemos un elemento que tiene un rol de botón y dentro de él tenemos un enlace que tiene un objetivo de clic específico. Ahora este ejemplo, cuando pensamos en HTML básico, mucho HTML básico no recomienda que pongamos botones dentro de enlaces. Así que si miras hacia atrás a la web de los años 90, nunca realmente tuvo sentido poner enlaces dentro de botones. Causaba problemas de objetivo de clic. Pero lo más notable es que realmente no había muchos buenos ejemplos de usuarios que quisieran una experiencia así. Y no se traducía bien al HTML. Así que muchos de los primeros sitios no tenían realmente enlaces dentro de botones y usabas un enlace o usabas un botón.

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

Accesibilidad en Discord
React Advanced 2021React Advanced 2021
22 min
Accesibilidad en Discord
This Talk discusses the accessibility efforts at Discord, focusing on keyboard navigation and the challenges faced with implementing focus rings and outlines. The speaker showcases a unified focus ring system and a saturation slider to address accessibility concerns. They also highlight the implementation of role colors and the use of CSS filters for accessibility improvements. The Talk concludes with insights on runtime accessibility checking and the development of a performant core runtime system for checking accessibility issues.
Configurando las Pruebas de Accesibilidad de Axe
TestJS Summit 2021TestJS Summit 2021
30 min
Configurando las Pruebas de Accesibilidad de Axe
Top Content
AXe is an accessibility engine for automated web UI testing that runs a set of rules to test for accessibility problems. It can be configured to disable or enable specific rules and run based on tags. Axe provides various options, but axe linter does not support all options. The importance of investing time and resources in accessibility is emphasized, as it benefits not only those with disabilities but improves the web for everyone. Manual testing is also highlighted as a necessary complement to automated tests for addressing accessibility issues.
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
JSNation 2023JSNation 2023
10 min
Dilemas de los diálogos y travesuras modales: Un análisis profundo de las ventanas emergentes
The Talk discusses the use of dialogues and popovers in web development. Dialogues can be modal or non-modal and are now accessibility-supported. Popovers are versatile and can be added to any element without JavaScript. They provide suggestions, pickers, teaching UI, list boxes, and action menus. Modal and non-modal dialogues and popovers have different behaviors and dismissal methods. Browser support for these features is expanding, but there are still open questions about positioning, semantics, and other use cases.
a11y y TDD: Una Combinación Perfecta
JSNation 2022JSNation 2022
24 min
a11y y TDD: Una Combinación Perfecta
This Talk explores the intersection of accessibility and test-driven development (TDD) in software development. TDD is a process that involves writing tests before writing production code, providing a safety net for code changes. The Talk demonstrates how to apply TDD principles to real-life examples, such as filling out a form, and emphasizes the importance of user-centric testing. By using atomic design principles, code can be organized in a clean and easy way. The Talk also discusses the use of labels and test IDs in tests for improved accessibility.
Cómo hacer el bien sin hacer nada
React Advanced 2021React Advanced 2021
32 min
Cómo hacer el bien sin hacer nada
Accessibility is about making sure everyone can participate on the web, regardless of disability. Automated tools like Lighthouse and React Axe help identify accessibility errors and provide guidance on fixing them. Unit tests validate ARIA attributes and keyboard navigation, while integration and end-to-end tests focus on outcomes and simulate user experiences. Cypress.io is an open-source testing framework with excellent accessibility support. Implementing small changes leads to a deep understanding of web accessibility and bug resilience.
Sistema de Componentes Accesibles a través de la Personalización
JSNation 2023JSNation 2023
30 min
Sistema de Componentes Accesibles a través de la Personalización
The Talk discusses the importance of building an accessible UI component library, focusing on reusability, customizability, and responsiveness. It emphasizes the need for visual and functional consistency when developing components and highlights the key aspects of accessibility, including keyboard navigation, contrast, and content structure. The Talk also covers the building of accessible dialogues and provides tips for enhancing user experience. It emphasizes the significance of documentation, scalability, and customization in component planning. The Talk concludes by discussing the use of ARIA, accessibility testing, and strategies for persuading organizations to prioritize accessibility.

Workshops on related topic

Accesibilidad web para Ninjas: Un enfoque práctico para crear aplicaciones web accesibles
React Summit 2023React Summit 2023
109 min
Accesibilidad web para Ninjas: Un enfoque práctico para crear aplicaciones web accesibles
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
En este masterclass práctico, te proporcionaremos las herramientas y técnicas que necesitas para crear aplicaciones web accesibles. Exploraremos los principios del diseño inclusivo y aprenderemos cómo probar nuestros sitios web utilizando tecnología de asistencia para asegurarnos de que funcionen para todos.
Cubriremos temas como el marcado semántico, los roles de ARIA, los formularios y la navegación accesibles, y luego nos sumergiremos en ejercicios de codificación donde podrás aplicar lo que has aprendido. Utilizaremos herramientas de prueba automatizadas para validar nuestro trabajo y asegurarnos de cumplir con los estándares de accesibilidad.
Al final de este masterclass, estarás equipado con el conocimiento y las habilidades para crear sitios web accesibles que funcionen para todos, y tendrás experiencia práctica utilizando las últimas técnicas y herramientas para el diseño inclusivo y las pruebas. ¡Únete a nosotros en este increíble masterclass de codificación y conviértete en un ninja de la accesibilidad web y el diseño inclusivo!
Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Pruebas automatizadas de accesibilidad con jest-axe y Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
¿Incluyen tus pruebas automatizadas verificaciones de accesibilidad? Este masterclass cubrirá cómo comenzar con jest-axe para detectar violaciones de accesibilidad basadas en código, y Lighthouse CI para validar la accesibilidad de las páginas completamente renderizadas. Ninguna cantidad de pruebas automatizadas puede reemplazar las pruebas manuales de accesibilidad, pero estas verificaciones se asegurarán de que tus probadores manuales no estén haciendo más trabajo del necesario.
Accesibilidad web en aplicaciones JavaScript
React Summit 2022React Summit 2022
161 min
Accesibilidad web en aplicaciones JavaScript
Workshop
Sandrina Pereira
Sandrina Pereira
A menudo vemos que JavaScript daña la accesibilidad de un sitio web. En esta masterclass, aprenderás cómo evitar errores comunes y cómo utilizar JS a tu favor para mejorar la accesibilidad de tus aplicaciones web.
En esta masterclass exploraremos múltiples ejemplos del mundo real con problemas de accesibilidad, y aprenderás cómo hacer que funcionen para las personas que utilizan un mouse o un teclado. También aprenderás cómo se utilizan los lectores de pantalla, ¡y te mostraré que no hay razón para tener miedo de usar uno!
Únete a mí y déjame mostrarte cómo la accesibilidad no limita tus soluciones o habilidades. ¡Al contrario, las hace más inclusivas!
Al final, serás capaz de:- Comprender los principios de WCAG y cómo están organizados- Conocer casos comunes en los que JavaScript es esencial para la accesibilidad- Crear enlaces, botones y elementos conmutables inclusivos- Utilizar regiones en vivo para errores y estados de carga- Integrar la accesibilidad en el flujo de trabajo de tu equipo de inmediato- Darte cuenta de que crear sitios web accesibles no es tan difícil como parece ;)
Creando aplicaciones React Native accesibles
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creando aplicaciones React Native accesibles
Workshop
Scott Vinkle
Scott Vinkle
React Native es un framework utilizado para crear aplicaciones nativas de iOS y Android de una manera con la que los desarrolladores web ya pueden estar familiarizados. Pero, ¿cómo asegurarse de que tus aplicaciones React Native sean inclusivas y utilizables para todos? Scott compartirá consejos sobre cómo probar y construir aplicaciones React Native con accesibilidad integrada.