Etiquetas View editables

Los elementos editables de una aplicación permiten a los usuarios introducir texto. Cada elemento editable debe tener una etiqueta descriptiva que identifique su función.

Android ofrece a los desarrolladores varias formas de etiquetar los objetos View en la interfaz de usuario de una aplicación. Algunas de estas formas de etiquetado pueden mejorar la accesibilidad de los elementos editables incluidos en la interfaz.

Implementación

Para etiquetar un elemento TextView o EditText editable, utiliza el atributo android:hint para mostrar una etiqueta de texto descriptivo en el elemento cuando esté vacío.

<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 aplicación ya incluye una etiqueta de texto en el elemento editable, define el atributo android:labelFor en el objeto View etiquetado para indicar el elemento que 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>

Nota: TextInputLayout te permite gestionar fácilmente un objeto EditText y una etiqueta de texto asociada en la biblioteca de compatibilidad de diseño de Android. Además, funciona perfectamente con los servicios de accesibilidad de Android.

Definir un atributo android:contentDescription en cualquier objeto EditText o TextView editable puede afectar a la capacidad del servicio de accesibilidad para describir el texto que introducen los usuarios en el elemento, con el que interactúan o por el que se desplazan.

Diseño

Cuando los usuarios naveguen por los elementos editables con un lector de pantalla, una interfaz de usuario bien implementada debe tener las siguientes características:

• Si el campo editable está vacío, debe incluir una etiqueta descriptiva que el lector de pantalla pueda leer.
• Si un usuario ha introducido texto en el campo editable, el lector de pantalla leerá el texto además de la etiqueta descriptiva.

Cuando un usuario navegue por una página con un nivel de detalle inferior, como carácter por carácter, el lector de pantalla leerá el texto introducido o la sugerencia cuando estén vacíos.

Pruebas

Sigue estos pasos para verificar manualmente que una aplicación contenga elementos editables correctamente etiquetados:

1. Activa TalkBack.
2. En la aplicación, mueve el enfoque de accesibilidad al elemento vacío que se puede editar.
   • Comprueba si la descripción hablada de TalkBack del elemento editable vacío contiene una etiqueta, y si esa etiqueta descriptiva coincide con alguna etiqueta visual de la aplicación.
3. Escribe algo en el elemento editable.
4. Mueve el enfoque de accesibilidad al elemento editable.
   • Para comprobar que la descripción hablada incluye el texto que has escrito, escucha la descripción del elemento editable de TalkBack.

Las herramientas de pruebas automáticas de Android pueden detectar un atributo contentDescription que no esté vacío en elementos editables. Te recomendamos que utilices Test de Accesibilidad para Android para probar tu aplicación manualmente en el dispositivo. Si quieres realizar pruebas automáticas, activa las comprobaciones de accesibilidad en Espresso y Robolectric.