La Vista previa para desarrolladores de Android 11 ya está disponible. Pruébala y comparte tus comentarios.

Principios para mejorar la accesibilidad de la app

La ayuda de esta página brinda más información sobre cómo mejorar la accesibilidad de las apps. En cada sección, se describe un principio que puede mejorar aún más la accesibilidad de tu app.

En esta guía, se tratan las siguientes prácticas recomendadas.

Elementos de etiqueta
Los usuarios deben poder comprender el contenido y el propósito de cada elemento de IU interactivo y significativo en tu app.
Utiliza señales que no hagan uso del color
Los usuarios deben poder distinguir claramente entre categorías de elementos en una IU. Para ello, usa patrones y la posición, además del color, para expresar estas diferencias.
Mejora la accesibilidad del contenido multimedia
Trata de agregar descripciones al contenido de video o audio de tu app a fin de que los usuarios que consuman este contenido no tengan que depender por completo de señales visuales o sonoras.

Elementos de etiqueta

Es importante brindarles a los usuarios etiquetas útiles y descriptivas para cada elemento de IU interactivo de tu app. En cada etiqueta, se debe explicar el significado y el propósito de un elemento específico. Los lectores de pantalla como TalkBack pueden leerles estas etiquetas a los usuarios que dependen de estos servicios.

En la mayoría de los casos, debes especificar la descripción de un elemento de IU determinado en el archivo de recursos de diseño que contiene este elemento. Aunque, por lo general, debes agregar etiquetas con el atributo contentDescription, como se explica en la guía sobre cómo mejorar la accesibilidad de las apps, hay varias otras técnicas de etiquetado que debes tener en cuenta, como se describe en las siguientes secciones.

Elementos editables

Cuando etiquetas elementos editables, como objetos EditText, resulta útil mostrar texto que brinde ejemplos de entradas válidas en el elemento, además de hacer que este texto de ejemplo esté disponible para los lectores de pantalla. En estos casos, puedes usar el atributo android:hint, como se muestra en el siguiente fragmento:

    <!-- The hint text for en-US locale would be
         "Apartment, suite, or building". -->
    <EditText
       android:id="@+id/addressLine2"
       android:hint="@string/aptSuiteBuilding" ... />
    

En este caso, el objeto View debe tener su atributo android:labelFor establecido en el ID del elemento EditText. Si deseas obtener más información, consulta la sección en la que se explica cómo etiquetar pares de elementos en los que uno describe al otro.

Pares de elementos en los que uno describe al otro

Es común que un elemento EditText determinado tenga un objeto View correspondiente que describa el contenido que los usuarios deben ingresar en el elemento . En los dispositivos con Android 4.2 (API nivel 17) o superior, puedes establecer el atributo android:labelFor del objeto View para indicar esta relación.

En el siguiente fragmento, se muestra un ejemplo de cómo etiquetar estos pares de elementos:


    <!-- Label text for en-US locale would be "Username:" -->
    <TextView
       android:id="@+id/usernameLabel" ...
       android:text="@string/username"
       android:labelFor="@+id/usernameEntry" />

    <EditText
       android:id="@+id/usernameEntry" ... />

    <!-- Label text for en-US locale would be "Password:" -->
    <TextView
       android:id="@+id/passwordLabel" ...
       android:text="@string/password
       android:labelFor="@+id/passwordEntry" />

    <EditText
       android:id="@+id/passwordEntry"
       android:inputType="textPassword" ... />
    

Elementos de una colección

Cuando agregas etiquetas a los elementos de una colección, cada etiqueta debe ser única. De esa manera, los servicios de accesibilidad del sistema pueden hacer referencia a exactamente un elemento en la pantalla cuando leen una etiqueta. Esta correspondencia permite que los usuarios sepan cuándo completaron el ciclo de la IU o cuándo trasladaron el enfoque a un elemento que ya descubrieron.

En particular, debes incluir texto adicional o información contextual en los elementos dentro de diseños reutilizados, como los objetos RecyclerView, a fin de que cada elemento secundario se pueda identificar de manera única.

Para ello, establece la descripción del contenido como parte de tu implementación del adaptador, como se muestra en el siguiente fragmento de código:

