My Heart Is In the Right Place, but the DOM Isn't

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Project website
Rate this content

An enthusiastic look at some real-life horror stories of accessibility gone wrong. Learn accessibility best practices by examining cases where some people (myself included) built the right things the wrong way. Some customers were simply confused, while others literally became nauseous of what was built. Come learn from (my) mistakes while having a good laugh.

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

Kyle West
Kyle West
18 min
17 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Kyle West enfatiza la importancia de construir productos accesibles y comparte experiencias para garantizar la accesibilidad. Un enfoque en etiquetas ARIA precisas y el impacto en la accesibilidad. Optimización de la accesibilidad con etiquetas adecuadas y utilizando el atributo aria-hidden. Lecciones en el uso de ARIA, el atributo tabindex y la importancia de revisiones de código de calidad. Abordar los trastornos vestibulares en el diseño web con soluciones como la media query prefersReduceMotion. Mejorar la comodidad del usuario con consultas de accesibilidad y la importancia de un diseño inclusivo centrado en el usuario en el desarrollo de productos.

1. La Importancia de la Accesibilidad en el Desarrollo Web

Short description:

Kyle West, ingeniero web y líder de accesibilidad, enfatiza la importancia de construir productos accesibles. Compartiendo experiencias y desafíos enfrentados para garantizar la accesibilidad, incluyendo una anécdota interesante sobre 'potato code' encontrada durante una interacción con el usuario.

Hola a todos. Me llamo Kyle West. Soy ingeniero web y líder de accesibilidad para Family Search. El título de mi charla es Mi Corazón Está en el Lugar Correcto, pero el DOM No. Uno de mis roles principales es que soy coautor de nuestra biblioteca de sistemas de diseño React, que se utiliza mucho en todos nuestros productos. Como autor de un sistema central que es utilizado por la mayoría de nuestros, casi todos nuestros usuarios, siempre he sentido una responsabilidad adicional por construir un producto accesible que esté disponible para todos. Esto a menudo me ha llevado a la guía de prácticas de autoría ARIA, que es proporcionada por W3C. Es un recurso maravilloso para cualquiera que esté tratando de construir un producto que se ajuste a las mejores prácticas de la industria.

Si has estado allí antes, sin duda habrás visto este banner en la parte superior, que dice, No ARIA es mejor que un mal ARIA. Tienen un enlace maravilloso al que podríamos hacer clic y leer juntos si quisiéramos, pero es muy lógico y explica totalmente por qué eso es importante. Pero he aprendido más que de la documentación. He tenido mis propias experiencias de vida. A lo largo de mi tiempo, he visto muchas veces en las que yo y otros hemos intentado hacer lo correcto, pero no lo hicimos lo suficientemente bien como para ser efectivos. Tengo unas tres de esas historias que me gustaría compartir contigo.

La primera para empezar, probablemente hayas oído hablar de spaghetti code y probablemente con él ravioli code, pero probablemente no hayas oído hablar de potato code, que es el título de mi primera historia. Para dar un poco de contexto, una cosa que hago es reunirme periódicamente con algunos de mis clientes ciegos para entender cómo es su experiencia e identificar cualquier problema que puedan estar enfrentando, obtener comentarios. Me reúno periódicamente con ellos. Una vez, estaba reuniéndome con una mujer que es ciega. Ella trabaja en nuestro departamento de soporte y a menudo atiende las llamadas de otros clientes ciegos. Esa semana, había notado algo que estaba un poco fuera de lo que esperaba, y quería mostrarnos cuál era el problema.

Si no estás familiarizado, la forma en que un usuario ciego interactúa con una computadora es a través de una herramienta llamada lector de pantalla, que toma la información gráfica mostrada en la pantalla y luego la lee en voz alta al usuario. Luego, el usuario tiene un conjunto elevado de atajos de teclado que le permiten navegar por la página. En otras palabras, en lugar de que tú le grites a la computadora, ahora la computadora te grita a ti. Bueno, para este caso particular, el problema que nuestro usuario había encontrado estaba en una página que se veía algo así. Tiene un encabezado en la parte superior con algunos detalles importantes sobre la información en la página, y luego una serie de tarjetas principales que contienen todo tipo de información importante, y luego una serie de barras laterales más pequeñas con algunos widgets de tarjetas más pequeñas que realizan ciertas acciones relacionadas con la página. El problema que ella quería señalarnos estaba en la parte inferior de la sección de la barra lateral, y mientras navegaba a esa parte de la página, en el camino, aproximadamente a la mitad de la barra lateral, el lector de pantalla dijo algo que encontramos muy intrigante. Dijo, Enlace potato. Ella simplemente lo pasó por alto como si no fuera gran cosa. Dijimos, espera, espera, espera, vuelve atrás. ¿Dijiste potato, o el lector de pantalla dijo potato? Ella dijo, sí, lo hizo.

