Espaciamiento de Objetivos Táctiles

Qué Verificamos

Los elementos interactivos deben tener una dimensión mínima de 24 × 24 puntos, o contar con suficiente espacio alrededor para que, si se coloca un círculo con un diámetro de 24 puntos en el centro del elemento, el círculo no interseque con otro objetivo ni con el círculo para otro objetivo.

El área activa de un elemento interactivo puede expandirse potencialmente más allá de sus límites visuales — por ejemplo, anexando un reconocedor de gestos con una región de activación más grande. Después de una cuidadosa consideración, Deque mantiene que la mejor práctica es alinear los límites visuales e interactivos del objetivo. Esto proporciona al usuario final un área clara para interactuar, ofreciendo la mejor probabilidad 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 24pt.

Ejemplo Fallido ❌

Touch target spacing es insuficiente

Estos controles están demasiado cerca entre sí: un círculo de 24pt de diámetro centrado en uno se superpone con el otro

Los usuarios con limitaciones motoras pueden activar accidentalmente el elemento incorrecto

Ejemplo Exitoso ✅

Touch target spacing es suficiente

Cada control es de al menos 24pt × 24pt, o tiene suficiente espacio a su alrededor para que un círculo de 24pt de diámetro centrado en él no intersecte con ningún objetivo adyacente

En Resumen

• Esta regla tiene un impacto serio para los usuarios
• Los elementos interactivos deben ser al menos de 24pt × 24pt, O estar posicionados de modo que un círculo de 24pt de diámetro centrado en el elemento no se superponga con ningún objetivo adyacente
• Tanto los límites visuales como los interactivos (área de impacto) deben cumplir con el mínimo
• Los controles deslizantes deben mantener al menos 24pt de espacio a lo largo de su longitud
• Los controles pequeños y apretados son especialmente difíciles para usuarios con limitaciones motoras

Impacto en 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 más dificultad para interactuar con objetivos pequeños que están demasiado cerca para activar independientemente.

Confirmar Problema de Espaciamiento de Objetivos Táctiles

Ejecute la aplicación dentro de Xcode y navegue a la pantalla que contiene el elemento interactivo a probar.

1. Dentro de Xcode, seleccione Vista de Depuración de Jerarquía
2. Seleccione el elemento a probar
3. Abra el Panel de Inspectores si no es visible
4. Seleccione el Inspector de Tamaño
5. Observe el ancho, la altura y la posición del elemento seleccionado, en relación con los elementos interactivos vecinos

Aplica uno de los siguientes resultados:

• Aprueba: El elemento es de al menos 24pt × 24pt, 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 24pt × 24pt, pero el espacio a su alrededor es lo suficientemente grande como para que un círculo de 24pt de diámetro centrado en el elemento no intersecte con ningún objetivo adyacente
• Aprueba: Los controles deslizantes mantienen al menos 24pt de espacio a lo largo de la longitud del elemento
• No Aprueba: El elemento es más pequeño que 24pt × 24pt, con espacio insuficiente entre él y los elementos interactivos adyacentes
• No Aprueba: Un elemento interactivo vecino reduce el área táctil del elemento probado por debajo del umbral mínimo

Corregir Problemas

Para resolver problemas de Espaciamiento de Objetivos Táctiles, asegúrese de que cada elemento interactivo sea al menos de 24pt × 24pt o tenga suficiente margen para que un círculo de 24pt de diámetro centrado en él no intersecte con ningún objetivo interactivo adyacente.

UIKit

Establezca la altura y el ancho mínimos en 24pt y agregue un margen entre los elementos interactivos vecinos.

En el storyboard:

1. Navegue al elemento interactivo
2. Abra el Panel de Inspectores si no es visible
3. Seleccione el Inspector de Tamaño
4. En View, actualice los parámetros width y height a al menos 24pt

En código:

Actualice el width y height del frame del elemento para que sea al menos 24pt.

let button = UIButton(frame: CGRect(x: 10, y: 20, width: 24, height: 24))

SwiftUI

Use un modificador .frame en el elemento interactivo para establecer la altura y el ancho mínimos.

Button("Next")
    .frame(minWidth: 24, minHeight: 24, alignment: .leading)

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 ser gestionado 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 de Objetivos Táctiles tiene un impacto serio para los usuarios. Recomendamos solucionar este problema excepto en casos raros donde las limitaciones de diseño lo hagan realmente inviable. Aprenda más sobre ignorando reglas.

Recursos

Páginas del Curso de Deque University

• WCAG 2.2 - 2.5.8 Objetivo Táctil (AAA)

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 de W3C
  • Criterio de Éxito 2.5.8 - Tamaño del Objetivo (Mínimo)
• Documentos de Comprensión de WCAG 2.2
  • Comprender 2.5.8 AA - Tamaño del Objetivo (Mínimo)