Kotlin

    data class MovieRating(val title: String, val starRating: Integer)

    class MyMovieRatingsAdapter(private val myData: Array<MovieRating>):
            RecyclerView.Adapter<MyMovieRatingsAdapter.MyRatingViewHolder>() {

        class MyRatingViewHolder(val ratingView: ImageView) :
                RecyclerView.ViewHolder(ratingView)

        override fun onBindViewHolder(holder: MyRatingViewHolder, position: Int) {
            val ratingData = myData[position]
            holder.ratingView.contentDescription = "Movie ${position}: " +
                    "${ratingData.title}, ${ratingData.starRating} stars"
        }
    }
    

Java

    public class MovieRating {
        private String title;
        private int starRating;
        // ...
        public String getTitle() { return title; }
        public int getStarRating() { return starRating; }
    }

    public class MyMovieRatingsAdapter
            extends RecyclerView.Adapter<MyAdapter.MyRatingViewHolder> {
        private MovieRating[] myData;

        public static class MyRatingViewHolder extends RecyclerView.ViewHolder {
            public ImageView ratingView;
            public MyRatingViewHolder(ImageView iv) {
                super(iv);
                ratingView = iv;
            }
        }

        @Override
        public void onBindViewHolder(MyRatingViewHolder holder, int position) {
            MovieRating ratingData = myData[position];
            holder.ratingView.setContentDescription("Movie " + position + ": " +
                    ratingData.getTitle() + ", " + ratingData.getStarRating() +
                    " stars")
        }
    }
    

Grupos de contenido relacionado

Si tu app muestra varios elementos de IU que forman un grupo natural, como detalles de una canción o atributos de un mensaje, organiza estos elementos dentro de un contenedor, que generalmente es una subclase de ViewGroup. Establece el atributo android:screenReaderFocusable del objeto del contenedor en true. De este modo, los servicios de accesibilidad pueden presentar las descripciones del contenido de los elementos internos, una después de la otra, en un solo anuncio. Esta consolidación de elementos relacionados ayuda a los usuarios de la tecnología de accesibilidad a descubrir la información que se muestra en la pantalla de manera más eficiente.

El siguiente fragmento incluye elementos de contenido que se relacionan entre sí. Por ello, el elemento de contenedor, una instancia de ConstraintLayout, tiene su atributo android:screenReaderFocusable establecido en true:

    <!-- In response to a single user interaction, accessibility services announce
         both the title and the artist of the song. -->
    <ConstraintLayout
        android:id="@+id/song_data_container" ...
        android:screenReaderFocusable="true">

        <TextView
            android:id="@+id/song_title" ...
            android:text="@string/my_song_title" />
        <TextView
            android:id="@+id/song_artist"
            android:text="@string/my_songwriter" />
    </ConstraintLayout>
    

Debido a que los servicios de accesibilidad anuncian las descripciones de los elementos internos en una sola frase, es importante que cada descripción sea lo más breve posible y, al mismo tiempo, transmita el significado del elemento.

Etiqueta de grupo personalizado

Si lo deseas, puedes anular la agrupación y el orden predeterminados de la plataforma de descripciones de los elementos internos de un grupo. Para ello, proporciona una descripción de contenido para el grupo.

En el siguiente fragmento, se muestra un ejemplo de una descripción de grupo personalizada:

    <!-- In response to a single user interaction, accessibility services
         announce the custom content description for the group. -->
    <ConstraintLayout
        android:id="@+id/song_data_container" ...
        android:screenReaderFocusable="true"
        android:contentDescription="@string/title_artist_best_song">

        <TextView
            android:id="@+id/song_title" ...

            <!-- Content ignored by accessibility services -->
            android:text="@string/my_song_title" />
        <TextView
            android:id="@+id/song_artist"

            <!-- Content ignored by accessibility services -->
            android:text="@string/my_songwriter" />
    </ConstraintLayout>
    

Grupos anidados

Si la interfaz de tu app presenta información multidimensional, como una lista diaria de eventos de un festival, usa el atributo android:screenReaderFocusable en los contenedores del grupo interno. Este esquema de etiquetas ofrece un buen equilibrio entre la cantidad de anuncios necesarios para descubrir el contenido de la pantalla y la longitud de cada anuncio.

