¿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.

24 min
05 Dec, 2022

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.

Available in English

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.

3. Accesibilidad Móvil y Principios

Short description:

La aplicación debe ajustar el tamaño de la fuente base según el movimiento. Desactiva la animación si causa mareos por movimiento. Admite el modo oscuro para los usuarios que encuentran sensibles la lectura en pantallas blancas. Sigue los principios accesibles de Perceptible, Operable, Comprensible y Robusto. Evita el contenido que pueda causar convulsiones. Asegúrate de que el texto sea legible y comprensible. Ten un comportamiento y apariencia consistentes. Utiliza herramientas de linting para identificar problemas de accesibilidad.

Entonces, la aplicación debe asegurarse de que el tamaño de fuente base que elijas se ajuste según ese movimiento. Como dije, algunas personas pueden sentir náuseas por el movimiento, por lo que podrían decidir desactivar la animación en el dispositivo. Y, por lo tanto, si tienes animación en tu aplicación, no debes animar ninguna transición, aún puedes usar opacidad, es más la transición de cualquier movimiento, porque probablemente dos usuarios, por lo que no debes usar ningún movimiento en tu aplicación.

Otra configuración, inversión de colores, alto contraste, texto en negrita y modo oscuro. Sí, tu aplicación también debe admitir el modo oscuro, porque algunas personas pueden encontrar demasiado sensible la lectura de texto en la pantalla blanca, por lo que idealmente también deberías considerar admitir el modo oscuro para tu aplicación.

Otra cosa que debemos tener en cuenta son los principios accesibles, o POR, y estos son principios fundamentales de la organización W3, y es un acrónimo donde P significa Perceptible, O para Operable, U para Comprensible y R para Robusto. Operable significa que la información de la interfaz, los componentes de la interfaz de usuario, deben presentarse al usuario de una manera que puedan percibir. En el caso, por ejemplo, sí, texto para contenido no textual, subtítulos para videos y el contenido, sí, debe ser fácil de ver y escuchar. Por ejemplo, el uso de los componentes de la interfaz de usuario y la navegación deben ser operables. Por lo tanto, el usuario debe poder operar cualquier contenido a través de un teclado externo o un lector de pantalla. Además, el usuario debe tener suficiente tiempo para leer, usar el contenido. Por ejemplo, si algún contenido desaparece después de cierto tiempo, debes considerar extender el tiempo. Si el usuario está utilizando un lector de pantalla, o en Android hay una configuración llamada tiempo para tomar acción. Debes usar ese tiempo, o en su lugar, cualquier tiempo que decidas, para permitir que el usuario pueda interactuar con el contenido, como algún tiempo de expiración. El contenido no debe causar convulsiones ni reacciones físicas. Como dijimos antes, si tienes imágenes parpadeantes que pueden causar problemas a personas con epilepsia, debes evitar este tipo de contenido.

Otro principio es comprensible. La información y la operación de la interfaz de usuario deben ser comprensibles. El texto debe ser legible y comprensible, el contenido aparece y funciona de manera impredecible, los usuarios son ayudados y se corrigen errores. Esto, por ejemplo, se aplica a personas con discapacidades cognitivas, donde si usas demasiados tecnicismos o texto difícil de entender, excluyes a este tipo de personas. Además, sí, es una buena idea tener un comportamiento consistente en todo el centro y en todos los componentes, que se vean iguales. El contenido debe ser lo suficientemente robusto como para que pueda ser interpretado por una amplia variedad de agentes de usuario, incluidas las tecnologías de asistencia. Sí, esto es como en este ejemplo, debes dar un nombre, un rol o una pista de accesibilidad a un componente.

OK, ahora ves que hemos tenido una visión general de lo que es AccuSybit y algunos principios. Lo que podemos hacer de inmediato para comenzar es utilizar algún linting. Por ejemplo, para React Native, hay un complemento de Formidable. Se llama ES-Plugin React-Native Accessibility A11i. Este linter resaltará al menos los problemas más básicos, como la falta de rol de accesibilidad o la falta de etiqueta de accesibilidad en tus componentes.

4. Herramientas y Recursos Externos

Short description:

