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.
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:
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
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.
Este sitio web utiliza cookies para que tengas la mejor experiencia de usuario. Si continuas navegando, estás dando tu consentimiento para aceptar las cookies y también nuestra política de cookies (esperemos que no te empaches con tanta cookie 😊)