Automatización de las Pruebas de Accesibilidad para Tu Biblioteca de Componentes

Rate this content
Bookmark

¿Eres un desarrollador cansado de las pruebas de accesibilidad manuales y los largos ciclos de retroalimentación que conllevan? ¿Quieres auditar y probar eficientemente la accesibilidad de tus componentes mientras ahorras tiempo y esfuerzo? ¡No busques más! En esta charla, exploraremos cómo Storybook, una herramienta de código abierto ampliamente utilizada para documentar tus componentes de UI, puede ser utilizada para automatizar las pruebas de accesibilidad.

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

FAQ

La accesibilidad web se refiere a la creación de sitios web que pueden ser utilizados por todas las personas, incluyendo aquellas con discapacidades, asegurando que todos tengan la misma capacidad de uso y acceso.

Considerar la accesibilidad desde el inicio permite garantizar que los componentes sean accesibles para todos los usuarios, evitando modificaciones costosas después de que el sitio web o aplicación esté desarrollado y reduciendo el riesgo de incurrir en penalizaciones legales.

Storybook es una herramienta de desarrollo que permite visualizar y probar componentes de manera aislada, proporcionando una documentación clara y facilitando la integración de pruebas de accesibilidad durante el proceso de desarrollo.

El complemento de accesibilidad de Storybook es una herramienta que ayuda a identificar y solucionar problemas de accesibilidad en los componentes de la interfaz de usuario directamente en el entorno de desarrollo, permitiendo una integración y retroalimentación rápidas.

Automatizar las pruebas de accesibilidad ayuda a detectar y solucionar problemas desde las primeras etapas del desarrollo, asegurando que todos los componentes cumplen con los estándares de accesibilidad necesarios y mejorando la calidad del producto final.

Mientras que Lighthouse realiza auditorías a nivel de página después de que los componentes están integrados, el complemento de Storybook permite realizar auditorías a nivel de componente durante su desarrollo, ofreciendo un ciclo de retroalimentación más corto y efectivo.

Los principales beneficios incluyen alcanzar un mayor público potencial, cumplir con legislaciones y evitar multas, mejorar el posicionamiento SEO y ofrecer una mejor usabilidad para todos los usuarios.

Praveen Kumar D
Praveen Kumar D
41 min
23 Oct, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla de hoy se centró en la automatización de las pruebas de accesibilidad para las bibliotecas de componentes utilizando Storybook. Se enfatizó la importancia de la accesibilidad web, junto con los beneficios de incorporar la accesibilidad desde el principio. Storybook fue destacado como una herramienta valiosa para el desarrollo impulsado por componentes, las pruebas y la identificación de problemas de accesibilidad. La integración del complemento de accesibilidad en Storybook permite obtener información a nivel de componente, ciclos de retroalimentación eficientes y pruebas de accesibilidad automatizadas. También se discutieron las pruebas manuales y la resolución de problemas complejos con lectores de pantalla.

1. Introducción a la Accesibilidad Web

Short description:

Hoy hablaremos sobre la automatización de las pruebas de accesibilidad para su biblioteca de componentes. Cubriremos la accesibilidad web, cómo medirla, cuándo considerarla, el papel de Storybook, cómo incluir la accesibilidad en su biblioteca de componentes y comparar el complemento de accesibilidad con Lighthouse y el benchmarking. La accesibilidad web se trata de construir sitios web que puedan ser utilizados por todos. Es importante garantizar la legibilidad, la usabilidad para las tecnologías de asistencia y la navegación por teclado. La accesibilidad web es crucial para atraer a más clientes, cumplir con la legislación, obtener beneficios de SEO y mejorar la usabilidad. Medir la accesibilidad implica percepción, operabilidad y comprensibilidad.

Hola, hoy hablaremos sobre la automatización de las pruebas de accessibility para su component library. Así que vamos a ver las diferentes cosas que vamos a cubrir hoy, la accesibilidad web y su cómo medir la accesibilidad web, cuándo considerar la accessibility, Storybook y su papel en la accesibilidad web, cómo incluir la accessibility en su component library, y luego vamos a comparar el complemento de accesibilidad con Lighthouse y luego hacer un benchmark y luego ver cuál es mejor que el otro. Bien, ¿qué es la accesibilidad web? Construir sitios web que puedan ser utilizados por todos. Esa es una definición simple de ello. Así que eso significa que si yo puedo hacer, si yo puedo usar algo en la web, la persona que está sentada a mi lado debería poder hacer las mismas cosas que yo puedo hacer en la web. Así que para que esto ocurra, debes asegurarte de que has garantizado la legibilidad y la usabilidad para las tecnologías de asistencia como los lectores de pantalla, te has asegurado de que tu aplicación web puede ser navegada a través de controles de teclado. Así que estos son algunas de las cosas importantes para asegurarte de que tu aplicación es accesible.

