Cómo hacer que las apps sean más accesibles

Intenta hacer que tu app para Android sea útil para todo el mundo, incluidas las personas con necesidades de accesibilidad.

Personas con problemas de audición, visión y motricidad, daltonismo, discapacidades cognitivas y muchas otras discapacidades usan dispositivos Android. Cuando desarrollas apps teniendo en cuenta la accesibilidad, mejoras la experiencia del usuario para las personas con necesidades de accesibilidad.

En esta página, se presentan pautas para implementar elementos clave de accesibilidad, de manera que todas las personas puedan usar tu app con mayor facilidad. Para obtener una guía más detallada sobre cómo hacer que tu app sea más accesible, consulta Principios para mejorar la accesibilidad de las apps.

Aumenta la visibilidad del texto

Para cada conjunto de texto en la app, recomendamos que el contraste de color (o la diferencia en el brillo percibido entre el color del texto y el color del fondo detrás del texto) supere un umbral específico. El umbral exacto dependerá del tamaño de la fuente del texto y de que este se muestre en negrita o no:

• Si el texto tiene un tamaño inferior a 18 sp, o si está en negrita y tiene un tamaño inferior a 14 sp, usa colores de primer plano y de fondo que generen una proporción de contraste de color de, al menos, 4.5:1.
• Para el resto del texto, establece la proporción de contraste de color en, al menos, 3:1.

En la siguiente imagen, se muestran dos ejemplos de contraste de color entre el texto y el fondo.

Para comprobar el contraste de color entre el texto y el fondo de la app, usa un verificador del contraste de color en línea o la app de Prueba de accesibilidad.

Usa controles grandes y simples

La IU de la app será más fácil de usar si los controles son más fáciles de ver y presionar. Para las interfaces táctiles, recomendamos que cada elemento de la IU interactivo tenga un área enfocable o un tamaño del objetivo táctil de 48 dp x 48 dp como mínimo. Mientras más grande sea, mejor.

En Jetpack Compose, muchos componentes de Material integrados, como Button, IconButton, y ListItem ya aplican este tamaño mínimo. Sin embargo, cuando creas elementos interactivos personalizados, debes establecer el tamaño por tu cuenta.

En el siguiente fragmento, se hace accesible un elemento pequeño de la IU dándole un objetivo táctil más grande:

@Composable
private fun LargeBox() {
    var clicked by remember { mutableStateOf(false) }
    Box(
        Modifier
            .size(100.dp)
            .background(if (clicked) Color.DarkGray else Color.LightGray)
    ) {
        Box(
            Modifier
                .align(Alignment.Center)
                .clickable { clicked = !clicked }
                .background(Color.Black)
                .sizeIn(minWidth = 48.dp, minHeight = 48.dp)
        )
    }
}
AccessibilitySnippets.kt

Para obtener más información sobre los tamaños de los objetivos táctiles, consulta Tamaños mínimos de los objetivos táctiles.

Describe cada elemento de la IU

Para cada elemento de la IU de la app, incluye una descripción que explique el propósito del elemento. En la mayoría de los casos, esta descripción se incluye en el atributo contentDescription del elemento, como se muestra en el siguiente fragmento de código:

@Composable
private fun ShareButton(onClick: () -> Unit) {
    IconButton(onClick = onClick) {
        Icon(
            imageVector = Icons.Filled.Share,
            contentDescription = stringResource(R.string.label_share)
        )
    }
}
AccessibilitySnippets.kt

Ten en cuenta que no es necesario proporcionar un contentDescription para los elementos componibles Text. Los servicios de accesibilidad de Android (como TalkBack) anuncian automáticamente el texto.

Cuando agregues descripciones a los elementos de la IU de tu app, ten en cuenta las siguientes prácticas recomendadas:

• Usa descripciones para transmitir el propósito y el resultado de la interacción, no los detalles visuales. Usa la propiedad semántica Role (como Role.Button o Role.Switch) para exponer el tipo de un elemento de la IU. De esta manera, los lectores de pantalla pueden anunciar el elemento correctamente.

• Evita las redundancias en las descripciones. Por ejemplo, si cuando se selecciona un botón se activa una acción de "enviar" en la app, asegúrate de que la descripción del botón sea "Submit", no "Submit button".

• Cada descripción debe ser única. De esa manera, cuando los usuarios del lector de pantalla se encuentran con una descripción del elemento repetida, reconocen que el enfoque está en un elemento que ya lo tuvo anteriormente. En particular, cada elemento dentro de una lista, como LazyColumn, debe tener una descripción diferente, cada una reflejando el contenido que es único para un elemento determinado, como el nombre de una ciudad en una lista de ubicaciones.

• Usa la API de hideFromAccessibility para marcar elementos puramente decorativos de modo que los servicios de accesibilidad puedan ignorarlos. Si un elemento de la IU tiene un parámetro contentDescription, pero es puramente decorativo (como un Icon que forma parte de otro elemento de la IU), pasa null para evitar el etiquetado redundante. Para ver casos de uso más elaborados, consulta Combinación y borrado.

• Prueba tu código para asegurarte de que la descripción del contenido se entregue según lo previsto. Android Lint, las pruebas de Compose y las herramientas de prueba manuales y automatizadas pueden marcar problemas comunes y exponer problemas en tu implementación.

Recursos adicionales

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

Codelabs

• Accesibilidad en Jetpack Compose

Videos

• Cómo compilar IUs más accesibles con Jetpack Compose

Contenido de Views

• Cómo hacer que las apps sean más accesibles (Views)