Dimensioni Minime per il Tocco

Cosa Verifichiamo

Tutti gli elementi interattivi devono avere una dimensione minima di 44pt per 44pt, sia per l'area visiva che per quella tappabile.

L'area di interazione di un elemento interattivo può potenzialmente essere espansa oltre i suoi confini visivi - ad esempio, collegando un riconoscitore di gesti con una regione di attivazione più ampia. Dopo un'attenta considerazione, Deque mantiene che è una buona pratica allineare i confini visivi e interattivi del target. Questo offre all'utente finale un'area chiara con cui interagire per garantire il massimo successo. Pertanto, questa regola verifica anche che i confini visivi degli elementi interattivi rispettino il minimo di 44pt.

Esempio di Fallimento ❌

Touch target size = 20pt × 20pt

Questo elemento è più piccolo del minimo di 44pt × 44pt

L'area di tocco è troppo piccola per essere attivata in modo affidabile, specialmente per gli utenti con limitazioni motorie

Esempio di Successo ✅

Touch target size = 44pt × 44pt

Questo elemento rispetta il minimo di 44pt × 44pt

Sia i confini visivi sia quelli tappabili sono abbastanza grandi da essere attivati con precisione.

In Sintesi

• Questa regola ha un impatto moderato per gli utenti
• Tutti gli elementi interattivi devono avere un'area visiva e tappabile di almeno 44pt × 44pt
• Sia i confini visivi sia quelli interattivi (area di tocco) devono rispettare il minimo
• Controlli piccoli sono un problema di usabilità per tutti, e particolarmente problematico per utenti con limitazioni motorie

Impatto sugli Utenti

Su un dispositivo touch, controlli piccoli sono un problema di usabilità per tutti. Inoltre, le persone con limitazioni motorie incontrano maggiori difficoltà nell'interagire e puntare obiettivi piccoli.

Conferma Problema di Dimensioni del Tocco

Esegui l'applicazione all'interno di Xcode e naviga alla schermata contenente l'elemento interattivo da testare.

1. All'interno di Xcode, seleziona Gerarchia di Debug della Vista
2. Seleziona l'elemento da testare
3. Apri il Pannello degli Ispettori se non è visibile
4. Seleziona il Ispettore delle Dimensioni
5. Osserva la larghezza e l'altezza dell'elemento selezionato

Se la larghezza o l'altezza è inferiore a 44pt, l'elemento non supera questa regola.

Risolvi i Problemi

Per risolvere i problemi di Dimensioni del Tocco, assicurati che l'area visiva di ciascun elemento interattivo sia di almeno 44pt × 44pt. Sia i confini visivi sia l'area di tocco tappabile dovrebbero coincidere — espandere solo l'area di tocco attraverso un riconoscitore di gesti non è sufficiente.

Un problema trovato da questa regola si verifica quando il frame di un controllo attivo non ha un'altezza e una larghezza di almeno 44pt.

UIKit

Imposta il frame dell'elemento interattivo ad almeno 44pt × 44pt usando uno dei seguenti approcci.

Nello storyboard:

1. Naviga verso l'elemento interattivo
2. Apri il Pannello degli Ispettori se non è visibile
3. Seleziona il Ispettore delle Dimensioni
4. Sotto View, aggiorna i parametri width e height ad almeno 44pt

Nel codice:

Aggiorna il width e il height del frame dell'elemento interattivo ad almeno 44pt.

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 i vincoli di vista. Se c'è un vincolo attuale sul pulsante, procedi ad aggiornare la larghezza e l'altezza per essere un minimo di 44 punti. Altrimenti, puoi aggiungere vincoli:

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

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

SwiftUI

Applica un modificatore .frame per espandere i controlli ad almeno 44pt × 44pt.

Campi di Testo

Si noti che attualmente in SwiftUI non esiste un metodo coerente per aumentare la dimensione dell'area tappabile di un Campo di Testo, quindi un TextField di SwiftUI restituirà .INCOMPLETE per questa regola. È stato presentato un rapporto radar a Apple.

Pulsanti

Usa un modificatore di cornice sul contenuto del parametro label invece che sull'intero pulsante.

1. Usa l'inizializzatore basato sull'etichetta di Button, che ha 'azione' come primo parametro e 'etichetta' come secondo parametro, come mostrato di seguito.

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

1. Aggiungi un modificatore di cornice al contenuto del parametro label del pulsante, 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

Usa le proprietà di dimensione specifiche della piattaforma per garantire che i controlli rispettino la dimensione minima del bersaglio del tocco.

Alcuni componenti di React Native non sono personalizzabili per consentire adattamenti di dimensione, come il componente Button. Se possibile, assicurati che tutti gli elementi interattivi siano almeno 44pt per 44pt. Se non è possibile, esplora componenti alternativi che ti permettano di regolare la dimensione.

Consiglio: quando usi controlli personalizzati, assicurati che il ruolo di accessibilità sia impostato correttamente!

Flutter

I widget Material di Flutter (ElevatedButton, IconButton, ecc.) applicano automaticamente un'area di tocco minima di 48pt per 48pt, quindi soddisfano questo requisito di default. Le violazioni derivano tipicamente da bersagli di tocco personalizzati costruiti con GestureDetector, che non espande l'area di tocco oltre la dimensione visiva.

  // Failing — tap target is only 24×24
  GestureDetector(                                                                                      
    onTap: () {},
    child: Container(                                                                                   
      width: 24,                                                                                      
      height: 24,
      color: Colors.blue,
      child: const Icon(Icons.close, size: 16, color: Colors.white),                                    
    ),
  )                                                                                                     
                                                                                                      
  // Passing — tap target meets 44×44 minimum                                                           
  GestureDetector(
    onTap: () {},                                                                                       
    child: Container(                                                                                 
      width: 44,
      height: 44,
      color: Colors.blue,
      child: const Icon(Icons.close, size: 24, color: Colors.white),
    ),                                                                                                  
  )

Posso ignorare questa regola?

La dimensione del bersaglio del tocco ha un Impatto moderato per gli utenti. Nei casi in cui un vincolo di design impedisce il rispetto del minimo di 44pt — come un'icona della barra degli strumenti in un'interfaccia molto densa — documenta la decisione ed esplora alternative prima di ignorare la regola. Scopri di più su ignorare le regole.

Risorse

Pagine del corso Deque University

• 2.5.5 Dimensione del bersaglio (AAA)

Nota: l'accesso completo alle risorse di Deque University richiede un abbonamento.

Altre risorse

• Linee guida per l'accessibilità dei contenuti web (WCAG) 2.1, raccomandazione W3C
  • Criterio di successo 2.5.5 - Dimensione del bersaglio
• Documenti di spiegazione WCAG 2.1
  • Spiegazione 2.5.5 AAA - Dimensione del bersaglio