{"id":2010,"date":"2023-06-12T08:52:30","date_gmt":"2023-06-12T08:52:30","guid":{"rendered":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/?p=2010"},"modified":"2023-06-19T09:14:19","modified_gmt":"2023-06-19T09:14:19","slug":"accesibilidad-en-flutter","status":"publish","type":"post","link":"https:\/\/blogs.encamina.com\/piensa-en-software-desarrolla-en-colores\/accesibilidad-en-flutter\/","title":{"rendered":"Accesibilidad en Flutter"},"content":{"rendered":"

\"\"<\/p>\n

La accesibilidad es una parte importante del desarrollo de aplicaciones m\u00f3viles, ya que permite que todas las personas, incluidas las que tienen discapacidades, puedan utilizar la aplicaci\u00f3n de manera c\u00f3moda y efectiva. En este art\u00edculo, os explico c\u00f3mo implementar la accesibilidad en aplicaciones m\u00f3viles utilizando Flutter.<\/p>\n

<\/p>\n

El widget Semantics<\/strong><\/h2>\n

Utilizando este widget se puede proporcionar informaci\u00f3n complementaria que ser\u00e1 la que interpreten las tecnolog\u00edas de asistencia. Para proporcionar esta informaci\u00f3n, es necesario colocar el widget Semantics al que queramos a\u00f1adirle dicha informaci\u00f3n, y fijar las propiedades que sean necesarias.<\/p>\n

A continuaci\u00f3n, vamos a implementar en un ejemplo muy sencillo el uso de este widget.<\/p>\n

Esta app define una pantalla que incluye un contador que se puede aumentar, disminuir y restablecer a cero con tres botones de acci\u00f3n flotantes. El n\u00famero actual del contador se muestra en una vista de texto que se actualiza cada vez que se hace clic en uno de los botones.<\/p>\n

\"\"<\/a><\/p>\n

Lo interesante de este c\u00f3digo 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\u00e1 din\u00e1micamente (el talkback lo leer\u00e1 cada vez que cambie). Adem\u00e1s, se a\u00f1ade la propiedad semanticLabel de los botones de acci\u00f3n flotantes para que sean le\u00eddos por los lectores de pantalla y faciliten la accesibilidad.<\/p>\n

\r\n     body: MergeSemantics(\r\n       child: Center(\r\n         child: Column(\r\n           mainAxisAlignment: MainAxisAlignment.center,\r\n           children: [\r\n             const Text(\r\n               'N\u00famero de clics',\r\n             ),\r\n             Semantics(\r\n               liveRegion: true,\r\n               child: Text(\r\n                 '$_counter',\r\n                 style: Theme.of(context).textTheme.headlineMedium,\r\n               ),\r\n             ),\r\n           ],\r\n         ),\r\n       ),\r\n     ),\r\n     floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,\r\n     floatingActionButton: Row(\r\n       mainAxisSize: MainAxisSize.max,\r\n       mainAxisAlignment: MainAxisAlignment.spaceAround,\r\n       crossAxisAlignment: CrossAxisAlignment.end,\r\n       children: [\r\n         FloatingActionButton(\r\n           onPressed: () {\r\n             _increment();\r\n           },\r\n           child: const Icon(\r\n             Icons.add,\r\n             semanticLabel: 'A\u00f1adir',\r\n           ),\r\n         ),\r\n         FloatingActionButton(\r\n           onPressed: () {\r\n             _set0();\r\n           },\r\n           child: const Icon(\r\n             Icons.exposure_zero,\r\n             semanticLabel: 'reestablecer a 0',\r\n           ),\r\n         ),\r\n         FloatingActionButton(\r\n           onPressed: () {\r\n             _decrement();\r\n           },\r\n           child: const Icon(\r\n             Icons.remove,\r\n             semanticLabel: 'quitar',\r\n           ),\r\n         ),\r\n       ],\r\n     ),\r\n   );\r\n }\r\n\r\n<\/pre>\n
Tambi\u00e9n se utiliza ExcludeSemantics para evitar que el t\u00edtulo de la aplicaci\u00f3n se lea dos veces: una vez para el t\u00edtulo de la aplicaci\u00f3n y otra vez para el t\u00edtulo de la pantalla. De esta forma se evita confundir a los usuarios con discapacidad visual.<\/p>\n
El widget ExcludeSemantics te ayuda a quitar el widget hijo para que no lo tenga en cuenta el talkback.<\/p>\n
\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return Scaffold(\r\n      appBar: AppBar(\r\n        title: const ExcludeSemantics(\r\n          child: Text('Accesibilidad'),\r\n        ),\r\n      ),\r\n\r\n<\/pre>\n
Por \u00faltimo, 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\u00ed.<\/p>\n
\r\n      body: MergeSemantics(\r\n        child: Center(\r\n          child: Column(\r\n            mainAxisAlignment: MainAxisAlignment.center,\r\n            children: [\r\n              const Text(\r\n                'N\u00famero de clics',\r\n              ),\r\n              Semantics(\r\n                liveRegion: true,\r\n                child: Text(\r\n                  '$_counter',\r\n                  style: Theme.of(context).textTheme.headlineMedium,\r\n                ),\r\n              ),\r\n            ],\r\n          ),\r\n        ),\r\n      ),\r\n<\/pre>\n
NOTA: Al activar el talkback, el primer clic en el widget coge el foco, para poder activar el
\nwidget (si tuviera un evento) habr\u00eda que hacer clic otras dos veces.<\/p>\n
NOTA2: Enlace hacia el repo donde se encuenta el c\u00f3digo de la app
\nhttps:\/\/github.com\/Encamina\/SmartDevices\/tree\/main\/flutter_accesibility<\/a><\/p>\n
Aqu\u00ed hay una lista de algunos de los widgets de Flutter que se pueden usar para hacer que una aplicaci\u00f3n sea m\u00e1s accesible:<\/p>\n