Tamaño del área de toque

Todos los controles activos deben tener un área visual y táctil mínima de 44 puntos por 44 puntos.

Impacto

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 mayor dificultad para interactuar con objetivos pequeños y apuntar a ellos.

Expectativas

Los elementos interactivos tienen el potencial de ampliar el área de toque de un objetivo sin aumentar los límites visuales del objetivo, como mediante el uso de un reconocedor de gestos. Después de una cuidadosa consideración, Deque insiste en que la mejor práctica es que los límites visuales e interactivos del objetivo estén alineados. Esto le brinda al usuario final un área clara en la cual interactuar para tener la mejor posibilidad de éxito. Por lo tanto, esta regla también prueba que los límites visuales de los elementos interactivos cumplan con el mínimo de 44 puntos.

Confirmación

Ejecute la aplicación dentro de Xcode y navegue hasta la pantalla que contiene el control activo para probar.

1. Dentro de Xcode, seleccione Jerarquía de vista de depuración
2. Seleccione el control a probar
3. Abra el panel del inspector si no está visible
4. Seleccione el inspector de tamaño
5. Observe el ancho y alto del control seleccionado

Cómo solucionarlo

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

UIKit

En el guión gráfico:

1. Ir a el control activo
2. Abra el panel del inspector si no está visible
3. Seleccione el inspector de tamaño
4. En View, actualice los parámetros width y height para que tengan un mínimo de 44 puntos.

En código:

Actualice el width y el height de los controles activos frame para que tengan un mínimo de 44 puntos.

Esto se puede configurar a través del inicializador y un frame 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, continúe y actualice el ancho y la altura para que tengan un mínimo de 44 puntos. De lo contrario, puedes agregar restricciones:

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

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

SwiftUI

TextFields

Tenga en cuenta que actualmente en SwiftUI no existe 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 radar report a Apple.

Botones

Utilice un modificador de marco en el contenido del parámetro Label en lugar de en todo el botón.

1. Utilice el inicializador basado en etiqueta de Button: tiene "acción" como primer parámetro y "Label" como segundo parámetro, como se muestra a continuación.

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

2. Agregue un modificador de cuadro al contenido del parámetro Etiqueta 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

Algunos componentes de React Native no se pueden personalizar para permitir ajustes de tamaño, como el componente Button . Siempre que sea posible, asegúrese de que todos los controles tengan al menos 44 puntos por 44 puntos. Cuando no sea posible, explore componentes alternativos que le permitan ajustar el tamaño. Consejo: al utilizar controles personalizados, asegúrese de que la función de accesibilidad esté configurada correctamente.