2. The Impact of Accurate ARIA Labels

Short description:

Explorando el concepto de 'potato code' en el desarrollo web, destacando la importancia de las etiquetas ARIA precisas y el impacto en la accesibilidad.

Cuando la gente me pregunta al respecto, les he estado diciendo que no es realmente una patata. Es solo un carácter o algo que nuestro lector de pantalla no entiende, y por eso se confunde y dice patata. Pero no es realmente una patata, así que pueden simplemente ignorarlo. Bendita sea. Ella tenía tanta confianza en nosotros, los ingenieros, que asumió que era el lector de pantalla el que tenía el problema y no nuestro código.

Bueno, yo no confío tanto en nuestro código, así que fui y traté de encontrar esto de inmediato. No me llevó mucho tiempo llegar a esta pequeña joya donde, como puedes ver, alguien había codificado manualmente la etiqueta ARIA de patata en un icono. Si no estás familiarizado, ARIA label es un atributo especial que el lector de pantalla utiliza para que nosotros podamos decir, oye, para esta parte del DOM, usa el valor dado para describirlo.

Así que cuando llegamos allí con el lector de pantalla, dijo patata, lo cual no es realmente ideal para la situación, ya que obviamente no era una patata. La mayoría de las veces, una etiqueta ARIA es algo bueno tener, pero en nuestro caso, simplemente se puso allí de manera superflua, lo que me da la definición de lo que ahora llamo código patata, que es código que nunca debería haber pasado una revisión de código. Este es un ejemplo claro de que no ARIA es mejor que un mal ARIA.

3. Optimizing Accessibility with Proper Labels

Short description:

La importancia de proporcionar etiquetas precisas en iconos e imágenes para la accesibilidad, incluyendo el uso de valores legítimos y la traducción de etiquetas para soporte multilingüe. Utilización del atributo aria-hidden para elementos decorativos y asegurando la proximidad del texto visual para una accesibilidad adecuada.

Resulta que uno de mis amigos cercanos, él es quien escribió esto, y si no hubiera hecho nada, el lector de pantalla simplemente habría leído esto como un gráfico sin etiqueta y luego habría seguido, pero no, mis amigos me escucharon hablar una y otra vez sobre accesibilidad y que es importante que pongamos etiquetas apropiadas en iconos e imágenes, y entonces él se dijo a sí mismo, esencialmente, no sé qué poner aquí ahora mismo, pero volveré a ello más tarde, y luego continuó y terminó lo que estaba trabajando en, pero se olvidó de volver. Un desarrollador junior hizo la revisión, se fusionó, y luego siguió su camino alegre hacia los clientes.

Afortunadamente, esto es una solución bastante fácil. La primera opción que tenemos es simplemente proporcionar un valor legítimo para la etiqueta. De esta manera, el usuario puede, cuando navega hacia ella, conocer su relevancia y que el lector de pantalla pueda comunicar eso al usuario. Sin embargo, debes saber que no todos los usuarios de lectores de pantalla hablan tu idioma, así que un consejo que tengo es asegurarte de que estás traduciendo tus etiquetas si tu sitio soporta más de un idioma. Solo para asegurarte de que sea comprensible para todas las personas que usan tu sitio web.

Otra opción, y esta es la que creo que terminamos usando, fue utilizar un atributo llamado aria-hidden, y en caso de que no lo sepas, aria-hidden es un atributo que le dice al lector de pantalla, oye, esta parte del DOM, puedes simplemente ignorarla por cualquier razón, y así el lector de pantalla simplemente la omitirá. Esto es apropiado para usar en casos donde el elemento proporcionado no da ningún valor adicional a la página, típicamente para un propósito decorativo, y eso es lo que era en este caso. La etiqueta apropiada que podríamos haber puesto en el icono ya estaba dicha en el DOM justo al lado del icono. Habría sido un hermano, y eso ya estaba en texto visual, así que decidimos ocultar el icono ya que estaba todo dentro de un enlace.

4. Lessons in ARIA Usage and Tabindex Attribute

Short description:

Lecciones sobre el uso adecuado de ARIA, traducción de etiquetas para soporte multilingüe, ocultar elementos decorativos para accesibilidad, y la importancia de revisiones de código de calidad. La historia del descubrimiento del atributo Tabindex para accesibilidad con teclado.

