¿Cómo comenzar tu viaje hacia la accesibilidad móvil?

Rate this content
Bookmark
Slides

Queremos aprender sobre la accesibilidad móvil para construir una aplicación móvil accesible, pero ¿por dónde empezamos? ¿Qué significa hacer que una aplicación sea accesible? ¿Qué deberíamos hacer los desarrolladores? Responderemos a estas preguntas adentrándonos en los fundamentos de la accesibilidad y las tecnologías de asistencia.

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

FAQ

La accesibilidad móvil es la práctica de hacer que tu aplicación móvil sea utilizable por la mayor cantidad de personas posible, incluyendo aquellas con diferentes tipos de discapacidades.

Las discapacidades se pueden categorizar en cinco grandes categorías: visión, audición, movilidad, cognitivas y del habla. Cada categoría tiene necesidades específicas que deben ser consideradas al desarrollar aplicaciones móviles accesibles.

Algunas tecnologías de asistencia importantes incluyen lectores de pantalla, teclados, interruptores, control de voz, braille y otras herramientas que ayudan a las personas con discapacidades a interactuar con dispositivos móviles.

Puedes comenzar utilizando herramientas de linting como ES-Plugin React-Native Accessibility A11i para identificar problemas básicos de accesibilidad, y también haciendo uso de herramientas externas como el Inspector de Accesibilidad en iOS o el Escáner de Accesibilidad en Android.

Los principios fundamentales de la accesibilidad incluyen que la aplicación sea Perceptible, Operable, Comprensible y Robusta, siguiendo los principios de la organización W3.

El modo oscuro es importante porque ayuda a las personas que son sensibles a la luz brillante o tienen dificultades para leer texto en fondos claros, mejorando así la accesibilidad general de la aplicación.

Las discapacidades cognitivas pueden dificultar que el usuario recuerde información, aprenda cosas nuevas o se concentre. Por ejemplo, el uso de fuentes y animaciones inadecuadas puede hacer que la interfaz sea confusa o inaccesible para personas con estas condiciones.

Existen varias comunidades y recursos en línea como Access MonoByte, Mobile Ally y libros específicos sobre accesibilidad en iOS y Android, además de seguir a expertos en redes sociales que comparten conocimientos y actualizaciones sobre accesibilidad.

Alessandro Senese
Alessandro Senese
24 min
05 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Esta charla explora la accesibilidad móvil, incluyendo los diferentes tipos de discapacidades y cómo afectan al uso de aplicaciones. Se enfatiza la importancia de hacer que las aplicaciones sean utilizables para la mayor cantidad de personas posible y se destacan los desafíos enfrentados por las personas con discapacidades visuales. La charla también cubre los principios de la accesibilidad móvil, como el escalado del tamaño de fuente, el soporte de modo oscuro y garantizar un texto legible. Se recomiendan herramientas y recursos externos, como el Inspector de Accesibilidad y el Escáner de Accesibilidad, para analizar la accesibilidad de las aplicaciones. Varias plataformas y comunidades, como Mobile Ally, Twitter y React Native AMA, brindan recursos valiosos para aprender sobre la accesibilidad móvil.

1. Introducción a la Accesibilidad Móvil

Short description:

En esta charla, exploraremos la accesibilidad móvil, incluyendo qué es, los diferentes tipos de discapacidades y cómo pueden afectar el uso de aplicaciones. También discutiremos la importancia de hacer que las aplicaciones sean utilizables para la mayor cantidad de personas posible, así como las diferentes categorías de discapacidades y sus necesidades específicas. Además, abordaremos los desafíos que enfrentan las personas con discapacidades visuales, como la daltonismo.

Hola, en esta charla, vamos a ver cómo comenzar con la accessibility móvil. Veremos qué es la accessibility, los diferentes tipos de discapacidades, las tecnologías de asistencia, las herramientas de accessibility y algunos recursos. Antes de comenzar, soy Alessandro Senese, soy un ingeniero de software en Formidable. Comencé mi viaje en la accessibility móvil hace unos tres años. En esta diapositiva, compartiré lo que he aprendido hasta ahora y te daré algunos recursos para comenzar.

Bien, antes de comenzar, aclaremos una cosa. La accessibility no significa solo hacer que tu aplicación funcione con un lector de pantalla. Hay mucho más. Entonces, ¿qué es la accessibility? La accessibility es la práctica de hacer que tu aplicación móvil sea utilizable por la mayor cantidad de personas posible. Nuestro objetivo es que nuestra aplicación sea utilizable por la mayor cantidad de personas posible. Para lograr eso, también debemos tener en cuenta qué es la discapacidad y cómo esto puede evitar que las personas utilicen la aplicación. La discapacidad es parte de los seres humanos. Esto significa que todos somos diferentes y tenemos habilidades y formas diferentes de acceder a nuestro entorno y a una aplicación móvil. Casi todos experimentarán temporal o permanentemente alguna discapacidad en algún momento de su vida. Entonces aquí podemos ver que todos tendrán algún tipo de discapacidad en algún momento de su vida, que puede ser temporal, como por ejemplo un brazo o una pierna rota, o también situacional donde estás sosteniendo algo en tu mano, por lo que eres menos capaz de realizar algunos movimientos. También podemos ver que más de 1 millón de personas, aproximadamente el 15% de la población mundial, tiene alguna forma de discapacidad. Aquí podemos ver algunos números por países. Entonces podemos ver que en realidad muchas personas pueden tener algún tipo de discapacidad que podría evitar que utilicen una aplicación. Por eso necesitamos entender qué son estas discapacidades. Aquí hay algunos otros números que se encuentran en línea. Aquí hay uno específico para los Países Bajos y cómo las personas holandesas utilizan las tecnologías de accessibility en el sitio web y la aplicación móvil. Aquí está el Persona Spectrum de Microsoft. Aquí podemos ver diferentes tipos de discapacidades y en diferentes situaciones, como permanentes, temporales o situacionales. Las discapacidades se pueden categorizar en 5 grandes categorías. Visión, audición, movilidad, cognitivas y del habla. Aquí, en estas diferentes categorías, las personas tendrán diferentes necesidades y diferentes formas de acceder a una aplicación móvil. Una discapacidad visual es cuando una persona tiene una pérdida de visión que no se puede corregir con gafas o lentes de contacto. Además de la ceguera total, también hay categorías como el daltonismo, la pérdida del campo central o la pérdida del campo periférico. Por ejemplo, en el caso del daltonismo, las personas pueden tener dificultades para ver algunos colores. Por eso, tal vez no sea una buena idea usar solo colores para proporcionar información en una aplicación móvil.