En el siguiente fragmento, se muestra un método de grupos de etiquetado dentro de grupos de mayor tamaño:

    <!-- In response to a single user interaction, accessibility services
         announce the events for a single stage only. -->
    <ConstraintLayout
        android:id="@+id/festival_event_table" ... >
        <ConstraintLayout
            android:id="@+id/stage_a_event_column"
            android:screenReaderFocusable="true">

            <!-- UI elements that describe the events on Stage A. -->

        </ConstraintLayout>
        <ConstraintLayout
            android:id="@+id/stage_b_event_column"
            android:screenReaderFocusable="true">

            <!-- UI elements that describe the events on Stage B. -->

        </ConstraintLayout>
    </ConstraintLayout>
    

Encabezados dentro de texto

Algunas apps usan encabezados para resumir grupos de texto que se muestran en la pantalla. Si un elemento View específico representa un encabezado, puedes indicar su objetivo para los servicios de accesibilidad. Para ello, establece el atributo android:accessibilityHeading del elemento en true.

Los usuarios de los servicios de accesibilidad pueden elegir navegar entre encabezados en lugar de hacerlo entre párrafos o palabras. Esta flexibilidad mejora la experiencia de navegación del texto.

Títulos del panel de accesibilidad

En Android 9 (API nivel 28) y las versiones posteriores, puedes proporcionar títulos accesibles para los paneles de una pantalla. Para los fines de la accesibilidad, un panel es una parte de una ventana distinta a nivel visual, como el contenido de un fragmento. Si deseas que los servicios de accesibilidad comprendan cómo un panel se comporta de manera similar a una ventana, debes proporcionar títulos descriptivos para los paneles de tu app. Luego, los servicios de accesibilidad pueden proporcionar información más detallada a los usuarios cuando la apariencia o el contenido de un panel cambian.

Para especificar el título de un panel, usa el atributo android:accessibilityPaneTitle, como se muestra en el siguiente fragmento:

    <!-- Accessibility services receive announcements about content changes
         that are scoped to either the "shopping cart view" section (top) or
         "browse items" section (bottom) -->
    <MyShoppingCartView
         android:id="@+id/shoppingCartContainer"
         android:accessibilityPaneTitle="@string/shoppingCart" ... />

    <MyShoppingBrowseView
         android:id="@+id/browseItemsContainer"
         android:accessibilityPaneTitle="@string/browseProducts" ... />
    

Elementos decorativos

Si un elemento de tu IU solo existe para brindar espacio visual o mejorar la apariencia, establece su atributo android:contentDescription en "null".

Si tu app solo admite dispositivos con Android 4.1 (API nivel 16) o versiones posteriores, puedes establecer los atributos android:importantForAccessibility de estos elementos meramente decorativos en "no".

Utiliza señales que no hagan uso del color

A fin de ayudar a los usuarios daltónicos, utiliza señales que no requieran el uso del color para distinguir elementos de IU dentro de las pantallas de tu app. Algunas de estas técnicas consisten en usar diferentes formas o tamaños, brindar patrones visuales o de texto, o agregar respuesta táctil o de audio para identificar las diferencias entre los elementos.

En la figura 1, se muestran dos versiones de una actividad. Una versión solo usa color para distinguir entre dos acciones posibles en un flujo de trabajo. La otra versión usa la práctica recomendada de incluir formas y texto además de color para destacar las diferencias entre las dos opciones:

Figura 1: Ejemplos de cómo crear elementos de IU usando color únicamente (izquierda) y usando color, formas y texto (derecha)

Mejora la accesibilidad del contenido multimedia

Si estás desarrollando una app que incluye contenido multimedia, como un clip de video o una grabación de audio, asegúrate de comprender este material a fin de intentar ofrecer compatibilidad para los usuarios con diferentes tipos de necesidades de accesibilidad. En particular, te recomendamos que hagas lo siguiente:

  • Incluye controles que les permitan a los usuarios pausar o detener el contenido multimedia, cambiar el volumen y activar o desactivar los subtítulos.
  • Si en un video se presenta información fundamental para completar un flujo de trabajo, proporciona el mismo contenido en un formato alternativo, como una transcripción.

Recursos adicionales

Si deseas obtener más información sobre cómo mejorar la accesibilidad de tu app, consulta los siguientes recursos adicionales:

Codelabs

Entradas de blog