Spaziatura dei target tattili

Cosa Verifichiamo

Gli elementi interattivi dovrebbero avere una dimensione minima di 24 × 24 punti, oppure avere abbastanza spazio intorno a loro in modo tale che, se si posiziona un cerchio con un diametro di 24 punti al centro dell'elemento, questo non intersechi un altro target né con il cerchio per un altro target.

L'area di attivazione di un elemento interattivo può potenzialmente essere estesa oltre i suoi confini visivi — ad esempio, collegando un riconoscimento di gesti con una regione di attivazione più ampia. Dopo una attenta considerazione, Deque sostiene che la migliore pratica è allineare i confini visivi e interattivi del target. Questo offre all'utente finale un'area chiara su cui interagire per la miglior possibilità di successo. Pertanto, questa regola verifica anche che i confini visivi degli elementi interattivi rispettino il minimo di 24pt.

Esempio Fallito ❌

Touch target spacing è insufficiente

Questi controlli sono troppo vicini - un cerchio di 24pt di diametro centrato su uno sovrappone l'altro

Gli utenti con limitazioni motorie possono attivare accidentalmente l'elemento sbagliato

Esempio Superato ✅

Touch target spacing è sufficiente

Ogni controllo è o almeno 24pt × 24pt, oppure ha abbastanza spazio attorno a sé così che un cerchio di 24pt di diametro centrato su di esso non intersechi alcun target adiacente

A colpo d'occhio

• Questa regola ha un impatto serio sugli utenti
• Gli elementi interattivi devono essere almeno 24pt × 24pt, OPPURE posizionati in modo tale che un cerchio con un diametro di 24pt centrato sull'elemento non sovrapponga alcun target adiacente
• Sia i confini visivi che quelli interattivi (area di attivazione) devono soddisfare il minimo
• I cursori devono mantenere almeno 24pt di spazio lungo la loro lunghezza
• I controlli piccoli e strettamente raggruppati sono particolarmente difficili per gli utenti con limitazioni motorie

Impatto sugli Utenti

Su un dispositivo touch, i piccoli controlli sono un problema di usabilità per tutti. Inoltre, le persone che sperimentano limitazioni motorie hanno maggiori difficoltà a interagire con target piccoli che sono troppo vicini per essere attivati indipendentemente.

Conferma Problema di Spaziatura dei Target Tattili

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

1. All'interno di Xcode, seleziona Debug View Hierarchy
2. Seleziona l'elemento da testare
3. Apri il pannello degli ispettori se non visibile
4. Seleziona il Ispettore Dimensioni
5. Osserva la larghezza, l'altezza e la posizione dell'elemento selezionato, in relazione agli elementi interattivi vicini

Si applica uno dei seguenti risultati:

• Superato: L'elemento è almeno 24pt × 24pt e non ci sono elementi sovrapposti che riducono l'area tappabile disponibile al di sotto del minimo
• Superato: L'elemento è più piccolo di 24pt × 24pt, ma lo spazio circostante è sufficiente affinché un cerchio con un diametro di 24pt centrato sull'elemento non intersechi alcun target adiacente
• Superato: I cursori mantengono almeno 24pt di spazio lungo la lunghezza dell'elemento
• Fallito: L'elemento è più piccolo di 24pt × 24pt, con spazio insufficiente tra sé e gli elementi interattivi adiacenti
• Fallito: Un elemento interattivo adiacente riduce l'area tappabile dell'elemento testato al di sotto della soglia minima

Correggi i Problemi

Per risolvere i problemi di Spaziatura dei Target Tattili, assicurati che ogni elemento interattivo sia o almeno 24pt × 24pt oppure abbia abbastanza margine in modo che un cerchio con un diametro di 24pt centrato su di esso non intersechi alcun target interattivo adiacente.

UIKit

Imposta altezza e larghezza minima a 24pt e aggiungi margine tra gli elementi interattivi vicini.

Nello storyboard:

1. Vai all'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 a almeno 24pt

Nel codice:

Aggiorna i width e height dell'elemento frame a essere almeno 24pt.

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

SwiftUI

Usa un modificatore .frame sull'elemento interattivo per impostare l'altezza e la larghezza minime.

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

React Native

Regola l'altezza e la larghezza degli elementi interattivi e usa le proprietà di layout per aggiungere spaziatura tra di essi.

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

Certi elementi non consentono facilmente l'adattamento delle dimensioni. Questi possono essere avvolti in un View con un layout flessibile, utilizzando la proprietà gap per ottenere la giusta spaziatura tra gli elementi:

<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 }}
   />
</View>

Flutter

I widget Material di Flutter applicano di default un'area di contatto di 48pt per 48pt, che di solito fornisce una spaziatura adeguata. Le violazioni sono più probabili con tap target personalizzati costruiti usando GestureDetector, dove la spaziatura deve essere gestita manualmente.

// Passing — spacing added between targets
Row(
  spacing: 8.0,
  children: [
    GestureDetector(                                                          
      onTap: () {},
      child: Container(                                                       
        width: 20,                                                          
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_up, size: 14, color: Colors.white),
      ),                                                                      
    ),
    GestureDetector(                                                          
      onTap: () {},                                                         
      child: Container(
        width: 20,
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_down, size: 14, color: Colors.white),
      ),                                                                      
    ),
  ],                                                                          
)                                                                           

Posso ignorare questa regola?

Lo Spaziamento del Target di Contatto ha un impatto serio per gli utenti. Raccomandiamo di risolvere questo problema eccetto in casi rari dove le limitazioni di layout lo rendono veramente irrealizzabile. Scopri di più su ignorare le regole.

Risorse

Pagine dei Corsi Deque University

• WCAG 2.2 - 2.5.8 Target di Contatto (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.2, Raccomandazione W3C
  • Criterio di Successo 2.5.8 - Dimensione del Target (Minimo)
• Documenti di Comprensione WCAG 2.2
  • Comprensione 2.5.8 AA - Dimensione del Target (Minimo)