Dimensione del target touch

Tutti i controlli attivi devono avere un'area visiva e toccabile di almeno 44 pt per 44 pt.

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 piccoli obiettivi e a mirarvi.

Aspettative

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

Come risolvere

Un problema riscontrato da questa regola si verifica quando frame l'altezza e la larghezza di un controllo attivo non sono pari o superiori a 44 pt.

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 44 pt.

Nel codice:

Aggiornare width e height del controllo attivo frame in modo che abbia una dimensione minima di 44 pt.

Questo può essere impostato tramite l'inizializzatore e un frame specifico:

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))

Oppure può essere impostato tramite vincoli di visualizzazione. Se esiste un vincolo attuale sul pulsante, procedere ad aggiornare la larghezza e l'altezza in modo che siano almeno 44 punti. Altrimenti puoi aggiungere dei vincoli:

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

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

SwiftUI

TextFields

Si noti che attualmente in SwiftUI non esiste un modo coerente per aumentare la dimensione dell'area toccabile di un TextField, pertanto un TextField SwiftUI restituirà .INCOMPLETE per questa regola. Un radar report è stato depositato presso Apple.

Bottoni

Utilizzare un modificatore di frame sul contenuto del parametro Etichetta anziché sull'intero pulsante.

1. Utilizzare l'inizializzatore basato sull'etichetta del pulsante: ha 'action' come primo parametro e 'Label' come secondo parametro, come mostrato di seguito.

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

2. Aggiungere un modificatore del frame al contenuto del parametro Label del Button, specificando un'altezza e una larghezza di almeno 44.

Button(action: {
  print("button tapped
}, label: {
  Text("Tap here")
    .frame(width: 80, height: 45)
}

React Native

Alcuni componenti di React Native non sono personalizzabili per consentire regolazioni delle dimensioni, come il Button componente. Se possibile, assicurarsi che tutti i controlli siano di almeno 44 pt per 44 pt. Se non è possibile, prova componenti alternativi che ti consentano di regolare le dimensioni. Suggerimento: quando si utilizzano controlli personalizzati, assicurarsi che il ruolo di accessibilità sia impostato correttamente.