2. Comprensión de la Accesibilidad y las Discapacidades

Short description:

Usar etiquetas con colores puede ser una mala experiencia para los usuarios con discapacidades visuales. Proporcionar subtítulos o transcripciones para videos puede ayudar a aquellos con discapacidades auditivas. Las personas con discapacidades de movilidad pueden usar lectores de pantalla, asistentes de voz o tecnologías de asistencia. Es crucial comprender que la discapacidad es un espectro y que las personas pueden tener múltiples discapacidades. Las tecnologías accesibles incluyen teclados, interruptores, lectores de braille, control de voz y lectores de pantalla. Android e iOS ofrecen configuraciones de accesibilidad adicionales, como cambiar el tamaño del texto.

Y usar una etiqueta con colores puede ser una mala experiencia para este tipo de usuarios. O para los otros dos ejemplos, podrían estar usando una lupa en la configuración de accesibilidad o podrían necesitar usar un texto más grande. Por lo tanto, debes asegurarte de que tu aplicación se renderice correctamente al usar fuentes más grandes.

La discapacidad auditiva es cuando una persona tiene una incapacidad parcial o total para oír. Por ejemplo, dificultad para oír o sordera. En este caso, si tenemos un video, sería una buena idea proporcionar subtítulos o una transcripción para que estas personas puedan leer lo que está sucediendo.

Las personas con discapacidades de movilidad se ven afectadas por el movimiento, y por ejemplo, temblores, falta de coordinación, parálisis, espasmos y otros. Este tipo de persona podría estar usando otros lectores de pantalla o podría estar usando un asistente de voz o, por ejemplo, un interruptor u otras tecnologías de asistencia. Para discapacidades cognitivas, cuando una persona tiene dificultades para recordar, aprender cosas nuevas, concentrarse o tomar decisiones que afectan su vida cotidiana. Personas con TDAH, autismo, ansiedad, delirio, dislexia. Por ejemplo, algunas personas pueden tener Aplasia, por lo que si tienes una imagen que parpadea demasiado puede causarles problemas, para las personas con dislexia, el uso de la fuente y la forma en que se utiliza la fuente puede hacer que la experiencia con la aplicación sea muy mala. Otro ejemplo puede ser si tienes un campo de entrada y no tienes ninguna etiqueta, las personas pueden tener dificultades para recordar para qué era el campo, por lo que los obligas a eliminar lo que ingresaron para ver la pista y volver a ingresar la información, o algunas personas pueden verse afectadas por los movimientos de la animación. Por lo tanto, una buena idea también podría ser desactivar la animación si el usuario lo solicita, y así sucesivamente.

Otra cosa que debemos entender es que la discapacidad es un espectro, no binaria. En este caso, esta persona fue compartida en las redes sociales y la gente decía que ella es una falsa ciega. El problema es que les cuesta entender que ella tiene algún tipo de baja visión que aún le permite usar el teléfono móvil. Entonces sí, la discapacidad no significa que estés completamente discapacitado o no estés discapacitado. Puedes tener diferentes grados de discapacidad en cualquiera de las cinco categorías que hemos visto. Además, otra cosa que debemos entender es que las personas pueden tener múltiples discapacidades. Entonces sí, comprender la discapacidad es el primer paso para construir servicios accesibles. En nuestro caso, queremos construir una aplicación accesible, por lo que realmente necesitamos comprender las necesidades de estas cinco categorías y proporcionar soluciones para estas personas. Por lo tanto, cuando hablamos de tecnologías accesibles, nos referimos a teclados, interruptores, braille, lectores, control de voz o lectores de pantalla. Algunos usuarios pueden estar usando un teclado, como un teclado Xen, tanto en iOS como en Android. Un lector de pantalla, básicamente se utiliza para anunciar los elementos de la pantalla. Un interruptor, los usuarios utilizan un control de un solo botón para acceder y activar elementos en la pantalla. Un lector de braille o control de voz si deseas controlar el teléfono solo con tu voz. Por lo general, si te preocupas por un usuario de teclado y lector de pantalla, las otras tres categorías deberían funcionar sin mucho esfuerzo. Otras cosas proporcionadas por los teléfonos móviles, como las tecnologías de asistencia, son como un software externo o un dispositivo externo que el usuario puede usar en su móvil. Pero tanto Android como iOS ofrecen configuraciones de accesibilidad adicionales en general. Por ejemplo, el usuario puede optar por cambiar el tamaño del texto en el teléfono móvil.

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 ;)