Puedes utilizar herramientas externas como el Inspector de Accesibilidad en iOS y el Escáner de Accesibilidad en Android para analizar tu aplicación en busca de problemas de accesibilidad. Estas herramientas no son perfectas y solo pueden detectar alrededor del 40% de los problemas, pero son un buen punto de partida. Además, puedes encontrar recursos, pautas, artículos y comunidades en Twitter para aprender más sobre accesibilidad.

También puedes utilizar herramientas externas. Por ejemplo, en iOS puedes utilizar el Inspector de Accesibilidad o en Android puedes utilizar el Escáner de Accesibilidad. También existen otras herramientas externas. Básicamente, estas herramientas son externas a tu aplicación. Debes ejecutarlas manualmente.

Por ejemplo, en Android, el Escáner de Accesibilidad analizará tu aplicación, y las aplicaciones web utilizadas en tu aplicación, te indicará si falta alguna etiqueta o rol en los componentes, o también resaltará si el contraste no es suficiente.

Otra cosa importante a tener en cuenta es que estas otras herramientas de prueba y linting no son perfectas. Solo detectarán alrededor del 40% de los problemas de accesibilidad, pero aún así es suficiente para comenzar mientras practicamos y aprendemos más sobre accesibilidad.

En cuanto a los recursos, podemos consultar pautas, artículos, seguir a personas o buscar comunidades o libros. Esta es una de las actividades que las personas pueden seguir en Twitter. Actualmente está realizando una actividad de 365 días en la que tuitea todos los días sobre accesibilidad, temas de accesibilidad y cómo resolver problemas. Sus tweets y su libro, que también puedes utilizar, son solo para iOS. Pero probablemente la mayoría de los patrones también se apliquen en Android. Así que sigue siendo un buen recurso.

5. Recursos para Accesibilidad Móvil

Short description:

Mobile Ally y las aplicaciones móviles accesibles son excelentes recursos para aprender sobre accesibilidad móvil. Las comunidades de Twitter como Mobile Accessibility y Access MonoByte brindan plataformas para hacer preguntas y acceder a recursos útiles. React Native AMA y Network Nativama ofrecen bibliotecas y pautas para construir aplicaciones accesibles. La plataforma de la BBC proporciona recursos para la accesibilidad de aplicaciones, incluyendo React Native. Los libros electrónicos para desarrollar aplicaciones accesibles también pueden ser útiles, especialmente cuando se trabaja con React Native. Recuerda que la accesibilidad es un proceso continuo y comenzar con medidas básicas de accesibilidad es un buen primer paso.

Otro grupo de personas en Twitter es Mobile Ally. Comparten muchos recursos, muchos específicos para dispositivos móviles. Otro buen recurso son las aplicaciones móviles accesibles. También tienen una lista de correo, donde cada semana comparten artículos sobre cualquier tipo de recurso tanto para Android como para iOS. La mayoría de las veces son cosas nativas, pero aún podemos usarlas, porque queremos aprender cómo funciona la accesibilidad, independientemente de la tecnología subyacente que queramos utilizar. Queremos realmente entender cómo hacer que la aplicación sea accesible.

También, una buena comunidad está en Twitter, hay una comunidad llamada... sí, tienen esta nueva función para comunidades. Es una accesibilidad móvil donde puedes hacer preguntas. Si tienes alguna duda sobre accesibilidad, puedes hacer una pregunta y alguien definitivamente responderá de la mejor manera posible. Y Access MonoByte también tiene un canal de Slack con recursos y personas dispuestas a ayudar con cualquier consulta.

Otros recursos, más enfocados en dispositivos móviles, uno es React Native AMA. React Native AMA es una biblioteca que estamos construyendo que intentará ayudarte a construir una aplicación accesible. Tendrás algunos componentes y algunos hooks que te ayudarán con el propósito. Es decir, algunos componentes, un hook, pueden realizar algunas verificaciones en tiempo real. Así que te pueden decir si falta una etiqueta, un rol accesible o si el contraste no es suficiente. También hay componentes como formularios que ya ayudan al usuario a navegar utilizando el teclado y la tecla siguiente para enfocar el siguiente campo.

