Mejorar accesibilidad en Jetpack Compose con semántica
Añade etiquetas, orden lógico y pruebas con lectores de pantalla a tus interfaces.
Hacer que componentes personalizados se comprendan y puedan operarse con tecnologías de asistencia.
Por qué es importante
Compose proporciona semántica automática para muchos componentes Material, pero las interfaces personalizadas necesitan atención. Una pantalla visualmente correcta puede ser incomprensible si sus botones son solo iconos, si el foco salta sin lógica o si el contraste no es suficiente.
Requisitos
- App Jetpack Compose con una pantalla real para revisar.
- TalkBack o herramientas de pruebas de accesibilidad en un dispositivo.
Trabaja en un proyecto de pruebas. Revisa las versiones y condiciones específicas de la documentación oficial, ya que las APIs y las políticas evolucionan.
Implementación
Selecciona una pantalla y recórrela con TalkBack sin…
Selecciona una pantalla y recórrela con TalkBack sin mirar el contenido visual. Anota qué acciones no se entienden.
Agrega contentDescription a iconos que realizan acciones; para…
Agrega contentDescription a iconos que realizan acciones; para iconos puramente decorativos utiliza null cuando corresponda.
Utiliza componentes semánticos de Material y agrupa elementos…
Utiliza componentes semánticos de Material y agrupa elementos relacionados para evitar lecturas excesivamente fragmentadas.
Comprueba estados seleccionados, errores de formularios y cambios…
Comprueba estados seleccionados, errores de formularios y cambios de contenido mediante semántica y anuncios accesibles apropiados.
Revisa tamaños táctiles, contraste y escalado de fuente…
Revisa tamaños táctiles, contraste y escalado de fuente grande. Prueba orientaciones y accesibilidad en un dispositivo real.
Crea pruebas Compose que busquen nodos por etiquetas…
Crea pruebas Compose que busquen nodos por etiquetas accesibles, y ejecuta verificaciones automatizadas como complemento de pruebas manuales.
Fragmento de referencia
@Composable
fun BotonCerrar(onClick: () -> Unit) {
IconButton(onClick = onClick) {
Icon(
imageVector = Icons.Default.Close,
contentDescription = "Cerrar pantalla"
)
}
}
// Requiere los imports de Material Icons y Compose.Ejemplo educativo: cuando se indique, añade las importaciones, dependencias, claves de prueba o clases de tu proyecto. No se presenta como proyecto Android completo y compilado.
Ponlo a prueba
Prueba la pantalla con fuente al 200 % y TalkBack activado. Anota si todas las acciones se reconocen y operan sin gestos complejos.
Lista de comprobación
- La implementación cumple el objetivo: hacer que componentes personalizados se comprendan y puedan operarse con tecnologías de asistencia.
- El comportamiento se verificó con datos de prueba y se documentaron los casos de fallo.
- Los recursos, dependencias y políticas se comprobaron contra las referencias oficiales.
- No se registran datos sensibles ni se da por probada una mejora sin evidencia.
Errores habituales
- No describir iconos decorativos como si fueran botones.
- No confiar solo en validaciones automáticas para accesibilidad.
- No usar texto pequeño fijo que se recorte al ampliar la fuente.
¿Si utilizo Material 3 ya es accesible todo?
No. Los componentes aportan buena base, pero depende de contenido, etiquetas, orden, contraste e interacciones.
Referencias para ampliar
Consulta las versiones, limitaciones y requisitos vigentes antes de integrar los ejemplos en producción.