Accesibilidad en Flutter: ¿es una tarea difícil? ¿Cómo puedes implementarla?
--
Nuestras aplicaciones impactan directamente en la vida de las personas. No importa si hacemos una solución para pedir transporte, solicitar alimentos, o, cómo en el caso del Banco, crear experiencias que conectan a las personas con sus objetivos. Todas las aplicaciones buscan conectar a un usuario con una solución y esto es genial, pero, ¿qué sucede si una persona tiene visión limitada, movilidad reducida, dificultades cognitivas, dificultades de audición o cualquier otra circunstancia diferenciada?
En ese caso, la aplicación solo podrá ser aprovechada por todas las personas si desde la solución se tiene empatía. El hecho que estés leyendo este artículo nos alegra mucho, pues es un indicio de que deseas que tus aplicaciones estén al alcance de todos. Entonces entremos en materia y veamos cómo desde nuestras soluciones Flutter podemos desarrollar aplicaciones al alcance de todos.
Definamos la accesibilidad digital
Según la RAE, la palabra accesibilidad se define de la siguiente forma: “Condición que deben cumplir los entornos, productos y servicios para que sean comprensibles, utilizables y practicables por todos los ciudadanos, incluidas las personas con discapacidad”(link).
Esto quiere decir que para que nuestras soluciones digitales sean accesibles, debemos permitir que todas las personas puedan acceder a la experiencia sin importar sus circunstancias.
Ahora bien, la accesibilidad no implica tener diferentes soluciones para cada usuario sino unificar los esfuerzos. Un claro ejemplo de esto es el tema oscuro de las aplicaciones; ¿sabías que originalmente se creó para aquellas personas que tienen problemas de visión, con el objetivo de mejorar el contraste de los elementos? Aunque, siendo muy sinceros, muchos usuarios sin problemas visuales preferimos esta configuración.
Por lo tanto, los elementos que explicaré a continuación no solo son para ayudar a personas con alguna circunstancia en particular, sino para mejorar la experiencia de todos.
La accesibilidad comienza en el diseño
Así es; desde antes de realizar una línea de código puedes asegurar muchos estándares de accesibilidad. En el artículo “Accesibilidad en el mundo digital, más que un concepto, un deber” damos a conocer más sobre este tema. Así que te recomiendo leerlo antes de continuar con la lectura de este artículo.
Implementando accesibilidad en Flutter
Ahora, si vamos al código, te llamará mucho la atención porque puede que conozcas un nuevo widget hoy 😲. Pero primero déjanos decirte que Flutter te adelantó parte del trabajo 🤯. Veamos cada uno de los detalles:
Tamaño de la fuente variable
Una de las herramientas que se utilizan en accesibilidad es permitir que los usuarios puedan variar el tamaño de las fuentes de sus aplicaciones. Flutter nos hizo parte del trabajo pues automáticamente calcula el tamaño de la fuente basándose en la configuraciones desarrolladas por el usuario desde el sistema operativo (tanto en Android como en iOS, podemos configurar el tamaño de la fuente).
Sin embargo, debes tener cuidado con el diseño de tu app, pues el espacio designado para los textos debe tener espacio suficiente para los cambios de fuente. Esto quiere decir que debes adicionar a tus pruebas el escenario en el que se tenga un dispositivo de pantalla pequeña con la configuración de fuente más grande.
Por otro lado, es importante resaltar que, en lo posible, debemos transmitir la información con iconos en lugar de textos. Por ejemplo, en vez tener un botón con texto que diga “eliminar”, utilizar el ícono de la cesta 🗑. Entre más intuitivo mejor.
Estableciendo el contraste adecuado de los colores
Aunque esto suene simple, es de vital importancia cumplir con este criterio en todas nuestras experiencias. Alguien con visión reducida podría no beneficiarse de la solución si no cumplimos al menos con una calificación AA (radio de contraste mínimo de 3) y en lo posible AAA (radio de contraste mínimo 4.5), puedes conocer más detalles en este link . Flutter te ayuda disponiendo de todos los componentes de material con un contraste AAA, sin embargo, cuando personalices tus widgets debes velar por mantener el contraste adecuado.
El widget Semantics un excelente aliado
Los lectores de pantalla son una gran ayuda para las personas que tengan alguna limitación visual. En los dispositivos móviles se suele utilizar TalkBack (Android) y VoiceOver (iOS). En Flutter la mayoría de widgets vienen con configuraciones preestablecidas para que los lectores de pantalla puedan comunicar la información al usuario. Sin embargo, cuando creamos widgets custom debemos tener en cuenta validar la correcta semántica de los elementos. En ocasiones hasta un texto, un botón o una imagen pueden tener elementos mal configurados ante los lectores de pantalla.
Para ayudarnos con este tema existe el widget Semantics, que tiene muchas propiedades disponibles, acá te dejo algunas :
Con el widget Semantics, puedes configurar de manera muy detallada cada uno de tus widgets empleando todas las propiedades anteriores.
Por ejemplo para el siguiente escenario:
El lector de pantalla al posicionarse sobre el header, sin importar el título que venga, leerá la línea 18; pues es la propiedad configurada como semanticsLabel, ahora nuestra pantalla no le muestra ninguna descripción al usuario mas que decir group, entonces ¿cómo podemos hacer para configurar nuestra pantalla y dar una descripción al usuario más clara?
Podemos envolver nuestro widget Scaffold dentro de un widget Semantics y con la propiedad label asignar una descripción a la pantalla:
De esta forma nos está leyendo la pantalla como un todo y como descripción principal esta leyendo lo que está en la propiedad label.
MergeSemantics
Sin embargo, puede ser que deseemos que nos lea el contenido Column solo cuando el usuario le dé clic. Para esto necesitamos crear un nuevo nodo de semántica.
Antes de envolver el Scaffold nos leía de esta forma los textos: ‘Estos es una historia’ text ‘Que debemos contar’ text.
Entonces tenemos dos problemas: crear un nuevo nodo semántico y lograr que nos lea los dos textos como un solo elemento. Para lograr esta labor podemos utilizar el widget MergeSemantics.
Al utilizar MergeSemantics estamos creando un nuevo nodo de Semántica constituido por los dos hijos que tiene adentro y los leerá como un texto unificado; es decir que leerá : ‘Esto es una historia que debemos contar’ text.
ExcludeSemantics
Si deseo que algún elemento no sea leído por el lector de pantalla, ¿qué debo hacer? Puedes utilizar el widget ExcludeSemantics, el cual omitirá todo lo que esté dentro de él, de forma que el lector de pantalla no lo leerá.
La propiedad showSemanticsDebugger
Finalmente, te recomiendo mucho en ambiente de pruebas utilizar la siguiente configuración:
La propiedad showSemanticsDebugger te permitirá ver los nodos de Semántica de tu aplicación de la siguiente forma :
Como ves con esto resulta muy útil a la hora de visualizar tu árbol de semántica.
Conclusión
Este fue un artículo introductorio, nos alegra que hayas leído hasta aquí. Ahora el reto queda en tus manos, sigue las propiedades del widget Semantics y desde el momento de diseño y desarrollo piensa en los elementos que analizamos en este artículo. Si tienes alguna inquietud déjanos saberlo en la caja de comentarios. No te olvides de darnos +50👏.
