Introducción
La accesibilidad es un factor de vital importancia que por suerte, es tenida en cuenta cada vez con mayor frecuencia y peso en desarrollos web, móviles, etc.
Cuando hablamos de accesibilidad en el desarrollo, nos referimos al concepto de diseñar interfaces de usuario que funcionen de forma correcta ante las diferentes características de visualización y asistencia de entrada. La gestión de alto contraste, zoom, tamaño de fuente o la lectura de pantalla son opciones que permiten el acceso de muchos usuarios a nuestras aplicaciones.
Las principales plataformas móviles del mercado, es decir, iOS, Android y Windows cuentan con APIs para permitir a los desarrolladores crear aplicaciones accesibles.
Xamarin.Forms nos permite crear aplicaciones multiplataforma nativas compartiendo interfaces de usuario gracias a su capa de abstraccion.
¿Cómo creamos aplicaciones accesibles con Xamarin.Forms?
Soporte a accesibilidad en aplicaciones Xamarin.Forms
En versiones previas de Xamarin.Forms para añadir opciones de accesibilidad, requeríamos de Custom Renders. Acceder a APIs nativas para acceder a opciones de accesibilidad. Con la llegada de los efectos, todo se simplificó pemitiendo crear efectos con acceso a APIs nativas de forma más sencilla.
Con la llegada de Xamarin.Forms 2.3.5 se añade soporte directo a APIs de accesibilidad.
Opciones de accesibilidad
Xamarin.Forms incluye diferentes opciones de accesibilidad disponibles en la clase AutomationProperties y disponibles como propiedades adjuntas. Estas propiedades se encargan de añadir en cada plataforma el uso correcto de las diferentes opciones de accesibilidad.
- AutomationProperties.HelpText
- AutomationProperties.IsInAccessibleTree
- AutomationProperties.LabeledBy
- AutomationProperties.Name
HelpText
Es un valor de tipo cadena que se utilizará para sintetizar en voz.
En cada plataforma se utilizará una propiedad corespondiente a las APIs nativas:
- Android: Hint
- iOS: AccesibilityHint
- Windows: AutomationProperties.HelpTextProperty
IsInAccesibleTree
Propiedad de tipo bool que indica si el elemento es accesible.
En cada plataforma:
- Android: Focusable
- iOS: IsAccesibilityElement
- Windows: AutomationProperties.AccesibilityViewProperty
LabeledBy
Esta propiedad permite que otro elemento visual defina información de accesibilidad. Así, podemos utilizar la información de otro elemento para ayudar a describir.
Internamente, cada plataforma utiliza las siguientes propiedades:
- Android: SetLabelFor
- iOS: No se mapea a ninguna propiedad.
- Windows: AutomationProperties.LabeledByProperty
Name
Es el nombre del elemento.
En cada plataforma:
- Android: ContentDescription
- iOS: AccesibilityLabel
- Windows: AutomationProperties.NameProperty
Veamos un ejemplo:
<StackLayout> <Label x:Name="UsernameLabel" Text="Username"/> <Entry AutomationProperties.Name="UsernameEntry" AutomationProperties.IsInAccessibleTree="True" AutomationProperties.LabeledBy="{x:Reference UsernameLabel}" AutomationProperties.HelpText="Insert Username" Placeholder="Insert Username"/> </StackLayout>
El ejemplo se encuentra disponible en GitHub:
Consejos accesibilidad
En general, a la hora de gestionar la accesibilidad en tu aplicación, deberíamos tener en cuenta los siguientes detalles:
- Haz pruebas de tu interfaz con los esquemas de color en modo contraste alto.
- Etiqueta los elementos de la interfaz con textos descriptivos utilizando las APIs de accesibilidad para permitir la lectura de la pantalla en cada plataforma.
- Recuerda etiquetar también botones e imágenes de la aplicación con una descripción accesible.
- Excluye elementos de decoración innecesarios!.
- En muchas ocasiones las aplicaciones móviles gestionan diferentes estados sólo con elementos visuales. Por ejemplo, al realizar la carga de elementos, mostramos un indicador visual para indicar progreso y fin. Recuerda agregar en estos indicadores específicos de accesibilidad. También se pueden añadir refuerzos acústicos.
- Ante contenido multimedia recuerda añadir descripciones legíbles y permitir acceder de forma sencilla a los botones de gestión del contenido.
- Si la aplicación está localizada en diferentes idiomas, recuerda localizar también todas las descripciones de accesbilidad añadidas.
- Cada plataforma cuenta con herramientas diferentes de narración. Android cuenta con opciones como Google TalkBack, iOS cuenta con VoiceOver y Windows con Narrator. Cada plataforma funciona de forma única a pesar de todas ellas contar con opciones similares. Es recomendable hacer pruebas en todas las plataformas donde nuestra aplicación puede funcionar.
Más información
- Xamarin: Accessibility
- Xamarin Help: Accessibility Support in Xamarin Forms
- Android Developers: Testing Your App’s Accessibility
- Apple: Accesibility