Accesibilidad en Android: información para desarrolladores y guía de implementación

En todo el mundo, hay alrededor de 285 millones de personas con discapacidad visual. Por lo tanto, al diseñar una nueva aplicación o considerar una renovación del diseño, sin duda es una buena idea ajustar su aplicación a las necesidades de este amplio grupo de usuarios. La personalización de aplicaciones para personas con discapacidad visual mejora la experiencia de todos sus usuarios. ¿Cuáles son las otras razones para considerar mejorar la accesibilidad de su aplicación y cómo hacerlo? ¡Encuentra todas las respuestas a continuación!

¿Cómo usan las aplicaciones las personas con discapacidad visual?

Un lector de pantalla es una herramienta para ejecutar aplicaciones (o simplemente navegar por la pantalla de su teléfono inteligente) para personas ciegas y con problemas de visión. El lector de pantalla más popular para Android es TalkBack . Con esta herramienta, el usuario realiza la entrada a través de gestos como deslizar o arrastrar.

Por lo general, la salida es una retroalimentación hablada. En TalkBack , tenemos dos modos de entrada de gestos:

• Exploración táctil , donde arrastra el dedo por la pantalla.
• Navegación lineal , donde desliza el dedo hacia la izquierda y hacia la derecha hasta encontrar el elemento de interés.

Una vez que llegue al artículo que le interesa, puede tocarlo dos veces para activarlo. ¿Quieres saber más sobre cómo ejecutar TalkBack? Por favor, lea el siguiente artículo.

Principios de aplicaciones accesibles

Para permitir que las personas con discapacidad visual utilicen nuestra aplicación, primero debemos comprender los principios que debemos seguir al diseñarla. Por lo tanto, antes de pasar a la sección de implementación, analicemos las suposiciones más importantes.

Maquetación y tipografía

La parte visual de la aplicación es fundamental. Los botones y el manejo del texto correctamente implementados son uno de los factores más importantes que hacen que la aplicación sea accesible.

Objetivos táctiles

Los objetivos táctiles son partes de la pantalla que responden a la interacción del usuario. La principal recomendación es crear objetivos táctiles con una resolución de al menos 48dp x 48dp. Leerás más sobre esto en el próximo capítulo.

Color y Contraste

La World Wide Web creó pautas de accesibilidad de contraste de color para ayudar y ayudar a los usuarios con deficiencias de color. Según la documentación, los aspectos críticos en cuanto a la accesibilidad del contraste de color son:

• Relación : el texto y los elementos interactivos deben tener una relación de contraste de color de al menos 4,5:1.
• El color como indicador : el color no debe ser el único indicador de los elementos interactivos. Sería mejor si también subrayara los enlaces al pasar el mouse por encima o si marcara los campos obligatorios con un asterisco.
• Daltonismo: el daltonismo rojo/verde es el más común. Por lo tanto, debe evitar el verde sobre rojo o el rojo sobre verde. Por la misma razón, evite usar rojo y verde para los indicadores "malos" y "buenos".

Tipografía

Los usuarios pueden aumentar el tamaño de la fuente para mejorar la legibilidad . En los dispositivos Android, es una opción del sistema que se usa con frecuencia, así que asegúrese de que haya suficiente espacio para fuentes grandes y extranjeras.

Texto de accesibilidad

El texto de accesibilidad es tanto texto visible (p. ej., etiquetas de elementos de la interfaz de usuario, texto en botones, enlaces y formularios) como descripciones invisibles (descripciones de contenido, que pueden proporcionar más información sobre el componente descrito).

¿Cuáles son los casos de uso más comunes del texto de accesibilidad ?

Tipos y estados de control

Los lectores de pantalla, como TalkBack, pueden anunciar automáticamente el tipo o el estado de un control pronunciando el nombre del control o emitiendo un sonido.

Elementos indicadores por la acción

Los verbos de acción indican lo que hace un elemento o enlace cuando lo tocas y describen lo que hace una vista.

Elementos con cambios de estado

En el caso de iconos que alternan entre valores o estados, el lector de pantalla describe un icono según cómo se presenta al usuario. Para obtener más ejemplos, lea la guía de Material Design.

Resumen

Este capítulo le enseñó cómo se debe adaptar el diseño para las personas ciegas y con discapacidad visual. Hasta ahora, hemos cubierto el diseño, la tipografía y la accesibilidad del texto . Ahora pasaremos a los principios de su implementación.