El enlace ya estaba siendo etiquetado con el texto visual, lo cual es totalmente apropiado. Tengo algunas lecciones aprendidas de esta experiencia. La primera, ya que este es mi aprendizaje intuitivo de que no aria es mejor que aria mala, si mi amigo no hubiera hecho nada, entonces habría sido menos confuso que tener una papa aleatoria en el DOM. Otra lección que es algo bueno que cubrimos hoy fue que si tu producto está diseñado para soportar más de una localidad, asegúrate de que lo estás traduciendo. Cualquier etiqueta que pongas, nuevamente, porque no todas las personas hablan tu idioma, e incluso aquellas que tienen la necesidad de usar un lector de pantalla.

Entonces está bien ocultar elementos decorativos si solo proporcionan un valor visual simple, pero nada que sea semántico o necesario para entender tu página. Por último, mi consejo es que puedes evitar el código papa teniendo revisiones de código de calidad. Se ve bien para mí. Ese sello de goma no es realmente apropiado para todas las situaciones, especialmente aquellas que no son entendidas por todos. Esto es algo bueno para asegurarte de que estás revisando y probando tu código adecuadamente.

Mi próxima historia, la llamo Tabindex Everywhere. Tiene lugar al principio de mi carrera, cuando recién salía de la universidad, y no sabía cuáles eran las mejores prácticas. No sabía sobre lectores de pantalla, que eran una cosa, o nada sobre el APG o WCAG o todo eso. Todo lo que sabía era cómo escribir mucho y mucho código rápido, y eso no siempre es algo bueno. Un día, recibí un ticket de error. Decía algo defectuoso. Hemos estado recibiendo informes de que algunos usuarios no han podido usar el teclado para navegar en esta página, y luego un enlace a la experiencia. Genial.

5. Misguided Use of Tabindex Attribute

Short description:

Descubriendo el mal uso del atributo Tabindex, su impacto en la accesibilidad del teclado y las consecuencias de los cambios no revisados.

Bueno, realmente no sabía lo que eso significaba. Todo lo que realmente vi fueron las palabras teclado y navegar, así que decidí hacer mi propia investigación. Fui a mi navegador favorito. Escribí algo de basura para ver qué aparecía, y luego encontré esto. Lo primero que apareció fue Tabindex, y sonaba exactamente como lo que necesitaba. ¿Quieres decirme que hay un atributo mágico que si lo pongo en cualquier elemento del DOM, lo hará enfocarse con el teclado? Genial.

Así que lo hice. Eso sonaba como lo que necesitaba. Hice lo que cualquier programador junior altamente prolífico haría. Pasé el siguiente sprint poniéndolo en todo. Lo puse en todos los encabezados. Lo añadí a cada párrafo. Lo puse en elementos de lista. Lo añadí a tarjetas. Hice que cada parte de una tabla fuera enfocada, y lo puse en botones y enlaces, que ya vienen con Tabindex, por cierto. Solo estaba siendo precavido, supongo.

Para asegurarme de que mi solución continuara funcionando, hice una serie de pruebas para simplemente solidificarla. Luego lo puse para revisión de código. Ahora, si no está claro ya, esta fue una mala idea hecha por alguien bien intencionado pero que no sabía nada de lo que estaba haciendo. Es un esfuerzo terriblemente equivocado. Tabindex no es accesibilidad. De hecho, mi amigo sentado a mi lado fue quien hizo la revisión de código, y recuerdo distintivamente que se inclinó sobre el escritorio y simplemente me miró y dijo, Kyle, ¿estás seguro de esto? ¿Estás seguro de que esta es la forma en que podemos hacer las cosas navegables con el teclado?

Simplemente lo miré y le dije, sí, creo que sí. Él no me discutió porque también era un junior, y se fusionó. Otra papa en el éter, si se quiere. Pero no hay necesidad de preocuparse. No era una gran papa. Simplemente resultó que esto estaba en una parte de nuestro sitio que estaba durante un período beta, por lo que nuestros primeros adoptantes lo encontraron. Eventualmente terminó siendo revertido, y lo único que realmente se perdió fue el tiempo de mi equipo. Aún así, no es algo bueno de tener.

6. Importance of Research in Accessibility

Short description:

Darse cuenta de la importancia de una investigación adecuada y la adhesión a las mejores prácticas de accesibilidad para evitar construir productos confusos y difíciles de navegar.

Lo que debería haber hecho en su lugar era haber hecho más que simplemente cinco minutos de investigación. Me gustaría imaginar que si lo hubiera hecho, eventualmente habría encontrado la guía de prácticas de autoría. Como pueden ver en la captura de pantalla, tiene tantos detalles sobre las formas adecuadas de implementar características accesibles en sus productos, incluyendo descripciones sobre el soporte de teclado con ejemplos de código. Esto es lo que debería haber estado mirando, no la primera publicación de ayuda de codificación en un subreddit que apareció.

