Espaciado de Objetivos Táctiles

Los controles accionables deben tener una dimensión mínima de 24 x 24 puntos o deben estar posicionados de manera que si se coloca un círculo con un diámetro de 24 puntos en el centro del control, el círculo no se interseca con otro objetivo o con el círculo de otro objetivo.

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 elementos pequeños.

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 24 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
6. Ocurrirá uno de los siguientes casos:

• Accesible: La vista será más grande que el requisito mínimo y no tendrá vistas superpuestas que provoquen que el objetivo disponible sea más pequeño que 24x24.
• Accesible: la vista será más pequeña que el mínimo de 24x24, pero el relleno alrededor de la vista hará que el botón tenga suficiente espacio para que los usuarios lo presionen de manera confiable.
• Accesible: Los deslizadores mantienen un espacio de 24 puntos a lo largo del deslizador.
• Inaccesible: la vista será más pequeña que el mínimo de 24x24 y tendrá un relleno insuficiente entre ella y las vistas cercanas.
• Inaccesible: hay otra vista interactiva que reduce el área táctil de la vista probada por debajo de este umbral mínimo.

Cómo solucionarlo

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

• Establecer la altura y el ancho mínimos de la vista a 24x24pt.
• Ajuste las vistas interactivas vecinas para permitir un amplio espacio entre los componentes interactivos.
• Retire las obstrucciones alrededor de los deslizadores.
• Añade un margen alrededor de las vistas interactivas.

UIKit

En storyboard:

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 24 puntos.

En código:

Actualice los parámetros width y height del control activo frame para que sea de 24 puntos.

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

SwiftUI

Utilice un modificador de marco en la vista para establecer la altura y el ancho adecuados.

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

React Native

Ajustar la altura y el ancho de los componentes interactivos:

const styles = StyleSheet.create({
    button: {
        alignItems: 'center',
        backgroundColor: 'lightblue',
        width: 24, 
        height: 24
    }
});

Algunos componentes que no permiten un espaciado sencillo se pueden envolver en un view componente con un diseño flexible, utilizando la gap propiedad para lograr el espaciado adecuado:

<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 }}
   </Slider>
</View>