Implementación de accesibilidad

En la siguiente sección, me centraré en los aspectos clave de la implementación de la accesibilidad en su aplicación. ¡Vamos a empezar!

Diseño: objetivo táctil

Como mencioné en la parte teórica, cada elemento en el que se pueda hacer clic debe tener al menos 48dp/48dp.

Hay varias opciones para hacer esto. Tú podrías:

• Determine los valores para los atributos de ancho y alto según lo recomendado (48dp/48dp)
• Agregar relleno alrededor de los íconos
• Especifique valores para los atributos: MinWidth y/o minHeight
• Registrar TouchDelegate.

Mira un ejemplo de la documentación oficial de Google. Muestra el elemento que tiene el tamaño recomendado del destino táctil :

 <ImagenBotón 
   ...
   android:minWidth="40dp"
   android:minHeight="32dp"
   android:paddingLeft="4dp"

   Android: paddingTop = "8dp"
   android:rellenoDerecho="4dp"
   Android: relleno inferior = "8dp" />

Texto de accesibilidad

Una de las formas de adjuntar el texto de accesibilidad a los elementos de la interfaz de usuario es usar un atributo de Android llamado ContentDescription . Si no lo proporciona para un botón de imagen, por ejemplo, la experiencia para un usuario de TalkBack puede ser discordante.

Mira el ejemplo:

 <!-- El valor de la siguiente cadena es "Buscar". -->
<ImagenVista
   ...
   android:contentDescription="@cadena/búsqueda" />

Para elementos decorativos como espaciadores y divisores, establezca su atributo “android:contentDescription” en "null" . Si su aplicación solo es compatible con los dispositivos que ejecutan Android 4.1 (nivel de API 16) o superior, puede configurar los atributos “android:importantForAccessibility” en "no" .

Por favor, asegúrese de no incluir el tipo de control o el estado del control en la descripción de su contenido. Android tiene de forma nativa palabras como botones, seleccionado, marcado, etc.

Técnicas de etiquetado

A continuación, puede encontrar un conjunto de buenas prácticas para describir los componentes de la interfaz de usuario en su aplicación.

Componentes que se describen entre sí

Si tiene un componente que le permite proporcionar algunos datos (por ejemplo, EditText), es bueno tener un objeto View que lo describa (por ejemplo, TextView). Por eso se creó el atributo "android:labelFor" . Por favor, eche un vistazo al ejemplo:

 <!-- El texto de la etiqueta sería "Nombre:" -->
<Vista de texto 
   ...
   androide:
   android:labelFor="@+id/nombreEntrada"
   android:text="@cadena/nombre" />

<!-- El texto de accesibilidad será "Editar texto para el nombre" -->
<Editar Texto 
   ...
   androide: />

<!-- El texto de la etiqueta sería "Apellido:" -->
<Vista de texto 
   ...
   androide:
   android:labelFor="@+id/apellidoEntrada"
   android:text="@cadena/apellido" />

<!-- El texto de accesibilidad será "Editar texto para apellido" -->
<Editar Texto 
   ...
   androide: />

Colección de elementos relacionados

Si su aplicación tiene elementos de la interfaz de usuario que están relacionados naturalmente (como campos con información sobre un libro), puede organizarlos en grupos usando un contenedor enfocable . Para hacerlo, establezca el atributo del objeto contenedor “android:focusable” en verdadero.

Al hacerlo, TalkBack puede presentar las descripciones de contenido de los elementos internos, uno tras otro, en un solo anuncio. Agrupar el contenido reduce la cantidad de deslizamiento que el usuario tiene que hacer mientras optimiza la salida de voz. Por favor mira el ejemplo:

 <LinearLayout 
   ...
   androide:
   android: orientación = "vertical"
   android:enfocable="verdadero">

   <Vista de texto
	  ...
       androide:
       android:text="@cadena/título"/>

   <Vista de texto
	  ...
       androide:
       android:text="@cadena/autor"/>

   <Vista de texto
	  ...
       androide:
       android:text="@cadena/páginas"/>
</LinearLayout>

Por supuesto, si su contenedor tiene vistas anidadas, también puede aplicarles esta solución. Esto hará que navegar por su aplicación sea aún más accesible.

Acciones de accesibilidad

