Spaziatura del target touch

I controlli azionabili devono avere una dimensione minima di 24 x 24 dp oppure devono essere posizionati in modo che, se un cerchio con un diametro di 24 dp viene posizionato al centro del controllo, il cerchio non intersechi un altro bersaglio o il cerchio di un altro bersaglio.

Impatto

Su un dispositivo touch, i controlli di piccole dimensioni rappresentano un problema di usabilità per tutti. Inoltre, le persone con limitazioni motorie hanno maggiori difficoltà a interagire con elementi di piccole dimensioni.

Conferma

1. Identifica la densità di pixel del tuo dispositivo Android.
2. Utilizzare l'ispettore della gerarchia di visualizzazione per confermare la dimensione del controllo in pixel.
3. Si verificherà una delle seguenti situazioni:
   • Accessibile: la visualizzazione sarà più ampia rispetto al requisito minimo e non ci saranno visualizzazioni sovrapposte che renderanno il target disponibile più piccolo di 24x24.
   • Accessibile: la visualizzazione sarà più piccola del minimo 24x24, ma la spaziatura attorno alla visualizzazione farà sì che il pulsante abbia spazio sufficiente per essere toccato in modo affidabile dagli utenti.
   • Accessibile: i cursori mantengono uno spazio di 24 dp lungo la lunghezza del controllo.
   • Inaccessibile: è presente un'altra vista cliccabile che riduce l'area toccabile della vista testata al di sotto della soglia minima.

Come risolvere

Un problema riscontrato da questa regola si verifica quando la cornice di un controllo attivo non ha un'altezza e una larghezza pari o superiori a 24 pt.

• Impostazione dell'altezza e della larghezza minime della vista a 24x24pt.
• Regolare le viste cliccabili adiacenti per lasciare ampio spazio tra i componenti cliccabili.
• Rimuovere gli ostacoli attorno ai cursori.
• Aggiungere un margine attorno alle visualizzazioni cliccabili.
• Imposta l'altezza e la larghezza minime della vista a 24 dp.

XML

Regola l'altezza e la larghezza minime nel codice:

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

Regola l'altezza e la larghezza minime nella definizione del layout:

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

Compose

Regola l'altezza e la larghezza minime nel codice:

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

Regola altezza e larghezza dei componenti interattivi:

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

Alcuni componenti che non consentono la spaziatura così facilmente possono essere racchiusi in un componente view con un layout flessibile e impostando la proprietà gap per ottenere la spaziatura corretta:

<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>