CI/CD accesible

Rate this content
Bookmark

CI/CD ha sido esencial para cualquier desarrollo y lanzamiento de productos web productivos. Sin embargo, aunque la accesibilidad siempre es un aspecto importante para cualquier producto web que incluya una interfaz de usuario, a menudo se pasa por alto o se considera como un paso manual que consume mucho tiempo, fuera del flujo de CI/CD. ¿Cómo podemos automatizar las pruebas de accesibilidad dentro de nuestro CI/CD para mejorar la experiencia del desarrollador y la colaboración en equipo? ¿Qué herramientas podemos utilizar para integrar y aprovechar el cumplimiento de accesibilidad en nuestro CI/CD? Únete a mi charla y descubrámoslo.

This talk has been presented at DevOps.js Conf 2024, check out the latest edition of this JavaScript Conference.

FAQ

Maya Min es una ingeniera de software senior en Microsoft Industry AI, especializada en el desarrollo de soluciones y aplicaciones integradas de IA para industrias específicas, con un enfoque en la web y el frontend. También es autora y embajadora de varias plataformas de tecnología.

Un botón accesible en el contexto de la accesibilidad web es aquel que puede ser utilizado por todos los usuarios, incluidos aquellos con discapacidades. Esto implica que el botón debe ser operable, por ejemplo, a través del teclado, y no solo una imagen que simula ser un botón.

Las WCAG (Web Content Accessibility Guidelines) son directrices desarrolladas para proporcionar un estándar de accesibilidad en la web, asegurando que los contenidos sean accesibles para todas las personas, incluidas aquellas con discapacidades. Estas pautas son seguidas a nivel internacional dentro de la industria y el dominio público.

Sí, es posible automatizar las pruebas de accesibilidad, especialmente en el nivel de componentes individuales como botones o formularios, utilizando herramientas como xCore. Este tipo de pruebas puede incluir la verificación de etiquetas, uso semántico, contraste de colores, entre otros aspectos.

Las pruebas de accesibilidad se pueden integrar en cada fase del flujo de CI/CD, desde la revisión de código hasta las pruebas de rendimiento y seguridad. Utilizando herramientas de integración continua como GitLab, se pueden incluir plantillas de flujo de trabajo que automatizan las pruebas de accesibilidad, garantizando que se realicen de manera sistemática y consistente.

Para pruebas de accesibilidad automatizadas, se recomienda utilizar xCore, un paquete de JavaScript de código abierto que permite configurar diferentes tipos de reglas para verificar la accesibilidad, y Playwright para pruebas de extremo a extremo. Estas herramientas ayudan a evaluar la compatibilidad con los estándares WCAG y mejorar la accesibilidad general de las aplicaciones web.

Maya Shavin
Maya Shavin
24 min
15 Feb, 2024

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Maya Min, una ingeniera de software senior en Microsoft Industry AI, analiza la importancia de las pruebas de accesibilidad y su relación con CIDI. WCAG proporciona pautas para el cumplimiento de accesibilidad, que cubren diversos aspectos como el contraste de colores, la navegación y el diseño de contenido. Maya explora la automatización de las pruebas de accesibilidad a través de componentes de IU y diferentes niveles de prueba. Recomiendan xCore y Playwright para pruebas de navegador de extremo a extremo e integración de pruebas de accesibilidad en flujos de trabajo de CI/CD utilizando herramientas como GitLab y Azure Pipeline.
Available in English: Accessible CI/CD

1. Introducción a la Accesibilidad

Short description:

Hola a todos. Bienvenidos a mi charla sobre accesibilidad en un contexto diferente en CIDI. Soy Maya Min, una ingeniera de software senior en Microsoft Industry AI. He estado en la industria por más de 10 años, enfocándome en el desarrollo web y frontend. Recientemente publiqué un libro llamado Aprendiendo Vue con Aurelie, que enseña desarrollo frontend utilizando Vue y TypeScript. Discutamos por qué es importante realizar pruebas de accesibilidad y cómo se relaciona con CIDI. La accesibilidad garantiza que los usuarios puedan percibir e interactuar con las aplicaciones web. WCAG proporciona pautas para el cumplimiento de la accesibilidad.

