[Xamarin.Forms] Accesibilidad

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.

Accesibilidad en Xamarin.Forms

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.

AutomationProperties.HelpText

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.

AutomationProperties.IsInAccessibleTree

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.

AutomationProperties.LabeledBy

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.

AutomationProperties.Name

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:

Ver 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

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s