Tamaño de los Objetivos Táctiles
Asegúrate de que los controles interactivos sean lo suficientemente grandes para tocar con precisión
¡Aprende cómo estamos utilizando la inteligencia artificial para esta regla!
Qué Verificamos
Todos los elementos interactivos deben tener un tamaño mínimo de 44dp por 44dp, tanto para las áreas visuales como para las tocables.
El área táctil de un elemento interactivo se puede expandir potencialmente más allá de sus límites visuales — por ejemplo, utilizando un TouchDelegate para aumentar la región táctil activa. Tras una cuidadosa consideración, Deque sostiene que lo mejor es que los límites visuales e interactivos del objetivo se alineen. Esto proporciona al usuario final un área clara para interactuar y aumentar las posibilidades de éxito. Por lo tanto, esta regla también verifica que los límites visuales de los elementos interactivos cumplan con el mínimo de 44dp.
Ejemplo que Falla ❌
Touch target size = 20dp × 20dp
Este elemento es más pequeño que el mínimo de 44dp × 44dp
El área táctil es demasiado pequeña para activarse de manera confiable, especialmente para usuarios con limitaciones motoras.
Ejemplo que Pasa ✅
Touch target size = 44dp × 44dp
Este elemento cumple con el mínimo de 44dp × 44dp
Tanto los límites visuales como los tocables son lo suficientemente grandes para activarse con precisión.
De un Vistazo
- Esta regla tiene un impacto moderado para los usuarios
- Todos los elementos interactivos deben tener un tamaño visual y táctil de al menos 44dp × 44dp
- Tanto los límites visuales como los interactivos (área de impacto) deben cumplir con el mínimo
- Los controles pequeños son un problema de usabilidad para todos, y especialmente problemáticos para usuarios con limitaciones motoras
Impacto para los Usuarios
En un dispositivo táctil, los controles pequeños son un problema de usabilidad para todos. Además, las personas con limitaciones motoras tienen una mayor dificultad para interactuar y apuntar a objetivos pequeños.
Confirmar Problema de Tamaño de Objetivo Táctil
Ejecuta la aplicación y navega a la pantalla que contiene el elemento a probar.
- En Android Studio, abre el Inspector de Diseño (Herramientas > Inspector de Diseño)
- Selecciona el elemento a probar en el árbol de componentes o en el lienzo
- En el panel de Atributos, observa los valores de
widthyheighten dp - Si es necesario, identifica la densidad de píxeles del dispositivo para confirmar los valores en dp
Si alguna de las dimensiones es menor de 44dp, el elemento falla esta regla.
Corregir Problemas
Para resolver problemas de Tamaño de Objetivo Táctil, asegúrate de que el tamaño visual de cada elemento interactivo sea al menos de 44dp × 44dp. Tanto los límites visuales como el área de impacto táctil deben coincidir — expandir solo el área táctil a través de TouchDelegate no es suficiente.
Un problema detectado por esta regla ocurre cuando los valores de height y/o width de un elemento interactivo no son de 44dp o más.
XML
Establece minimumHeight y minimumWidth en el elemento, o establece explícitamente valores de layout_width y layout_height de al menos 44dp.
Button button = findViewById(R.id.my_button);
button.setMinimumHeight(44);
button.setMinimumWidth(44);<Button
android:id="@+id/an_accessible_button_yay"
android:minimumHeight="44dp"
android:minimumWidth="44dp"
android:text="@string/batman_likes_accessible_buttons" />Compose
Utiliza un Modifier.size o Modifier.defaultMinSize para establecer un tamaño mínimo de al menos 44dp × 44dp.
Button(
onClick = { },
modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
Text(text = "Scan for Issues")
}React Native
Usa propiedades de tamaño específicas de la plataforma para asegurar que los controles cumplan con el tamaño mínimo de objetivo táctil.
Algunos componentes de React Native no son personalizables para permitir ajustes de tamaño, como el componente Button.
Si es posible, asegúrate de que todos los elementos interactivos tengan al menos 44dp por 44dp. Si no es posible, explora componentes alternativos que sí permitan ajustar el tamaño.
Consejo: ¡Al usar controles personalizados, asegúrate de que el rol de accesibilidad esté configurado correctamente!
Flutter
Los widgets de Material de Flutter (ElevatedButton, IconButton, etc.) aplican automáticamente un área táctil mínima de 48dp por 48dp, por lo que cumplen con este requisito por defecto. Las violaciones suelen provenir de objetivos táctiles personalizados construidos con GestureDetector, que no expanden el área táctil más allá del tamaño visual.
// Failing — tap target is only 24×24
GestureDetector(
onTap: () {},
child: Container(
width: 24,
height: 24,
color: Colors.blue,
child: const Icon(Icons.close, size: 16, color: Colors.white),
),
)
// Passing — tap target meets 44×44 minimum
GestureDetector(
onTap: () {},
child: Container(
width: 44,
height: 44,
color: Colors.blue,
child: const Icon(Icons.close, size: 24, color: Colors.white),
),
)¿Puedo Ignorar Esta Regla?
El Tamaño de Objetivo Táctil tiene un impacto moderado para los usuarios. En casos donde una restricción de diseño impida cumplir con el mínimo de 44dp — como un ícono de barra de herramientas en una interfaz muy densa — documenta la decisión y explora alternativas antes de ignorar la regla. Aprende más sobre ignorando reglas.
Recursos
Páginas de Cursos de Deque University
Nota: El acceso completo a los recursos de Deque University requiere una suscripción.
Otros recursos
- Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1, Recomendación del W3C
- Documentación de WCAG 2.1 para Comprensión