Hola a todos. Bienvenidos a mi charla y discutamos la accesibilidad en un contexto diferente aquí en CIDI, ¿de acuerdo? Pero primero, un poco sobre mí. Mi nombre es Maya Min. Soy una ingeniera de software senior en Microsoft Industry AI. Nuestro grupo se enfoca en aprovechar diferentes tecnologías de LM para desarrollar soluciones y aplicaciones integradas de IA para industrias específicas. Llevo más de 10 años en la industria, enfocándome en la web y el frontend. Recientemente publiqué un libro llamado Aprendiendo Vue con Aurelie, que te enseñará y guiará cómo desarrollar aplicaciones web utilizando Vue como framework frontend en el contexto de TypeScript. Si estás interesado en aprender un nuevo y asombroso framework, échale un vistazo. También soy embajadora de Cloudinary, experta desarrolladora de Google y organizadora de la comunidad View.js Israel. Puedes seguirme en Maya Chavin en LinkedIn o Twitter, o seguir mis publicaciones en mi blog mayachavin.com. Y eso es suficiente sobre mí. Pasemos a nuestra primera pregunta. Ya conocemos la accesibilidad. Sabemos por qué es importante, pero ¿por qué las pruebas de accesibilidad y por qué deben realizarse en el contexto de CIDI? De acuerdo. Primero y principal, intenta hacer clic en este botón. ¿Puedes hacerlo, verdad? Porque este botón, aunque parece un botón real, tiene el texto 'Haz clic aquí para continuar'. No es un botón real, es solo una imagen. Y esto es exactamente de lo que hablamos cuando mencionamos la accesibilidad. El botón no es accesible. Nadie puede usarlo. Esto significa que tenemos un problema de accesibilidad. Aquí entra en juego la definición de accesibilidad web. La accesibilidad web es cómo un usuario puede ver, escuchar y percibir tu aplicación para que puedan entender, o al menos llegar a algún entendimiento de cómo usar, navegar o interactuar con tus aplicaciones web. Esto es similar al flujo completo de la experiencia del usuario en muchos sentidos. Y cuando hablo de accesibilidad, generalmente digo que es una experiencia del usuario porque incluye la accesibilidad en su interior. Pero en base a esto, es muy difícil decidir cuál es el nivel de cumplimiento para la accesibilidad. Esto incluye muchas cosas, como escuchar, ver o entender, ¿verdad? Para eso, existe un grupo llamado WCAG que ha desarrollado unas pautas muy,

2. Estándares de Cumplimiento WCAG

Short description:

WCAG proporciona pautas para el cumplimiento de la accesibilidad. Incluye contraste de colores, navegación, enfoque, puntos de referencia, diseño de contenido, niveles de zoom, contenido comprensible, manejo de formularios, medios, tipografía y comportamiento de enlaces. Estos son elementos esenciales, pero hay otros factores a considerar dependiendo de la complejidad de tu aplicación.

