Spaziatura del target touch

I controlli azionabili devono avere una dimensione minima di 24 x 24 punti oppure devono essere posizionati in modo che, se al centro del controllo viene posizionato un cerchio con un diametro di 24 punti, 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.

Requisiti

Gli elementi interattivi hanno il potenziale di espandere l'area di tocco di un obiettivo senza aumentarne i limiti visivi, ad esempio mediante l'uso di un riconoscimento dei gesti. Dopo un'attenta riflessione, Deque sostiene che la prassi migliore è allineare i limiti visivi e interattivi del target. In questo modo, l'utente finale ha a disposizione un'area chiara in cui interagire per ottenere le massime possibilità di successo. Pertanto, questa regola verifica anche che i limiti visivi degli elementi interattivi rispettino il minimo di 24 pt.

Conferma

Avvia l'applicazione in Xcode e andare alla schermata contenente il controllo attivo da testare.

1. In Xcode, seleziona Gerarchia di visualizzazione del debug
2. Seleziona il controllo da testare
3. Apri il pannello ispettore se non è visibile
4. Seleziona l'ispettore delle dimensioni
5. Osserva la larghezza e l'altezza del controllo selezionato
6. 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 pt lungo la lunghezza del controllo.
• Inaccessibile: la visualizzazione sarà più piccola del minimo di 24x24 e non avrà sufficiente spazio tra sé e le visualizzazioni vicine.
• Inaccessibile: esiste un'altra vista interagibile che riduce l'area toccabile della vista testata al di sotto di questa 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 interattive adiacenti per lasciare ampio spazio tra i componenti interattivi.
• Rimuovere gli ostacoli attorno ai cursori.
• Aggiungere un margine attorno alle visualizzazioni interattive.

UIKit

Nello storyboard:

1. Navigare al controllo attivo
2. Apri il pannello ispettore se non è visibile
3. Seleziona l'ispettore delle dimensioni
4. In View, aggiorna i parametri width e height in modo che siano almeno 24 pt.

Nel codice:

Aggiornare i parametri width e height del controllo attivo frame in modo che siano di almeno 24 pt.

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

SwiftUI

Utilizzare un modificatore di frame nella vista per impostare l'altezza e la larghezza corrette.

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

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 una spaziatura semplice possono essere inseriti in un view componente con un layout flessibile, utilizzando la gap proprietà 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>