Crédito de Accesibilidad y Cómo Pagarlo

Rate this content
Bookmark

La deuda técnica surge como un crédito gratuito por nuestra falta de experiencia, plazos incorrectos o simplemente una combinación de malas decisiones; pero sin importar cómo llegue allí, el costo suele recaer en la accesibilidad. Lo primero en sacrificar es la herramienta que permite a todas las personas navegar por la web sin restricciones.

¿Cómo abordamos una deuda técnica en términos de accesibilidad? ¿Por dónde empezamos? ¿Qué tan rápido y lejos podemos llegar? En esta charla repasaremos ejemplos del mundo real sobre cómo comenzar a solucionar la deuda técnica más importante que existe.

This talk has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

La deuda técnica es un compromiso consciente de elegir una solución rápida que puede solucionar un problema temporalmente a cambio de tener que revisarlo y mejorarlo en el futuro, con posibles intereses acumulados por no hacerlo inmediatamente.

No, el código malo no se considera deuda técnica. Más bien, es indicativo de una falta de conocimiento, preocupación o control de calidad, y suele ser más perjudicial que la deuda técnica.

Gestionar la deuda técnica involucra reconocerla conscientemente, documentarla y hacer planes para abordarla a través de sprints de desarrollo o asignaciones dedicadas para corregir y optimizar el código existente.

No pagar la deuda técnica puede resultar en la acumulación de intereses y empeorar la calidad del código a lo largo del tiempo, afectando la eficiencia del desarrollo y posiblemente la satisfacción del equipo.

Sí, la accesibilidad puede convertirse en deuda técnica cuando se pospone o ignora durante el desarrollo del producto, tratando las necesidades de los usuarios con discapacidades como secundarias.

Mejorar la accesibilidad se puede lograr mediante auditorías, pruebas manuales y automáticas, y la integración de prácticas accesibles en el ciclo de desarrollo y pruebas, así como educar y concienciar al equipo sobre su importancia.

Herramientas como WAVE o Axe son recomendadas para realizar auditorías de accesibilidad automáticamente, ayudando a identificar y documentar problemas comunes que luego se pueden abordar gradualmente.

Eva Ferreira
Eva Ferreira
21 min
20 Jun, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
La charla analiza la deuda técnica y su relación con el código deficiente y la falta de cuidado. Se enfatiza la importancia de pagar la deuda técnica, especialmente en términos de accesibilidad. Se destaca el bajo número de sitios web que pasan las pruebas básicas de accesibilidad. La charla proporciona estrategias para pagar la deuda técnica de accesibilidad, promover la accesibilidad e incorporar sistemas de diseño. Se enfatiza que la accesibilidad es responsabilidad de todos y no debe pasarse por alto.

1. Introducción a la Deuda Técnica

Short description:

Hola, soy Meba. Estoy aquí para hablar sobre el crédito de accesibilidad y cómo pagarlo. Soy un desarrollador frontend que trabaja actualmente en una empresa llamada Mayfell. También soy el organizador de CSSConf Argentina. Hoy estoy aquí para hablar sobre la deuda técnica. La mayoría de las veces, cuando pienso en la deuda técnica, en mi mente aparece este meme. El problema surge cuando comienza a causar problemas en el proceso de desarrollo. Entonces, ¿qué es la deuda técnica? ¿Qué no es la deuda técnica? ¿Es el código malo una deuda técnica? Bueno, en mi humilde opinión, el código malo no es una deuda técnica. En realidad, es una falta. Es una falta de conocimiento. Es una falta de preocupación. Y es una falta de control de calidad. La mayoría de las veces, significa que a alguien no le importa lo que se envía a producción.