es una guía estándar de cumplimiento para la accesibilidad. Han estado trabajando arduamente y se ha convertido en un estándar industrial para empresas y dominio público seguir y reflexionar sobre ello. Entonces, el nivel normal para WCAG, el nivel aceptable para WCAG, el cumplimiento de la accesibilidad para empresas y dominio público es el nivel EE de la versión 2.1 y superior. Entonces, hay 3 niveles AA y AAA. Pero hay muchas cosas mencionadas en su sitio web, y es posible que te sientas un poco abrumado cuando vayas al sitio web porque incluye muchas explicaciones. Son explicaciones muy detalladas. Así que en esta charla, solo resumiré el estándar de cumplimiento más común y las verificaciones que debemos seguir. Contraste de colores, navegación, enfoque, puntos de referencia, diseño de contenido, 200% para 400%. Puedes pensar que 200% y 400% no son tan comunes. De hecho, son muy comunes porque incluyen cómo los usuarios hacen zoom dentro y fuera de tu sitio web en un dispositivo pequeño, como una computadora portátil con pantalla pequeña. Y 200% y 400% definen el nivel máximo en el que el usuario puede hacer zoom en tus aplicaciones y asegurarse de que tu contenido se mantenga de manera consistente y utilizable incluso cuando los usuarios hacen zoom en ese caso. Contenido comprensible, manejo de formularios, medios, tipografía, comportamiento de enlaces internos y externos. Si tienes un enlace externo, lo que significa que el usuario será redirigido a una nueva página, abrir una nueva pestaña, debes informar de alguna manera al usuario que esto va a navegar a un nuevo sitio web y el usuario no se sorprenderá. Orden de pestañas y muchas más. Sí, muchas más. Estos son solo un conjunto esencial de cosas a seguir. Y hay otras cosas dependiendo de la complejidad de tu aplicación.
Available in other languages:

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 Conference 2021React Advanced Conference 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.
¿Por qué es tan lento el CI?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
¿Por qué es tan lento el CI?
Slow CI has a negative impact on productivity and finances. Debugging CI workflows and tool slowness is even worse. Dependencies impact CI and waiting for NPM or YARN is frustrating. The ideal CI job involves native programs for static jobs and lightweight environments for dynamic jobs. Improving formatter performance and linting is a priority. Performance optimization and fast tools are essential for CI and developers using slower hardware.
Poner fin al dolor: Repensando CI para Monorepos Grandes
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Poner fin al dolor: Repensando CI para Monorepos Grandes
Today's Talk discusses rethinking CI in monorepos, with a focus on leveraging the implicit graph of project dependencies to optimize build times and manage complexity. The use of NX Replay and NX Agents is highlighted as a way to enhance CI efficiency by caching previous computations and distributing tasks across multiple machines. Fine-grained distribution and flakiness detection are discussed as methods to improve distribution efficiency and ensure a clean setup. Enabling distribution with NX Agents simplifies the setup process, and NX Cloud offers dynamic scaling and cost reduction. Overall, the Talk explores strategies to improve the scalability and efficiency of CI pipelines in monorepos.
Despliegue Atómico para Hipsters de JavaScript
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Despliegue Atómico para Hipsters de JavaScript
This Talk discusses atomic deployment for JavaScript and TypeScript, focusing on automated deployment processes, Git hooks, and using hard links to copy changes. The speaker demonstrates setting up a bare repository, configuring deployment variables, and using the post-receive hook to push changes to production. They also cover environment setup, branch configuration, and the build process. The Talk concludes with tips on real use cases, webhooks, and wrapping the deployment process.
Cómo construir tuberías de CI/CD para una aplicación de microservicios
DevOps.js Conf 2021DevOps.js Conf 2021
33 min
Cómo construir tuberías de CI/CD para una aplicación de microservicios
Top Content
This Talk discusses the benefits of microservices and containers for building CI-CD pipelines. It explains how container technology enables portability and scalability. The challenges of microservices include network communication and testing in isolation. The Talk introduces Tacton, a cloud-native CICD pipeline for Kubernetes, and highlights the use of GitOps and Argo CD. It also discusses the importance of maintaining referential integrity between microservices and the evolving role of operators in the DevOps world.
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.

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 ;)
Despliega una aplicación de componentes web y configura un flujo de integración continua
DevOps.js Conf 2022DevOps.js Conf 2022
111 min
Despliega una aplicación de componentes web y configura un flujo de integración continua
Workshop
Philippe Ozil
Philippe Ozil
Únete a nosotros en un masterclass en el que desplegarás una aplicación Node.js simple construida con componentes web y configurarás un flujo de integración continua (CI). Aprenderás sobre el poder del Lightning Web Runtime (LWR) y las GitHub Actions.
Aporta Calidad y Seguridad al pipeline de CI/CD
DevOps.js Conf 2022DevOps.js Conf 2022
76 min
Aporta Calidad y Seguridad al pipeline de CI/CD
WorkshopFree
Elena Vilchik
Elena Vilchik
En esta masterclass repasaremos todos los aspectos y etapas al integrar tu proyecto en el ecosistema de Calidad y Seguridad del Código. Tomaremos una aplicación web simple como punto de partida y crearemos un pipeline de CI que active el monitoreo de calidad del código. Realizaremos un ciclo completo de desarrollo, comenzando desde la codificación en el IDE y abriendo una Pull Request, y te mostraré cómo puedes controlar la calidad en esas etapas. Al final de la masterclass, estarás listo para habilitar esta integración en tus propios proyectos.