Otro buen recurso es Network Nativama, que también proporciona pautas para cada componente que implementamos. También te decimos cómo se supone que debe funcionar de manera accesible y qué debes buscar cuando implementes alguna función. Otro buen recurso es la BBC. Hay una plataforma para la accesibilidad de aplicaciones. Este recurso es bastante nuevo y también ofrece recursos para React Native, aparte de Flutter y otras cosas nativas. Otra cosa que podemos usar son los libros electrónicos reales para desarrollar aplicaciones accesibles para nativas, Android e iOS. La razón es que a veces es posible que no podamos usar algunas API de accesibilidad porque aún no están disponibles en React Native. Pero principalmente lo que buscamos son patrones. Realmente queremos entender cómo debe funcionar la accesibilidad. Y tal vez intentar implementar esto en React Native tanto como sea posible.

Lo último que quiero decir es que sí, la accesibilidad es una tarea agradable. Probablemente te llevará tiempo, mucho tiempo. Pero también, no significa que tenga que ser perfecta. Puedes comenzar ahora mismo. Simplemente usa una herramienta de accesibilidad vinculada o alguna herramienta de accesibilidad y agrega algo de accesibilidad básica. Asegúrate de cubrir lo básico. Y también, a medida que aprendas más cosas, puedes mejorar tu aplicación cada vez más. Eso es todo de mi charla. Espero haberte dado suficientes recursos e información para comenzar. Si tienes alguna pregunta, puedes contactarme en las redes sociales. Estaré encantado de ayudarte de cualquier manera posible. ¡Muchas gracias!

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

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.
React Advanced Conference 2021React Advanced Conference 2021
27 min
Limitless App Development with Expo and React Native
App development is hard, React and Expo make it easy!It's never been simpler to build and deploy powerful mobile apps with incredible features to both Android and iOS users all over the world.We’ll discuss building and deploying mobile apps seamlessly from the cloud using EAS, creating powerful dev clients (like browsers but for mobile app development) for testing your app, pushing OTA updates instantly to users, and much more — no native experience required!
React Summit 2022React Summit 2022
7 min
How to Share Code between React Web App and React Native Mobile App in Monorepo
Usually creating web and mobile apps require different tech stacks, and it is pretty hard to share code. This talk will show how I added a React web app and a React Native mobile app in the same monorepo using Nx, and how I optimized codeshare between react web app and react native mobile app.
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?
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.

Workshops on related topic

React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
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!
TestJS Summit 2021TestJS Summit 2021
85 min
Automated accessibility testing with jest-axe and Lighthouse CI
Workshop
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.
JSNation 2023JSNation 2023
111 min
Bringing Your Web App to Native With Capacitor
WorkshopFree
So, you have a killer web app you've built and want to take it from your web browser to the App Store. Sure, there are a lot of options here, but most will require you to maintain separate apps for each platform. You want your codebase to be as close as possible across Web, Android, and iOS. Thankfully, with Capacitor, you can take your existing web app and quickly create native iOS and Android apps for distribution on your favorite App Store!
Contents: This workshop is aimed at beginner developers that have an existing web application, or are interested in mobile development. We will go over:- What is Capacitor- How does it compare to other cross-platform solutions- Using Capacitor to build a native application using your existing web code- Tidying up our application for distribution on mobile app stores with naming conventions, icons, splash screens and more
GraphQL Galaxy 2022GraphQL Galaxy 2022
156 min
Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB
WorkshopFree
Bring the power of graphs to iOS mobile app development in this hands-on workshop. We will explore how to use the Neo4j GraphQL Library to build GraphQL APIs backed by Neo4j AuraDB and how to integrate GraphQL into an iOS app using SwiftUI and the Apollo iOS GraphQL library as we build a news reader mobile app.
Table of contents:- Intro to Neo4j AuraDB- Building GraphQL APIs with the Neo4j GraphQL Library- Intro to SwiftUI- SwiftUI + GraphQL
PrerequisitesTo follow along during the workshop attendees will need a Mac laptop with a recent version of Xcode installed. Some familiarity with Swift and iOS app development will be helpful, although not required.
React Summit 2022React Summit 2022
161 min
Web Accessibility in JavaScript Apps
Workshop
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 ;)