Tamaño del Área Táctil

Qué Verificamos

Todos los elementos interactivos deben tener un tamaño mínimo de 44pt por 44pt, tanto para las áreas visuales como para las áreas táctiles.

El área de interacción de un elemento interactivo puede potencialmente expandirse más allá de sus límites visuales, por ejemplo, adjuntando un reconocedor de gestos con una región de activación más grande. Tras una consideración cuidadosa, Deque sostiene que la mejor práctica es que los límites visuales e interactivos del objetivo estén alineados. Esto proporciona al usuario un área clara para interactuar, aumentando 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 44pt.

Ejemplo Fallido ❌

Touch target size = 20pt × 20pt

Este elemento es más pequeño que el mínimo de 44pt × 44pt

El área táctil es demasiado pequeña para activarse de manera confiable, especialmente para usuarios con limitaciones motoras

Ejemplo Aceptable ✅

Touch target size = 44pt × 44pt

Este elemento cumple con el mínimo de 44pt × 44pt

Tanto los límites visuales como los táctiles son lo suficientemente grandes para activarse con precisión.

Resumen

• Esta regla tiene un impacto moderado para los usuarios
• Todos los elementos interactivos deben tener un marco visual y táctil de al menos 44pt × 44pt
• Tanto los límites visuales como los interactivos (área de interacción) 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 más dificultad para interactuar y apuntar a blancos pequeños.

Confirmar el Problema de Tamaño del Área Táctil

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

1. Dentro de Xcode, seleccione Jerarquía de Vista de Depuración
2. Seleccione el elemento a probar
3. Abra el Panel de Inspectores si no está visible
4. Seleccione el Inspector de Tamaño
5. Observe el ancho y la altura del elemento seleccionado

Si el ancho o la altura es menor de 44pt, el elemento no cumple con esta regla.

Corregir Problemas

Para resolver problemas de Tamaño del Área Táctil, asegúrese de que el marco visual de cada elemento interactivo sea de al menos 44pt × 44pt. Tanto los límites visuales como el área táctil de interacción deben coincidir, expandir solo el área táctil a través de un reconocedor de gestos no es suficiente.

Un problema encontrado por esta regla ocurre cuando el frame de un control activo no tiene una altura y un ancho de 44pt o más.

UIKit

Establezca el marco del elemento interactivo en al menos 44pt × 44pt utilizando uno de los siguientes enfoques.

En storyboard:

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

En el código:

Actualice el width y el height del frame del elemento interactivo a al menos 44pt.

Esto puede establecerse a través del inicializador y un marco específico:

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))

o, puede establecerse a través de restricciones de vista. Si hay una restricción actual en el botón, vaya adelante y actualice el ancho y la altura para ser un mínimo de 44 puntos. De lo contrario, puede agregar restricciones:

// Update Height:
myButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

// Update Width:
myButton.widthAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

SwiftUI

Aplique un modificador .frame para expandir los controles a al menos 44pt × 44pt.

TextFields

Tenga en cuenta que actualmente en SwiftUI no hay una forma consistente de aumentar el tamaño del área táctil de un TextField, por lo que un TextField de SwiftUI devolverá .INCOMPLETE para esta regla. Se ha presentado un informe de radar a Apple.

Botones

Utiliza un modificador de marco en los contenidos del parámetro label en lugar de en todo el botón.

1. Usa el inicializador basado en etiquetas de Button, que tiene 'action' como el primer parámetro y 'label' como el segundo parámetro, como se muestra a continuación.

Button(action: {
  print("Button tapped")
  }, label: {
  Text("Tap here")
  }
)

1. Añade un modificador de marco a los contenidos del parámetro label del botón, especificando una altura y un ancho de al menos 44.

Button(action: {
  print("Button tapped")
  }, label: {
  Text("Tap here")
    .frame(width: 80, height: 45)
  }
)

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 44pt por 44pt. Si no es posible, explora componentes alternativos que sí te permitan ajustar el tamaño.

Consejo: ¡Cuando uses controles personalizados, asegúrate de que el rol de accesibilidad esté configurado correctamente!

Flutter

Los widgets Material de Flutter (ElevatedButton, IconButton, etc.) imponen automáticamente un área táctil mínima de 48pt por 48pt, 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 del 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 44pt — como un icono 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 del curso de Deque University

• 2.5.5 Tamaño del objetivo (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.1, Recomendación del W3C
  • Criterio de éxito 2.5.5 - Tamaño del objetivo
• Documentos de comprensión de WCAG 2.1
  • Comprendiendo 2.5.5 AAA - Tamaño del objetivo