Cuando su aplicación admite acciones como hacer clic, presionar prolongadamente o deslizar , debe ajustar estas acciones a las personas con discapacidad visual. En eso nos centraremos en esta parte del artículo.

Mira cómo puedes implementarlo:

 ViewCompat.addAccessibilityAction(
   // Ver para agregar acción de accesibilidad
   vista de elemento,
   // La etiqueta que lee el servicio de accesibilidad
   getString(R.cadena.guardar)
) { _, _ ->
   // Comando de accesibilidad
   guardarElemento()
   verdadero
}

Esto da como resultado que TalkBack anuncie "Doble toque para archivar" .

Con la acción de accesibilidad implementada, los usuarios ahora pueden acceder a la acción a través del menú de acciones. Le hablaré un poco más adelante sobre cómo navegar a este menú. Por favor, recuerda: es esencial permitir que los usuarios realicen todos los flujos dentro de tu aplicación de manera eficiente.

Widgets

Esta sección es corta pero muy importante. Cuando cree su componente de interfaz de usuario, use o amplíe los widgets proporcionados por el sistema que están lo más abajo posible en la jerarquía de clases de Android. Los widgets proporcionados por el sistema en la parte inferior de la jerarquía ya tienen la mayoría de las capacidades de accesibilidad que necesita su aplicación. Los principales incluyen:

• Acciones de accesibilidad
• Características
• Información del estado.

Gracias a esto, no necesitará escribir soporte de accesibilidad completo para un componente desde cero y reducirá el riesgo de error.

Navegación

TalkBack sigue creciendo. Usamos dos menús contextuales (global y local) no hace mucho tiempo para navegar en el sistema de nuestro teléfono inteligente. Ahora, estos dos menús se han convertido en uno.

El menú contextual se utiliza para dos propósitos principales:

• Como su nombre indica, se utiliza para la navegación. Puede navegar a través de palabras, encabezados, enlaces, filas, contenido único u otros puntos según las preferencias o capacidades de la aplicación.
• El segundo propósito permite al usuario cambiar la configuración y los controles de TalkBack rápidamente.

En este menú, puede encontrar un conjunto de acciones (mencionadas en la sección anterior " Acción de accesibilidad "). ¿Cómo se puede acceder a este menú? Es muy simple. Solo tienes que hacer un gesto de deslizar hacia arriba y hacia la derecha.

Pruebas de accesibilidad

En los proyectos que he desarrollado hasta ahora, me he beneficiado principalmente de las siguientes tres ayudas: Escáner de accesibilidad, Espresso y Lint. Por supuesto, tienes muchas más herramientas a tu disposición. Te recomiendo que los compruebes por ti mismo. Puedes encontrar toda la documentación necesaria aquí.

Escáner de accesibilidad

Esta herramienta escanea la interfaz de usuario y proporciona recomendaciones para mejorar la accesibilidad de la aplicación.

El Escáner de accesibilidad permite que cualquier persona, no solo los desarrolladores, identifique rápida y fácilmente algunas mejoras de accesibilidad comunes, por ejemplo, objetivos táctiles pequeños, errores de contraste para texto e imágenes, falta de descripciones de contenido para widgets sin etiquetar, etc. Si desea comenzar a usar el Escáner de accesibilidad o simplemente busque instrucciones más detalladas, lea la siguiente documentación.

Android pelusa

Seguro que la mayoría de vosotros conocéis esta herramienta por vuestro trabajo diario. Lo que vale la pena recordar es que Android Studio también brinda advertencias sobre varios problemas de accesibilidad y enlaces a lugares en el código fuente que contienen estos problemas.

Café exprés

Espresso es una biblioteca de prueba de Android que le permite probar rápida y fácilmente su interfaz de usuario. Permite la interacción con los componentes probados de la interfaz de usuario de la aplicación y garantiza que se produzcan ciertos comportamientos o se cumplan ciertas condiciones. Por supuesto, como parte del soporte de accesibilidad, puede habilitar y configurar las pruebas de accesibilidad .

Resumen

Hacer que su aplicación sea accesible no solo la abre a nuevos usuarios. Ayuda a mejorar nuestra vida diaria y hace que el mundo sea más inclusivo. Espero que este artículo te haya ayudado a aprender sobre accesibilidad. Para obtener más información, no olvide consultar la documentación oficial.