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.

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

Accessibility at Discord
React Advanced Conference 2021React Advanced Conference 2021
22 min
Accessibility at Discord
Configuring Axe Accessibility Tests
TestJS Summit 2021TestJS Summit 2021
30 min
Configuring Axe Accessibility Tests
Top Content
Axe-core is a popular accessibility testing engine that is used Google, Microsoft, and hundreds of other companies to ensure that their websites are accessible. Axe-core can even integrate into many popular testing frameworks, tools, and IDEs. In this advanced session, we'll be learning how to configure axe and its integrations to fine tune how it runs and checks your pages and code for accessibility violations.
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
JSNation 2023JSNation 2023
10 min
Dialog Dilemmas and Modal Mischief: A Deep Dive Into Pop-Ups
Our design systems commonly feature components that show on top of other content: tooltips, date pickers, menus and teaching UI, to name just a few. Proposed updates to the web platform are about to make building these a whole lot easier. You might not even need JavaScript. In this talk, you’ll learn all about the upcoming ‘popover’ attribute, modality and the top layer.
a11y and TDD: A Perfect Match
JSNation 2022JSNation 2022
24 min
a11y and TDD: A Perfect Match
Accessibility has been web development's ugly duckling for quite some time now. I often get asked, "when should you test for a11y in your apps?" My answer is simple, "right from the start!". Regardless of the framework considered - React, Svelte, Vue, YourOwn™️ - as developers we are in a privileged position to help the ugly duckling grow into a beautiful swan. How? By diving deep into the pond and harnessing the power of Javascript APIs to build the right components for your web apps. And how can do you know you are building them right? By pairing Test Driven Development with the Testing Library family. Ready to grow your web apps into swans?
How to do Good Without Doing Anything
React Advanced Conference 2021React Advanced Conference 2021
32 min
How to do Good Without Doing Anything
There’s no arguing that building accessible websites is a force for good. But ensuring that our React websites and apps work for everyone can be time-consuming and isn’t always easy to get right. Luckily, investing a little bit of time on your accessibility workflow and setting up a series of automated tools will end up saving you tons of time and energy in the long run.In this talk I will demonstrate how you can leverage automated tools, clearly documented code standards and a well-defined development process in order to make building and testing accessible React apps a breeze. I will discuss the ways that I automate certain aspects of my development workflows to catch accessibility errors, define and set up tests and go through the entire lifecycle of accessibility feature development using a real-world example.
Nested Interactive Elements: An Nightmare in Accessibility
React Advanced Conference 2023React Advanced Conference 2023
23 min
Nested Interactive Elements: An Nightmare in Accessibility
There have been numerous remarkable new UX experiences developed over the years, such as cards displaying an array of products and clickable list items with dynamic menu options, among others. However, only a few are aware of the challenges involved in building these structures with accessibility in mind, and unfortunately, some of them are completely inaccessible. 
In today's talk, we will explore some of these prevalent web UX patterns and delve into the hidden challenges they present. While we may be able to mitigate some of these issues, others serve as cautionary tales in accessibility.

Workshops on related topic

Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!
Automated accessibility testing with jest-axe and Lighthouse CI
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
Bonnie Schulkin
Bonnie Schulkin
Do your automated tests include a11y checks? This workshop will cover how to get started with jest-axe to detect code-based accessibility violations, and Lighthouse CI to validate the accessibility of fully rendered pages. No amount of automated tests can replace manual accessibility testing, but these checks will make sure that your manual testers aren't doing more work than they need to.
Web Accessibility in JavaScript Apps
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
Sandrina Pereira
Sandrina Pereira
Often we see JavaScript damaging the accessibility of a website. In this workshop, you’ll learn how to avoid common mistakes and how to use JS in your favor to actually enhance the accessibility of your web apps!
In this workshop we’ll explore multiple real-world examples with accessibility no-nos, and you'll learn how to make them work for people using a mouse or a keyboard. You’ll also learn how screen readers are used, and I'll show you that there's no reason to be afraid of using one!
Join me and let me show you how accessibility doesn't limit your solutions or skills. On the contrary, it will make them more inclusive!
By the end, you will:- Understand WCAG principles and how they're organized- Know common cases where JavaScript is essential to accessibility- Create inclusive links, buttons and toggleble elements- Use live regions for errors and loading states- Integrate accessibility into your team workflow right away- Realize that creating accessible websites isn’t as hard as it sounds ;)
Creating Accessible React Native Apps
React Summit Remote Edition 2021React Summit Remote Edition 2021
91 min
Creating Accessible React Native Apps
Workshop
Scott Vinkle
Scott Vinkle
React Native is a framework used to create native iOS and Android apps in a way web developers may already be familiar with. But how do you ensure your React Native apps are inclusive and usable everyone? Scott will share tips on how to test and build React Native apps with accessibility baked-in!