Así que las lecciones que aprendí de esta experiencia, nuevamente, esto se solidificó en mi historia personal, no ARIA es mejor que un mal ARIA. Lo que construí fue muy confuso y más difícil de navegar que si no hubiera hecho nada. En retrospectiva, habría sido mejor para el usuario si simplemente hubiera sido perezoso y mentido sobre arreglar el error que haber hecho lo que hice. No estoy animando a nadie a mentir sobre su trabajo, deben ser honestos. Pero así de mala fue la experiencia, no solo para el mantenimiento, sino al pasar por ella.

La verdadera mejor práctica de esto, sin embargo, para mí, es que necesitaba familiarizarme con las mejores prácticas. Y eso incluye al revisor también. Tanto como codificador como revisor, tenemos la responsabilidad de asegurarnos de que nuestros usuarios entiendan o que entendamos qué es una experiencia accesible para nuestros usuarios. Necesitamos asegurarnos de que estamos haciendo las cosas de la manera correcta. Como adivinar no es una opción viable o factible. Necesitamos, hay muchos recursos reales para ayudarnos y deberíamos estar confiando en ellos.

7. Addressing Vestibular Disorders in Web Design

Short description:

Abordar el impacto de las animaciones en usuarios con trastornos vestibulares y la solución a través de la media query prefersReduceMotion y el hook useReduceMotion.

Esta última historia es un poco más seria, si no puedes decirlo por mi título, no me hagas vomitar. En este punto de mi carrera, habíamos estado trabajando en accesibilidad durante mucho tiempo. Se hicieron muchos grandes esfuerzos. Por supuesto, había mucho trabajo por hacer y muchos errores. Pero en general, los grandes problemas se habían resuelto y me sentía cómodo con eso.

Sentía que estábamos en una muy buena posición. Luego, un día recibí un mensaje que hizo que mi corazón se hundiera. Esto fue de un usuario. Y lo que escribieron fue, el problema es que no puedo pasar casi nada de tiempo usando el sitio web porque me provoca náuseas. Las animaciones me marean. Por favor, elimínelas. Te lo ruego.

Sabía inmediatamente qué estaba mal. Este usuario tiene, probablemente tiene, lo que llamarías un trastorno vestibular, que es una situación bastante compleja. Pero esencialmente, lo que sucede es que son muy sensibles al movimiento y a los efectos de paralaje e incluso a los colores de alto contraste. Esencialmente, lo que está sucediendo es que la información visual que tu cuerpo está recibiendo entra en conflicto con la otra sensorial, en particular, la información que viene de tu oído interno. Tu cerebro piensa que algo está mal, y te hace sentir náuseas, podría hacerte vomitar.

8. Enhancing User Comfort with Accessibility Queries

Short description:

Explorando la media query prefersReduceMotion, el hook useReduceMotion y la importancia de las consultas de accesibilidad para la comodidad del usuario y el compromiso prolongado con el sitio web.

Si alguna vez experimentaste mareos, como al viajar en un vehículo, entonces has experimentado una disfunción vestibular. Un trastorno vestibular, experimentan sensaciones similares pero todo el tiempo. No es muy divertido. Afortunadamente, la mayoría de los navegadores soportan una media query llamada prefersReduceMotion. Esto expone las preferencias de accesibilidad del sistema operativo para que podamos adaptarnos a ellas y ajustar nuestras animaciones según sea necesario.

La cuestión fue que me sorprendió recibir esta carta, porque pensé que ya había solucionado este problema. Hace un tiempo, habíamos escrito un código que se veía algo así que le decía a nuestra biblioteca de animación, usamos React Spring, es una biblioteca bastante buena si no estás familiarizado con ella. Le estábamos diciendo a la biblioteca de animación que simplemente omitiera las animaciones si el usuario prefería reducir el movimiento. Esto funcionó cuando lo fusionamos. Pero la mayoría del código eventualmente retrocede, y con el tiempo, lo perdimos. No teníamos pruebas de aceptación suficientes para esta característica en particular. Terminó pasando desapercibido y eventualmente llegó a los usuarios en un estado defectuoso.