Argentina. Y realmente disfruto mucho trabajar con, ya sabes, sistemas de diseño, accesibilidad, y animaciones muy inútiles como la que ves aquí. Hoy estoy aquí para hablar sobre la deuda técnica. La mayoría de las veces, cuando pienso en la deuda técnica, en mi mente aparece este meme. Es como esas situaciones en las que tienes que entregar algo y toda la oficina está en llamas. Y tienes que entregar de todos modos. Entonces, haces lo mejor que puedes mientras finges que nada está ardiendo, nada está en llamas y todo está bien. Así que, creo que usamos memes como mecanismo de afrontamiento, especialmente para la deuda técnica. Estos son mis favoritos. Solo pon la deuda técnica en mi tarjeta de crédito. Moverse rápido y romper cosas, guía de desarrollo frágil. No entiendo por qué tarda tanto en construir una nueva ventana. Y uno de mis favoritos. Arreglemos esto con una solución temporal que creará más problemas a largo plazo. Sí. Para entonces, tendremos que cambiar de tiendas. Entonces, no es deuda técnica si no estás presente cuando se soluciona. O lo que realmente me gusta decir es que no es deuda técnica si no estás presente cuando comienza a causar problemas. Porque tener deuda técnica es normal. El problema surge cuando comienza a causar problemas en el proceso de desarrollo. Entonces, ¿qué es la deuda técnica? ¿Qué no es la deuda técnica? ¿Es el código malo una deuda técnica? Bueno, en mi humilde opinión, el código malo no es una deuda técnica. En realidad, es una falta. Es una falta de conocimiento. Es una falta de preocupación. Y es una falta de control de calidad. La mayoría de las veces, significa que a alguien no le importa lo que se envía a producción. Es muy común culpar al pobre desarrollador junior que

2. Understanding Technical Debt

Short description:

Pero la realidad es que se supone que debe haber un sistema para ayudar a ese desarrollador junior a evitar enviar código malo a producción. El código malo suele ser más perjudicial que la deuda técnica porque muestra una falta de preocupación por el producto final. La deuda técnica es un compromiso consciente, donde elegimos obtener algo de inmediato a cambio de pagarlo con intereses más adelante. Tomemos un ejemplo con la tematización. Tomamos la decisión consciente de construir una solución rápida para un cliente, aunque resultara en un código basura. Lo arreglaremos más adelante.

acaba de unirse a la empresa porque envió código malo a producción. Pero la realidad es que se supone que debe haber un sistema para ayudar a ese desarrollador junior a evitar enviar código malo a producción. Se supone que debe haber un gerente y otros desarrolladores que deberían poder ayudar a esta persona a evitarlo. Honestamente, creo que el código malo suele ser más perjudicial que la deuda técnica, principalmente porque muestra esta falta de preocupación por el producto final. Y principalmente porque termina siendo un lugar triste donde culpan a los desarrolladores junior por simplemente enviar código feo a producción cuando no debería ser así. Entonces, ¿qué es la deuda técnica si no es código malo? Bueno, la deuda técnica es un compromiso consciente. Y eso es, creo, la parte más importante cuando hablamos de deuda técnica, es que es consciente. Hay una cita que realmente disfruto sobre la deuda técnica, dice que sucede cuando elegimos obtener algo de otra manera inalcanzable de inmediato a cambio de pagarlo con intereses más adelante. Esta es una cita del Sr. Harold Roberts. Si no lo sigues en Twitter, te recomiendo que lo hagas. Habla mucho sobre refactorización y deuda técnica. Es una persona extremadamente amable y también extremadamente conocedora. Así que si lo buscas en YouTube, definitivamente aprenderás mucho. Si miramos esta cita, dice de otra manera inalcanzable de inmediato y pagarlo después, esas son las dos cosas que debemos tener en cuenta cuando hablamos de deuda técnica. Tomemos un ejemplo. Hablemos de la tematización. Pretendamos que somos una empresa que brinda un servicio a diferentes clientes y nuestros clientes utilizan nuestro servicio y nuestro servicio no puede ser personalizado. No tiene ninguna tematización, solo es de este color y ya está. Y tenemos un posible cliente, un cliente importante que dice, si proporcionas una tematización que se parezca a mis colores de marca, entonces seré tu cliente. Entonces, ¿qué sucede en esas situaciones es que generalmente el gerente de proyecto o el gerente de producto se acerca al equipo de desarrollo y dice, bueno, ¿cuál es la estimación para hacer que la tematización suceda? Y los desarrolladores pueden decir, bueno, un par de semanas, tal vez cuatro o cinco semanas si queremos hacerlo bien. Eso significaría que perderíamos al cliente y no querríamos hacer eso. Así que terminamos diciendo, bueno, puedo construir una solución muy rápida solo para este cliente, solo para no perderlo. ¿Y en cuatro o cinco días, qué te parece? Eso suena bien. Eso es genial. Construimos la cosa, importamos todas las cosas, y funciona, y conseguimos al cliente, y eso es genial. Y simplemente codificamos basura. Pero deberías estar muy orgulloso de eso porque es increíble. Teníamos muy buenas razones para crear eso. Tomamos la decisión consciente de decir voy a construir código feo a cambio

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.