¿Cuánto tiempo lleva construir una aplicación móvil accesible?

Rate this content
Bookmark

Los conceptos erróneos más comunes sobre la accesibilidad son que lleva mucho tiempo o se puede dejar fácilmente como lo último en agregarse. Pero, por supuesto, esto no es el caso. Veremos lo fácil y rápido que es adoptar la accesibilidad como un Ciudadano de Primera Clase y, por el contrario, lo difícil y lento que es agregar accesibilidad a un proyecto existente.

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

FAQ

La accesibilidad en aplicaciones móviles es la práctica de hacer que la aplicación sea utilizable por la mayor cantidad de personas posible, asegurando que todos puedan usarla independientemente de sus capacidades.

Alessandro utiliza React Native Armour, una biblioteca que desarrolló, que incluye componentes y hooks para asegurar la accesibilidad. Además, realiza comprobaciones en tiempo de ejecución para identificar y corregir problemas comunes de accesibilidad.

Alessandro enfrentó problemas como etiquetas y reglas de accesibilidad incorrectas, problemas de enfoque y navegación en formularios, y la necesidad de hacer que los mensajes y estados sean claros y accesibles para los usuarios de lectores de pantalla.

Alessandro construye componentes compartidos que son accesibles por defecto, manejando todas las propiedades y estados necesarios para cumplir con los requisitos de accesibilidad desde el inicio del desarrollo.

Construir con accesibilidad desde el principio permite integrar componentes accesibles desde el desarrollo inicial, lo cual es menos costoso y más eficiente que tratar de modificar una aplicación para que sea accesible después de su desarrollo.

Alessandro enfatiza que ignorar la accesibilidad puede resultar en un daño grave y en un aumento de costos y esfuerzos. Recomienda hacer que los componentes sean accesibles desde su creación para evitar problemas a largo plazo.

React Native Armour proporciona componentes y hooks que facilitan la gestión de la accesibilidad, como contenedores de formularios que manejan el envío y componentes que ajustan el enfoque automáticamente en caso de errores.

Alessandro Senese
Alessandro Senese
21 min
24 Oct, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Construir una aplicación accesible puede llevar mucho tiempo, pero se puede dividir en dos partes: hacer que una aplicación existente sea accesible y comenzar una aplicación accesible desde cero. React Native Armour puede ayudar con las correcciones de accesibilidad, pero aún se requieren verificaciones manuales. Las mejores prácticas de accesibilidad incluyen enfocar los elementos en el orden correcto, anunciar los cambios de IU a los usuarios del lector de pantalla y garantizar la consistencia en el comportamiento y la apariencia. La construcción de componentes accesibles puede agilizar el proceso de hacer que una aplicación sea accesible.

1. Introducción a la Accesibilidad y Solución de Problemas

Short description:

¿Es realmente cierto que construir una aplicación accesible lleva mucho tiempo y es costoso? Vamos a dividir la agenda en dos partes: hacer que una aplicación existente sea accesible y comenzar una aplicación accesible desde cero. La accesibilidad es la práctica de hacer que tu aplicación móvil sea utilizable por la mayor cantidad de personas posible. El problema de accesibilidad a solucionar es un informe real que recibimos, resaltando un problema grave. Utilicé React Native Armour para ayudar con las correcciones, que incluye componentes y hooks para cumplir con los requisitos de accesibilidad. Reemplacé las importaciones de pressable de react-native a react-native-ama, lo que resultó en aproximadamente 200 errores de TypeScript. Tuve que navegar por las pantallas para solucionar problemas y asegurarme de que las etiquetas de accesibilidad fueran claras. Los encabezados se marcaron como encabezados para el lector de pantalla. El formulario presentó otro problema.

Para responder a esa pregunta, vamos a dividir la agenda en dos partes. En la primera parte, tomaremos una aplicación existente y trataremos de hacerla accesible. En la segunda parte, comenzaremos una aplicación accesible desde cero.

Antes de comenzar, mi nombre es Alessandro Lemsenese y soy un ingeniero de software en Formidable. Comencé a trabajar con accessibility hace unos cuatro años. Mi primer trabajo con React en un televisor involucró la creación de una aplicación accesible para un banco. Comencé a aprender más y más sobre accessibility y nunca dejé de hacerlo desde entonces.

