Espaciado de Objetivos Táctiles

Los controles accionables deben tener una dimensión mínima de 24 x 24 dp o deben estar posicionados de manera que si se coloca un círculo con un diámetro de 24 dp en el centro del control, el círculo no se intersecte 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.

Confirmación

1. Identifica la densidad de píxeles de tu dispositivo Android.
2. Utilice el inspector de jerarquía de vistas para confirmar el tamaño del control en píxeles.
3. 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 controles deslizantes mantienen un espacio de 24dp a lo largo del control.
   • Inaccesible: hay otra vista en la que se puede hacer clic que reduce el área táctil de la vista probada por debajo del 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 clicables vecinas para permitir un espacio amplio entre los componentes clicables.
• Retire las obstrucciones alrededor de los deslizadores.
• Añade un margen alrededor de las vistas clicables.
• Establezca la altura y el ancho mínimos de vista en 24 dp.

XML

Ajustar la altura y el ancho mínimos en el código:

Button button = findViewById(R.id.an_accessible_button_yay)
button.setMinimumHeight(24);
button.setMinimumWidth(24);

Ajustar la altura y el ancho mínimos en la definición del diseño:

<Button
     android:id="@+id/an_accessible_button_yay"
     android:minimumHeight="24dp"
     android:minimumWidth="24dp"
     android:text="@string/batman_likes_accessible_buttons" />

Compose

Ajustar la altura y el ancho mínimos en el código:

Button(modifier = modifier
  .constrainAs(textButtonBottom) {
      top.linkTo(slider.bottom)
      start.linkTo(parent.start)
      bottom.linkTo(parent.bottom)
  }
  .padding(start = 24.dp, top = 24.dp), onClick = { }) {
  Text(stringResource(id = R.string.button))
}

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 el espaciado tan fácilmente se pueden envolver en un view componente con un diseño flexible, y configurar 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>