Spaziatura dei Target Tattici

Scopri come utilizziamo l'intelligenza artificiale per questa regola!

Cosa Verifichiamo

Gli elementi interattivi dovrebbero avere dimensioni minime di 24dp per 24dp, o avere abbastanza spaziatura intorno in modo che, se un cerchio con un diametro di 24dp viene posizionato al centro dell'elemento, il cerchio non intersechi un altro target né con il cerchio per un altro target.

L'area di tocco di un elemento interattivo può essere potenzialmente espansa oltre i suoi confini visivi - per esempio, utilizzando un TouchDelegate per aumentare la regione di tocco attiva. Dopo un'attenta considerazione, Deque sostiene che sia buona pratica far coincidere i confini visivi e interattivi del target. Questo offre all'utente finale un'area chiara con cui interagire per la miglior possibilità di successo. Pertanto, questa regola verifica anche che i confini visivi degli elementi interattivi rispettino il minimo di 24dp.

Esempio di Fallimento ❌

Touch target spacing è insufficiente

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

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

Esempio di Successo ✅

Touch target spacing è sufficiente

Ogni controllo è o almeno 24dp × 24dp, o ha abbastanza spazio circostante che un cerchio di 24dp di diametro centrato su di esso non interseca alcun target adiacente

In Breve

• Questa regola ha un impatto serio per gli utenti
• Gli elementi interattivi devono essere almeno 24dp × 24dp, O posizionati in modo che un cerchio di 24dp di diametro centrato sull'elemento non sovrapponga alcun target adiacente
• Sia i contorni visivi sia quelli interattivi (area di tocco) devono rispettare il minimo
• Gli slider devono mantenere almeno 24dp di spazio lungo la loro lunghezza

Impatto sugli Utenti

Su un dispositivo touch, controlli piccoli rappresentano un problema di usabilità per tutti. Inoltre, le persone con limitazioni motorie hanno difficoltà aumentate ad interagire con target piccoli troppo vicini per essere attivati indipendentemente.

Conferma il Problema di Spaziatura dei Target Tattici

Esegui l'applicazione e naviga verso la schermata contenente l'elemento da testare.

1. In Android Studio, apri il Layout Inspector (Strumenti > Layout Inspector)
2. Seleziona l'elemento da testare nell'albero dei componenti o sulla tela
3. Nel pannello Attributi, osserva la larghezza, l'altezza e la posizione dell'elemento selezionato rispetto agli elementi interattivi vicini
4. Se necessario, identifica la densità dei pixel del dispositivo per confermare i valori dp

Si applica uno dei seguenti risultati:

• Superato: L'elemento è almeno 24dp × 24dp, e non ci sono elementi sovrapposti che riducono l'area disponibile per il tocco al di sotto del minimo
• Superato: L'elemento è più piccolo di 24dp × 24dp, ma la spaziatura intorno è sufficiente affinché un cerchio di 24dp di diametro centrato sull'elemento non intersechi alcun target adiacente
• Superato: Gli slider mantengono almeno 24dp di spazio lungo la lunghezza dell'elemento
• Non superato: L'elemento è più piccolo di 24dp × 24dp, con spaziatura insufficiente tra sé e gli elementi interattivi adiacenti
• Non superato: Un elemento interattivo adiacente riduce l'area di tocco dell'elemento testato al di sotto della soglia minima

Correggi i Problemi

Per risolvere i problemi di Spaziatura dei Target Tattici, assicurati che ogni elemento interattivo sia o almeno 24dp × 24dp o abbia abbastanza margine affinché un cerchio di 24dp di diametro centrato su di esso non intersechi alcun target interattivo adiacente.

XML

Imposta minimumHeight e minimumWidth a 24dp, e aggiungi margine tra gli elementi interattivi vicini.

Nel codice:

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

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

Comporre

Usa Modifier.defaultMinSize per impostare un'altezza e una larghezza minime e padding per aggiungere spaziatura tra elementi interattivi adiacenti.

Button(
    modifier = Modifier
        .defaultMinSize(minWidth = 24.dp, minHeight = 24.dp)
        .padding(start = 24.dp, top = 24.dp),
    onClick = { }
) {
    Text(stringResource(id = R.string.button))
}

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 permettono facilmente di regolare le dimensioni. Questi possono essere avvolti in un View con un layout flessibile, usando la proprietà gap per ottenere la corretta 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 impongono per impostazione predefinita un'area di contatto di 48pt x 48pt, che generalmente fornisce una spaziatura adeguata. Le violazioni sono più probabili con target di tocco personalizzati costruiti utilizzando 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?

La Spaziatura del Target di Tocco ha un Impatto serio per gli utenti. Raccomandiamo di risolvere questo problema tranne in rari casi in cui le limitazioni del layout lo rendono realmente impraticabile. Scopri di più su ignorare le regole.

Risorse

Pagine dei Corsi Deque University

• WCAG 2.2 - 2.5.8 Target Tattile (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
  • Comprendere 2.5.8 AA - Dimensione del Target (Minimo)