Antes de continuar, recordemos qué estamos tratando de hacer. La accesibilidad es la práctica de hacer que tu aplicación móvil sea utilizable por la mayor cantidad de personas posible. Ese es nuestro objetivo. Queremos asegurarnos de que la mayor cantidad de personas posible puedan usar nuestra aplicación. Así que empecemos.

Ahora, el problema de accessibility a solucionar es en realidad un informe real que recibimos de una excelente compañía, donde resaltaron un problema grave y crítico que tuvimos que solucionar en nuestra aplicación. En mi caso, utilicé React Native Armour para ayudarme con estas correcciones. Y la biblioteca es una biblioteca de React Native que construí después de unirme a Formidable. Contiene un conjunto de componentes y hooks diseñados para cumplir con los requisitos mínimos de accessibility. Lo primero que hice fue instalar la biblioteca con Yard, importar el proveedor proporcionado por la biblioteca y envolverlo alrededor de mi aplicación. Para corregir reglas, etiquetas, estados e indicaciones, reemplacé todas las importaciones de pressable de react-native a react-native-ama. Y una vez que hice eso, obtuve alrededor de 200 errores de typescript o reglas y etiquetas faltantes. Y en esta captura de pantalla puedes ver cómo funciona Ama. Básicamente, Ama realiza algunas comprobaciones en tiempo de ejecución, pero además de la tipificación de typescript, realiza una comprobación en tiempo de ejecución de los problemas comunes de accessibility y, si los encuentra, resalta el componente dentro de la interfaz de usuario y muestra un banner, además de imprimir en la consola cuál de las pruebas de accessibility ha fallado.

En mi caso, tenía alrededor de 200 errores y el gran problema que tuve fue que no podía asumir que todo era un botón. Y debido a que el código que escribí para usar no siempre era sencillo, la opción que tuve fue navegar por la pantalla para solucionar el problema. Lo mismo sucedió con la etiqueta de accessibility. Tuve que asegurarme de que la etiqueta de accessibility fuera clara para el usuario del lector de pantalla y también tuve que verificar si era suficiente porque teníamos algunos casos como el que se muestra en la captura de pantalla donde el botón contenía x información, en este caso 5 mensajes, mensajes no leídos. Así que tuve que comunicar esta información al usuario del lector de pantalla utilizando una indicación accesible. Además, debido a que no había trabajado en todas las partes de la aplicación, no estaba seguro de cuántas pantallas teníamos en realidad, así que la única opción que tuve fue recorrer toda la aplicación por mí mismo y descubrir toda la información que faltaba. Para los encabezados, fue más fácil. Solo asegúrate de que cada pantalla tenga un encabezado y que todo lo que parezca un encabezado se lea y se marque como un encabezado para el lector de pantalla. El formulario, presentó otro problema.

2. Solución de Problemas de Accesibilidad del Formulario y la Hoja Inferior

Short description:

El usuario no podía enfocar la etiqueta del formulario y el campo de entrada como campos separados. La tecla de retorno en el teclado no funcionaba correctamente. El envío del formulario no se enfocaba en el primer campo con un error. Utilizamos React Native ARMA para solucionar estos problemas. También abordamos el problema de accesibilidad con la hoja inferior utilizando un componente incorporado de ARMA. Todo el proceso, incluidas las correcciones de errores, llevó más de 5 semanas. Para construir una aplicación accesible, podemos crear componentes compartidos que manejen las propiedades de accesibilidad. Sin embargo, aún se requieren verificaciones manuales para garantizar la compatibilidad con los lectores de pantalla.

El problema más grande era que el usuario no podía enfocar la etiqueta del formulario y el campo de entrada como dos campos diferentes. La opción requerida no se leía y el mensaje no se leía como parte del campo. Otro problema era que, por defecto, React Native muestra un teclado con la tecla de retorno, pero esa tecla de retorno no hace nada. El comportamiento correcto era permitir al usuario navegar por los campos usando el botón siguiente si es necesario y permitir enviar el formulario con la tecla de retorno.

El último problema era que si se enviaba el formulario y había un error, el primer campo que contenía un error debía recibir el enfoque, esto no estaba sucediendo en nuestro caso. Para solucionar esto, utilicé React Native ARMA, especialmente el campo de formulario es un contenedor que maneja el envío del formulario. Entonces, si en este caso el envío falla, el formulario que contiene una referencia a todos los campos internos intentará enfocar el primer campo que marcamos como que contiene un error. Y también, sí, el formulario en sí se utiliza internamente por el campo de texto y el gancho de campo de texto para averiguar qué botón del teclado mostrar.

