Espaciado de Objetivos Táctiles
Asegúrese de que los elementos interactivos estén lo suficientemente separados como para ser presionados con precisión
¡Aprenda cómo estamos usando la inteligencia artificial para esta regla!
Qué buscamos
Los elementos interactivos deben tener una dimensión mínima de 24dp por 24dp o tener suficiente espacio a su alrededor de modo que si se coloca un círculo con un diámetro de 24dp en el centro del elemento, el círculo no intersecte con otro objetivo ni con el círculo para otro objetivo.
El área táctil de un elemento interactivo puede ampliarse más allá de sus límites visuales, por ejemplo, utilizando un TouchDelegate para aumentar la región táctil activa. Después de una cuidadosa consideración, Deque sostiene que es una buena práctica alinear los límites visuales e interactivos del objetivo. Esto proporciona al usuario final un área clara para interactuar, aumentando así 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 24dp.
¿Cuál es la diferencia entre Espaciado de Objetivos Táctiles y Tamaño de Objetivos Táctiles?
El Espaciado de Objetivos Táctiles apunta al cumplimiento AA de WCAG 2.2 con un mínimo de 24dp, mientras que Tamaño de Objetivos Táctiles se alinea más estrechamente con la recomendación de Google de 48dp por 48dp. Recomendamos encarecidamente apoyar ambos reglas: el cumplimiento con las directrices de Google ayuda a asegurar que no haya problemas al enviar al Play Store.
Ejemplo de Fallo ❌
Touch target spacing es insuficiente
Estos controles están demasiado juntos: un círculo de 24dp de diámetro centrado en uno se superpone al otro
Los usuarios con limitaciones motoras pueden activar accidentalmente el elemento incorrecto
Ejemplo de Aprobación ✅
Touch target spacing es suficiente
Cada control es al menos de 24dp × 24dp, o tiene suficiente espacio alrededor para que un círculo de 24dp de diámetro centrado en él no interseque con ningún objetivo adyacente
A Simple Vista
- Esta regla tiene un serio impacto para los usuarios
- Los elementos interactivos deben ser de al menos 24dp × 24dp, O estar posicionados de modo que un círculo de 24dp de diámetro centrado en el elemento no se superponga a ningún objetivo adyacente
- Tanto los límites visuales como los interactivos (área táctil) deben cumplir con el mínimo
- Los deslizadores deben mantener al menos 24dp de espacio a lo largo de su longitud
Impacto en los Usuarios
En un dispositivo táctil, los controles pequeños son un problema de usabilidad para todos. Además, las personas que experimentan limitaciones motoras tienen una mayor dificultad para interactuar con objetivos pequeños que están demasiado juntos para activarse de manera independiente.
Confirmar Problema de Espaciado de Objetivos Táctiles
Ejecute la aplicación y navegue hasta la pantalla que contiene el elemento a probar.
- En Android Studio, abra el Inspector de Diseño (Herramientas > Inspector de Diseño)
- Seleccione el elemento a probar en el árbol de componentes o en el lienzo
- En el panel Atributos, observe el ancho, alto y posición del elemento seleccionado en relación con los elementos interactivos vecinos
- Si es necesario, identifique la densidad de píxeles del dispositivo para confirmar los valores en dp
Se aplica uno de los siguientes resultados:
- Aprueba: El elemento es al menos de 24dp × 24dp, y no hay elementos superpuestos que reduzcan el área táctil disponible por debajo del mínimo
- Aprueba: El elemento es más pequeño que 24dp × 24dp, pero la almohadilla a su alrededor es lo suficientemente grande como para que un círculo de 24dp de diámetro centrado en el elemento no interseque con ningún objetivo adyacente
- Aprueba: Los deslizadores mantienen al menos 24dp de espacio a lo largo de la longitud del elemento
- Falla: El elemento es más pequeño que 24dp × 24dp, con un espacio insuficiente entre él y los elementos interactivos adyacentes
- Falla: Un elemento interactivo vecino reduce el área táctil del elemento probado por debajo del umbral mínimo
Solucionar Problemas
Para resolver problemas de Espaciado de Objetivos Táctiles, asegúrese de que cada elemento interactivo sea al menos de 24dp × 24dp o tenga suficiente margen para que un círculo de 24dp de diámetro centrado en él no interseque con ningún objetivo interactivo adyacente.
XML
Establezca minimumHeight y minimumWidth en 24dp, y agregue margen entre los elementos interactivos vecinos.
En código:
Button button = findViewById(R.id.an_accessible_button_yay);
button.setMinimumHeight(24);
button.setMinimumWidth(24);En la definición de diseño:
<Button
android:id="@+id/an_accessible_button_yay"
android:minimumHeight="24dp"
android:minimumWidth="24dp"
android:text="@string/batman_likes_accessible_buttons" />Componer
Utilice Modifier.defaultMinSize para establecer una altura y un ancho mínimos, y padding para añadir espacio entre elementos interactivos adyacentes.
Button(
modifier = Modifier
.defaultMinSize(minWidth = 24.dp, minHeight = 24.dp)
.padding(start = 24.dp, top = 24.dp),
onClick = { }
) {
Text(stringResource(id = R.string.button))
}React Native
Ajuste la altura y el ancho de los elementos interactivos y utilice propiedades de diseño para añadir espacio entre ellos.
const styles = StyleSheet.create({
button: {
alignItems: 'center',
backgroundColor: 'lightblue',
width: 24,
height: 24
}
});Ciertos elementos no permiten fácilmente ajustes de tamaño. Estos pueden envolverse en un View con un diseño flexible, utilizando la propiedad gap para lograr un espacio adecuado entre los elementos:
<View style={{ flex: 1, flexDirection: 'column', gap: 24 }}>
<Slider
step={1.0}
maximumValue={100}
style={{ width: 200, height: 60 }}
value={sliderValue}
accessible={true}
onValueChange={setSliderValue}
onSlidingStart={sliderValue => {
setSliderValue(sliderValue);
}}
onSlidingComplete={sliderValue => {
setSliderValue(sliderValue);
}}
accessibilityValue={{ now: "value: " + a11yValue }}
/>
</View>Flutter
Los widgets Material de Flutter imponen un área táctil de 48pt por 48pt por defecto, lo que generalmente proporciona un espacio adecuado. Las infracciones son más probables con objetivos de toque personalizados construidos usando GestureDetector, donde el espacio debe gestionarse manualmente.
// Passing — spacing added between targets
Row(
spacing: 8.0,
children: [
GestureDetector(
onTap: () {},
child: Container(
width: 20,
height: 20,
color: Colors.blue,
child: const Icon(Icons.thumb_up, size: 14, color: Colors.white),
),
),
GestureDetector(
onTap: () {},
child: Container(
width: 20,
height: 20,
color: Colors.blue,
child: const Icon(Icons.thumb_down, size: 14, color: Colors.white),
),
),
],
) ¿Puedo ignorar esta regla?
El Espaciado del Objetivo Táctil tiene un impacto serio para los usuarios. Recomendamos remediar este problema, excepto en casos raros donde las restricciones de diseño hagan que sea realmente inviable. Aprenda 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.2, Recomendación del W3C
- Documentos de Comprensión de WCAG 2.2