Ahora, ¿por qué la accesibilidad web? Normalmente la gente piensa en la accessibility como algo bueno para tener pero hoy voy a decirte por qué no es sólo algo bueno para tener sino algo que debes tener. En primer lugar, más clientes. Así que esto es como una de las cosas más importantes porque alrededor del 15% de la población mundial tiene algún tipo de discapacidad. Así que esto te da la oportunidad de llegar al 15% que tu competencia no está considerando. Pero esto establece una diferenciación de la competencia y definitivamente te ayuda a atraer a más clientes. En segundo lugar, el cumplimiento y la legislación. Así que hoy, como te dije, la accessibility se ha convertido en algo que debes tener y muchos países ya han declarado la accessibility como algo que debes cumplir. Si no eres accesible entonces puedes terminar pagando multas enormes. Así que para evitar penalizaciones y multas enormes, debes asegurarte de que estás cumpliendo con lo que depende de tu región. En tercer lugar y lo más importante son los beneficios del SEO. Normalmente la gente piensa que el SEO es algo que tiene que ver sólo con tu contenido pero con la accessibility, ¿verdad? La mayoría de los motores de búsqueda hoy en día están optimizando para sitios web accesibles. Así que si tu sitio web es accesible, la probabilidad de que te clasifiques más alto en los resultados de búsqueda es realmente alta. Así que debes asegurarte de que si estás buscando SEO, no es sólo tu contenido el que está presente en un sitio web sino también la naturaleza accesible de un sitio web que es muy importante para tu SEO. Y finalmente, la usabilidad mejorada. La accessibility no sólo ayuda a las personas con discapacidades sino también a las personas sin discapacidades. Por ejemplo, una persona que vive en una aldea remota o alguien que es mayor y no puede usar el sitio web podrá beneficiarse de la naturaleza accesible del sitio web. Entonces, ¿cómo medir la accessibility? Perceptibilidad. Asegurarse de que la información presentada es fácil de percibir y entender. Y en segundo lugar, la operabilidad. Esto asegura que puedes navegar e interactuar fácilmente. Así que no importa quién venga a tu sitio web, verdad, son capaces de navegar e interactuar a través de tu sitio web. Luego, la comprensibilidad. Esto es asegurarse

2. Consideraciones y Storybook

Short description:

Para garantizar la compatibilidad y robustez, considere hacer su sitio web accesible desde el principio. Comience incorporando la accesibilidad en el desarrollo de componentes y abordando aspectos básicos como las reglas ARIA, el contraste de color y los tamaños de fuente. Cubrir estos aspectos básicos ya hará que su aplicación sea accesible en un 60%. Luego, concéntrese en mejorar la experiencia del usuario en dispositivos de asistencia y en gestionar el orden de lectura. Storybook es una herramienta de código abierto que ayuda con el desarrollo orientado a componentes y las pruebas aisladas, lo que la convierte en una herramienta valiosa para mejorar la eficiencia y limpieza de los proyectos.

que todo en su sitio web sea fácil y claro de entender. Y luego, la robustez. Esto es asegurar la compatibilidad con diversas tecnologías, incluyendo dispositivos de asistencia como su pantalla lector y otros. Y luego, la compatibilidad. Esto es asegurarse de que las características que ha construido para su sitio web son compatibles y funcionan sin problemas en diferentes tecnologías de asistencia. ¿Cuándo debería considerar la accessibility? Normalmente la gente piensa accessibility como algo que se puede hacer después de construir su sitio web, después de tener todo listo. Y luego una vez que se va en vivo, ¿verdad?, la gente suele pensar que la accessibility es algo en lo que se puede pensar después. Pero yo discreparía. La accessibility es algo que debería considerarse desde el principio si se quiere obtener los beneficios de la accessibility. Entonces, ¿cómo se hace? Comience con los componentes. Así que, hoy en día, todo el mundo sigue el desarrollo orientado a componentes. Por lo tanto, debe asegurarse de incorporar la accessibility y su consideración desde el principio mientras comienza el desarrollo de sus componentes. En segundo lugar, aborde los aspectos básicos. Así que, los aspectos básicos como las reglas ARIA, el contraste de color, los tamaños de fuente, el design accesible, y luego algunos otros elementos contribuyen a cerca del 60% de los requisitos de accessibility. Esto es masivo. Y hoy, en mi charla, también intentaré ayudarles con estrategias sobre cómo hacer fácilmente accesible nuestro sitio web y cómo cubrir todos estos 60% de los requisitos básicos que son muy fáciles de cubrir si se tienen las estrategias y el plan correctos. Y luego, finalmente, una vez que ha cubierto los aspectos básicos y sabe que su aplicación ya es accesible en un 60%, ahora lo que hace es intentar mirar los casos complejos, ¿verdad? Como, por ejemplo, ¿cómo mejorar la user experience en estos dispositivos de asistencia? ¿Cómo gestionar el orden de lectura? Y puede abordar todas las demás complejidades.

Ahora hoy, les presentaré una herramienta llamada Storybook, con la que muchos de ustedes ya deben estar familiarizados. Así que Storybook es una herramienta de open-source que te ayuda a documentar, ver y probar componentes de forma aislada. ¿Por qué Storybook? Porque Storybook te ayuda con el desarrollo orientado a componentes. Hoy en día, cualquiera que esté haciendo desarrollo orientado a componentes, ¿verdad? Usa Storybook. Primero veremos, ¿por qué Storybook, ¿verdad? Desarrollo aislado. Hoy en día, no quieres mantener tus componentes... las pruebas asociadas con los componentes y las diversas cosas que quieres hacer con tus componentes en tu carpeta de aplicación. Así que la forma más fácil de hacerlo es con Storybook, de alguna manera lo aíslas. Llevas todos tus componentes a un entorno diferente. Y luego pruebas tus componentes allí. Ves si tus componentes son compatibles para vistas móviles, tabletas y diferentes cosas. También pruebas muchas otras cosas. Así que separar esto, ¿verdad?, definitivamente te ayudará a mejorar tu eficiencia y limpieza

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
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.
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.

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.