Para el campo de texto, tuvimos que compartir los componentes, así que tuve que envolverlos. Tuvimos que usar el gancho de entrada de texto donde se utiliza la referencia para permitir enfocar el campo internamente y ver si el campo no tenía validación, si no tenía errores o los diversos atributos y pasar esas propiedades de vuelta al campo de texto. También tenemos un campo de formulario como una casilla de verificación o un combo, en este caso tuve que envolverlo en el formulario genérico proporcionado por ARMA y este campo es capaz de recibir un enfoque de la pantalla del lector.

Para la hoja inferior, la que estábamos usando no recibía ningún enfoque, el usuario aún podía seleccionar cualquier cosa debajo de la superposición de la propia hoja inferior. Así que tuvimos que reemplazar eso y en este caso utilicé uno incorporado en ARMA que abordó el problema de accesibilidad. Además, este tiene el beneficio de desactivar la animación de deslizamiento si el usuario desactiva la animación en el dispositivo. En el momento de la acción, en este caso, si se agrega un intento a la tarjeta, mostramos un mensaje durante unos segundos y el informe que se suponía que debía comportarse más o menos como una hoja inferior, se suponía que debía recibir el enfoque, permitir al usuario suficiente tiempo para interactuar con él y el usuario no debía poder seleccionar nada, ni enfocar nada debajo. En este caso, utilizamos la hoja inferior proporcionada por React Native ARMA, por lo que agregamos todas las características de enfoque y la característica de enfoque, y la usamos en conjunto con la acción de tiempo de espera. Este gancho básicamente permite activar la función que le damos según el estado del lector de pantalla y el dispositivo, por ejemplo, en iOS, si el lector de pantalla está activado, el tiempo de espera nunca se activa, mientras que en Android utilizamos la configuración de tiempo de espera de la acción del dispositivo.

Entonces, ese fue el problema grave y serio que solucionamos, ¿cuánto tiempo llevó? También agregamos correcciones de errores, porque durante el proceso tuvimos que reemplazar algunas bibliotecas con otras que eran accesibles. Así que introdujimos algunos errores, algunos de los cuales no éramos conscientes, porque, por ejemplo, la hoja inferior utiliza modelos, pero React Native en este momento no admite la apertura de múltiples modelos a menos que estén anidados, por lo que también tuvimos que cambiar un poco la lógica en torno a eso para que funcione en la aplicación. Y todo el proceso llevó más de 5 semanas para solucionar. Así que construyamos una aplicación accesible como ciudadano de primera clase. ¿Cómo lo hacemos? ¿Cómo podemos asegurarnos de que nuestra aplicación sea accesible desde el primer día? La solución es fácil, podemos construir componentes compartidos que sean accesibles por defecto. Entonces, dondequiera que tengamos botones con diferentes estados, con diferentes indicaciones, simplemente creamos uno o varios componentes compartidos que manejen todas las propiedades requeridas que necesitamos. Lo mismo podemos hacer para un encabezado, lo mismo podemos hacer para formularios, simplemente nos aseguramos de que los campos ya sean accesibles. Hoja inferior, superposición si es necesario y carrusel, en nuestro caso agregamos un carrusel, tuvimos que hacerlo accesible. Entonces, cualquier componente que realmente necesitemos en nuestra aplicación, podemos crearlo una vez y hacerlo accesible. Lo que vamos a usar ya es accesible por defecto. Necesitamos un poco, solo un poco de tiempo extra para asegurarnos de que todo funcione. Porque ser accesible de forma predeterminada no significa que su aplicación vaya a ser completamente accesible, hay algunas verificaciones que deben hacerse manualmente que no podemos automatizar. Por ejemplo, aún debemos asegurarnos de que cualquier función que construyamos se pueda hacer con el lector de pantalla.

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.
Desarrollo de aplicaciones ilimitadas con Expo y React Native
React Advanced 2021React Advanced 2021
27 min
Desarrollo de aplicaciones ilimitadas con Expo y React Native
Today's Talk discussed building cross-platform apps with React Native and Expo, addressing challenges such as setting up the native runtime and managing dependencies. Expo provides a pre-built runtime, native APIs, fast iteration speed, and integrated cloud services. EAS build simplifies app deployment by handling native code signing and validation. Over-the-air updates allow instant updates to JS and assets. Custom native code can be added using auto-linking and config plugins, and Expo supports both Managed and Bare workflows.
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.
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
React Summit 2022React Summit 2022
7 min
Cómo compartir código entre una aplicación web de React y una aplicación móvil de React Native en Monorepo
This presentation focuses on sharing code between React web and React native mobile apps. The speaker demonstrates how to achieve feature parity using a Monorepo with NX. They highlight the importance of sharing non-UI code, such as business logic and state management, through shared libraries. This approach allows the apps to focus on UI code while keeping non-UI code separate. For more details, refer to the speaker's blog post.

