Etiquetas de vistas editables

Los elementos editables de una app permiten que los usuarios ingresen texto. Cada uno debe tener una etiqueta descriptiva en la que se especifique su propósito.

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

Implementación

Para etiquetar un elemento TextView o EditText editable, usa android:hint a fin de mostrar una etiqueta de texto descriptiva dentro del elemento cuando está vacía.

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

Si la interfaz de usuario de una app ya proporciona una etiqueta de texto para el elemento editable, define android:labelFor en la etiqueta View a fin de indicar qué elemento describe la etiqueta.

<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: El diseño TextInputLayout de la Biblioteca de compatibilidad de diseño de Android proporciona una manera fácil de administrar un EditText y una etiqueta de texto asociada, y funciona bien con los servicios de accesibilidad de Android.

Definir una android:contentDescription en cualquier EditText o TextView editable puede interferir en la capacidad de un servicio de accesibilidad para describir el texto que un usuario ingrese en el elemento, así como navegar por él o interactuar con él.

Diseño

Cuando los usuarios navegan a elementos editables con un lector de pantalla, una interfaz de usuario bien implementada tiene los siguientes elementos:

• Si el campo editable está vacío y tiene una etiqueta descriptiva que leerá el lector de pantalla
• Si el usuario ingresó texto en el campo editable, el lector de pantalla lee el texto además de la etiqueta descriptiva

Cuando un usuario navega a un nivel de detalle más bajo, como carácter por carácter, el lector de pantalla lee el texto ingresado o la sugerencia cuando está vacía.

Prueba

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

1. Activa TalkBack.
2. En la app, mueve el enfoque de accesibilidad al elemento editable vacío.
   • Verifica si la descripción por voz de TalkBack del elemento editable vacío contiene una etiqueta y si esta coincide con alguna etiqueta visual de la app.
3. Escribe algún texto en el elemento editable.
4. Mueve el enfoque de accesibilidad al elemento editable.
   • Escucha la descripción de TalkBack del elemento editable para verificar que la descripción hablada incluya tu texto escrito.

Las herramientas de pruebas automatizadas de Android pueden detectar las contentDescriptions de elementos editables que no están vacías. Te recomendamos que uses la Prueba de accesibilidad para Android a fin de realizar una prueba manual de la app de forma integrada en el dispositivo. Si quieres realizar pruebas automatizadas, activa la verificación de accesibilidad de Espresso y Robolectric.