Etiquetas de vistas editables

Descripción

Los elementos editables de una app permiten que los usuarios ingresen texto. Cada elemento editable debe tener una etiqueta descriptiva que especifique su función.

Android ofrece varias opciones para que los programadores etiqueten Views en la interfaz de usuario de una app. Algunas de estas maneras de etiquetar pueden mejorar la accesibilidad de los elementos editables en una interfaz.

Implementación

Si quieres etiquetar un TextView o EditText editable, usa android:hint para mostrar una etiqueta de texto descriptiva dentro del elemento cuando no tenga contenido.


<EditText
    android:id="@+id/email_subject"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/email_subject_hint" />

Si el elemento editable ya tiene una etiqueta de texto en la interfaz de usuario de una app, define android:labelFor en la View con etiqueta para indicar cuál es el elemento que se describe.


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/email_subject_label"
        android:labelFor="@id/email_subject" />
    <EditText
        android:id="@+id/email_subject"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

Sugerencia: TextInputLayout en la Support Library de diseño de Android ofrece una manera sencilla de administrar un EditText y una etiqueta de texto asociada, y también funciona bien con los servicios de accesibilidad de Android.

Definir un android:contentDescription en cualquier EditText o TextView editable puede interferir con la capacidad de un servicio de accesibilidad para describir, navegar y también interaccionar con el texto que un usuario ingresa en el elemento.

Diseño

Al navegar entre los elementos editables con un lector de pantalla, una interfaz de usuario bien implementada presenta los siguientes elementos:

  • Si el campo editable está vacío, tendrá una etiqueta descriptiva y el lector de pantalla ofrecerá una descripción por voz.
  • Si un usuario ingresó texto en el campo editable, el lector de pantalla describirá el texto en lugar de la etiqueta.

Estos dos elementos no cambiarán incluso si navegas en un nivel de detalle menor, como carácter por carácter.

Pruebas

Sigue estos pasos para verificar manualmente que los elementos editables de la app tengan las etiquetas correctas:

  1. Activa TalkBack.
  2. Abre la app.
  3. Mueve el enfoque de accesibilidad al elemento editable vacío.
  4. Escucha la descripción por voz de TalkBack del elemento editable vacío. Verifica que la descripción contenga una etiqueta y si la etiqueta descriptiva coincide con alguna etiqueta visual en la app.
  5. Escribe texto en el elemento editable.
  6. Mueve el enfoque de accesibilidad al elemento editable.
  7. Escucha la descripción por voz de TalkBack del elemento editable que ahora contiene texto. Verifica que la descripción incluya el texto que escribiste.
  8. Abre el menú contextual local de TalkBack y cambia el nivel de detalle de la navegación a "Carácter".
  9. Desliza el dedo para mover el cursor del elemento editable entre las letras del texto. Verifica que la descripción por voz de TalkBack de cada acción de navegación coincida con los caracteres escritos, no con la etiqueta del elemento.

Las herramientas de prueba automatizada de Android pueden detectar un contentDescription que tiene contenido en elementos editables. Usa la Prueba de accesibilidad para Android para hacer una prueba manual de tu app en un dispositivo. Para hacer pruebas automatizadas, activa la verificación de accesibilidad en Espresso y Robolectric.