Afortunadamente para nosotros, entre el momento en que se rompió y cuando nos enteramos, React Spring había reducido un nuevo hook llamado useReduceMotion que hacía exactamente lo que necesitábamos, y funciona perfectamente. Lo implementamos, y ha sido genial desde entonces. Para tu información, hay varios tipos de estas consultas que podrías usar. Probablemente hayas usado el prefers color scheme si alguna vez implementaste un tema para tu aplicación. No muchas personas piensan en eso como un problema de accesibilidad, pero está haciendo que el sitio web sea más cómodo.

La accesibilidad es solo usabilidad para más personas. Cuanto más cómodo podamos hacer nuestro sitio web, más tiempo pasarán los usuarios en él, y mejor estarán por ello. Estos ni siquiera son todos, por cierto. Es solo lo que quería incluir en la diapositiva. Sabemos sobre prefersReduceMotion juntos aquí. También hay contraste y transparencia para los que puedes hacer consultas y poder hacer la experiencia más cómoda. No tienes que usarlos todos para todas las experiencias, pero mejorar la experiencia para tu usuario nunca es algo malo. Ahora estamos preparados, en cuanto a las lecciones aprendidas, para enmendar nuestro mantra del día, que es que ningún ARIA es mejor que un mal ARIA, excepto si no haces nada y hace que tus usuarios vomiten.

9. Inclusive User-Centric Design

Short description:

Destacando la importancia de las pruebas de aceptación inclusivas, la comodidad del usuario y el impacto del diseño centrado en el ser humano en el desarrollo de productos.

Generalmente se considera una mala práctica que tus usuarios asocien sentimientos de náuseas con tu producto. No es realmente bueno para el negocio. Podemos honrar nuestras preferencias de DOS para evitar eso. Si lo hacemos, los usuarios, nuevamente, pueden pasar más tiempo en el sitio web, y luego todos los beneficios que vienen de eso.

La mayor lección que aprendí de esto es que necesitaba tener pruebas de aceptación más inclusivas. Si lo hubiéramos detectado antes, habría sido mejor. El usuario nunca se habría sentido mareado al usar nuestro producto, con suerte. Entonces podríamos haber evitado toda la situación si hubiéramos tenido mejores pruebas.

Lo siento, por cierto, si fuiste tú. Me siento mal de que alguna vez llegáramos a ese punto. Bueno, eso es todo el tiempo que tengo para historias hoy, pero quería dejarte con esta cita. Es de uno de mis héroes personales, Fred Rogers. Él dijo que los seres humanos son mucho más maravillosos que las máquinas. Para mí, esto es un recordatorio de que la vida humana es increíblemente única, y eso es lo que la hace hermosa.

Hay muchas personas para quienes el mundo no está construido, y tienen que vivir en él de todos modos. Por favor, considera el potencial que tienes para mostrar amor a los demás y reducir las cargas de las personas, al menos en las interacciones que tienen con tus productos. Tienes una tremenda capacidad para hacer el bien aquí, así que por favor hazlo. Muchas gracias. Nuevamente, mi nombre es Kyle West. Puedes encontrarme en Blue Sky o LinkedIn bajo KyleWestCS. También puedes encontrar estas diapositivas en mi sitio web, kylewest.dev, barra slides. Gracias de nuevo. Ha sido un placer. Te aprecio.

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.
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
React Advanced 2023React Advanced 2023
23 min
Elementos Interactivos Anidados: Una Pesadilla en Accesibilidad
Top Content
Nested interactive elements can cause accessibility issues on websites, and the speaker shares a personal experience with an accessibility bug involving a list component. Mitigating nested interactive structures involves limiting these patterns during development and restructuring existing elements. The speaker provides recommendations for improving accessibility, such as adjusting role properties and gathering user feedback. The conclusion emphasizes the importance of accessible solutions and encourages sharing resources to build more inclusive experiences.
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.
Construyendo un Sitio Web Rápido para Cada Visitante
React Advanced 2024React Advanced 2024
31 min
Construyendo un Sitio Web Rápido para Cada Visitante
This talk focuses on building a fast and accessible website for all users, highlighting the importance of performance and user experience optimization. It emphasizes the need for adaptive implementation to cater to different devices and user conditions. The talk also discusses the factors beyond the developer's control, such as screen size, browsers, devices, internet connection, and sitting position. It highlights the significance of optimizing image components for various devices and the role of browser support and rendering engines. The speaker discusses the use of future APIs and the challenges of browser compatibility, as well as optimizing image formats and bundler compatibility. The talk provides insights on controlling bundler and device compatibility, optimizing CPU usage, internet connection, and JavaScript form submission. It concludes with a proposal to respond with save data instead of effective type for limited internet connections and recommends using React with adaptive hooks for better user experiences. Overall, the talk covers essential aspects of building a fast and accessible website.
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.

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.