Workshops on related topic

Llevando tu aplicación web a nativa con Capacitor
JSNation 2023JSNation 2023
111 min
Llevando tu aplicación web a nativa con Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
Entonces, tienes una increíble aplicación web que has construido y quieres llevarla de tu navegador web a la App Store. Seguro, hay muchas opciones aquí, pero la mayoría requerirá que mantengas aplicaciones separadas para cada plataforma. Quieres que tu código base sea lo más cercano posible en la Web, Android e iOS. Afortunadamente, con Capacitor, puedes tomar tu aplicación web existente y crear rápidamente aplicaciones nativas para iOS y Android para distribuir en tu App Store favorita.
Contenido: Este masterclass está dirigido a desarrolladores principiantes que tienen una aplicación web existente o están interesados en el desarrollo móvil. Repasaremos:- ¿Qué es Capacitor?- ¿Cómo se compara con otras soluciones multiplataforma?- Usando Capacitor para construir una aplicación nativa utilizando tu código web existente- Organizando nuestra aplicación para su distribución en tiendas de aplicaciones móviles con convenciones de nombres, iconos, pantallas de inicio y más
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!
Masterclass práctico con SwiftUI, GraphQL y Neo4j AuraDB
GraphQL Galaxy 2022GraphQL Galaxy 2022
156 min
Masterclass práctico con SwiftUI, GraphQL y Neo4j AuraDB
WorkshopFree
William Lyon
William Lyon
Aplica el poder de los grafos al desarrollo de aplicaciones móviles iOS en este masterclass práctico. Exploraremos cómo utilizar la biblioteca Neo4j GraphQL para construir APIs de GraphQL respaldadas por Neo4j AuraDB y cómo integrar GraphQL en una aplicación iOS utilizando SwiftUI y la biblioteca Apollo iOS GraphQL mientras construimos una aplicación móvil de lectura de noticias.
Tabla de contenidos:- Introducción a Neo4j AuraDB- Construcción de APIs de GraphQL con la biblioteca Neo4j GraphQL- Introducción a SwiftUI- SwiftUI + GraphQL
Requisitos previosPara seguir el masterclass, los asistentes necesitarán una computadora Mac con una versión reciente de Xcode instalada. Será útil tener cierta familiaridad con Swift y el desarrollo de aplicaciones iOS, aunque no es necesario.
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.
Llevando tu aplicación web de React a nativa con Capacitor
React Summit 2022React Summit 2022
92 min
Llevando tu aplicación web de React a nativa con Capacitor
WorkshopFree
Mike Hartington
Mike Hartington
Entonces, tienes una increíble aplicación de React que has construido y quieres llevarla de tu navegador web a la App Store. Seguro, hay muchas opciones aquí, pero la mayoría requerirá que mantengas aplicaciones separadas para cada plataforma. Quieres que tu base de código sea lo más cercana posible en la Web, Android e iOS. Afortunadamente, con Capacitor, ¡puedes tomar tu aplicación web existente y crear rápidamente aplicaciones nativas para iOS y Android para distribuirlas en tu App Store favorita!
Este masterclass está dirigido a desarrolladores intermedios que tienen una aplicación de React existente o están interesados en el desarrollo móvil con React. Repasaremos:
¿Qué es Capacitor?¿Cómo se compara con otras soluciones multiplataforma?Usando Capacitor para construir una aplicación nativa utilizando tu código web existenteMejorando nuestra aplicación para su distribución en las tiendas de aplicaciones móviles con convenciones de nombres, iconos, pantallas de inicio y más.
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 ;)