La accesibilidad es una parte importante del desarrollo de aplicaciones móviles, ya que permite que todas las personas, incluidas las que tienen discapacidades, puedan utilizar la aplicación de manera cómoda y efectiva. En este artículo, os explico cómo implementar la accesibilidad en aplicaciones móviles utilizando Flutter.
El widget Semantics
Utilizando este widget se puede proporcionar información complementaria que será la que interpreten las tecnologías de asistencia. Para proporcionar esta información, es necesario colocar el widget Semantics al que queramos añadirle dicha información, y fijar las propiedades que sean necesarias.
A continuación, vamos a implementar en un ejemplo muy sencillo el uso de este widget.
Esta app define una pantalla que incluye un contador que se puede aumentar, disminuir y restablecer a cero con tres botones de acción flotantes. El número actual del contador se muestra en una vista de texto que se actualiza cada vez que se hace clic en uno de los botones.
Lo interesante de este código es el uso de Semantics para hacer que la vista del contador sea accesible. La propiedad liveRegion de Semantics se establece en true, lo que indica que el texto se actualizará dinámicamente (el talkback lo leerá cada vez que cambie). Además, se añade la propiedad semanticLabel de los botones de acción flotantes para que sean leídos por los lectores de pantalla y faciliten la accesibilidad.
body: MergeSemantics(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Número de clics',
),
Semantics(
liveRegion: true,
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
),
],
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
FloatingActionButton(
onPressed: () {
_increment();
},
child: const Icon(
Icons.add,
semanticLabel: 'Añadir',
),
),
FloatingActionButton(
onPressed: () {
_set0();
},
child: const Icon(
Icons.exposure_zero,
semanticLabel: 'reestablecer a 0',
),
),
FloatingActionButton(
onPressed: () {
_decrement();
},
child: const Icon(
Icons.remove,
semanticLabel: 'quitar',
),
),
],
),
);
}
También se utiliza ExcludeSemantics para evitar que el título de la aplicación se lea dos veces: una vez para el título de la aplicación y otra vez para el título de la pantalla. De esta forma se evita confundir a los usuarios con discapacidad visual.
El widget ExcludeSemantics te ayuda a quitar el widget hijo para que no lo tenga en cuenta el talkback.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const ExcludeSemantics(
child: Text('Accesibilidad'),
),
),
Por último, el uso de MergeSemantics garantiza que las propiedades Semantics de los widgets secundarios se combinen y se comuniquen correctamente a los lectores de pantalla, en lugar de anularse entre sí.
body: MergeSemantics(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'Número de clics',
),
Semantics(
liveRegion: true,
child: Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
),
],
),
),
),
NOTA: Al activar el talkback, el primer clic en el widget coge el foco, para poder activar el
widget (si tuviera un evento) habría que hacer clic otras dos veces.
NOTA2: Enlace hacia el repo donde se encuenta el código de la app
https://github.com/Encamina/SmartDevices/tree/main/flutter_accesibility
Aquí hay una lista de algunos de los widgets de Flutter que se pueden usar para hacer que una aplicación sea más accesible:
- Semantics: este widget agrega metadatos de accesibilidad a otros widgets. Puede especificar el
nombre, la descripción y otras propiedades importantes para la accesibilidad. - ExcludeSemantics: este widget se utiliza para excluir ciertos widgets de los metadatos de
accesibilidad. Es útil cuando un widget no debe ser anunciado por un lector de pantalla. - MergeSemantics: este widget se utiliza para combinar varios widgets en un solo objeto semántico,
lo que permite que una aplicación se comunique de manera más efectiva con un lector de pantalla.
Aunque los siguientes widgets no son realmente para agregar accesiblidad, son de bastante ayuda para ajustar texto, contenedores, etc. a las diferentes tipos de pantalla
- FittedBox: este widget escala y ajusta su contenido para que quepa dentro de un área determinada.
Puede ser útil para mejorar la legibilidad de ciertos widgets para usuarios con discapacidades
visuales. - MediaQuery: este widget proporciona información sobre el tamaño de pantalla y la densidad de
píxeles del dispositivo actual. Puede ser útil para ajustar el diseño de una aplicación para
diferentes tamaños de pantalla y niveles de zoom. - FocusNode: Puede ser útil para controlar el foco y el movimiento del teclado.
- Tooltip: este widget muestra información adicional cuando un usuario toca encima de un widget.
Puede ser útil para proporcionar información adicional a usuarios con discapacidades visuales.
Es importante tener en cuenta que hay muchas más formas de hacer que una aplicación sea más accesible. Los desarrolladores deben asegurarse de seguir las pautas de accesibilidad para la plataforma que estén utilizando y probar su aplicación con diferentes herramientas de accesibilidad para garantizar que funcione correctamente para todos los usuarios.
¡Suscríbete a nuestras RRSS!
