Dimensione del Target Tattile
Assicurati che i controlli interattivi siano abbastanza grandi da toccare con precisione
Scopri come stiamo utilizzando l'intelligenza artificiale per questa regola!
Cosa Verifichiamo
Tutti gli elementi interattivi dovrebbero avere una dimensione minima di 44dp per 44dp, sia per l'area visiva che per quella toccabile.
L'area di contatto di un elemento interattivo può potenzialmente essere espansa al di là dei suoi limiti visivi — ad esempio, usando un TouchDelegate per aumentare la regione attiva. Dopo attenta considerazione, Deque sostiene che la migliore pratica è allineare i limiti visivi e interattivi del target. Questo offre all'utente finale un'area chiara con cui interagire per aumentare le probabilità di successo. Pertanto, questa regola verifica anche che i limiti visivi degli elementi interattivi rispettino il minimo di 44dp.
Esempio di Fallimento ❌
Touch target size = 20dp × 20dp
Questo elemento è più piccolo del minimo di 44dp × 44dp
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 = 44dp × 44dp
Questo elemento rispetta il minimo di 44dp × 44dp
Sia i limiti visivi che quelli toccabili sono abbastanza grandi da essere attivati con precisione.
In Sintesi
- Questa regola ha un impatto moderato sugli utenti
- Tutti gli elementi interattivi devono avere una dimensione visiva e toccabile di almeno 44dp × 44dp
- Sia i limiti visivi che quelli interattivi (area di contatto) devono rispettare il minimo
- Controlli piccoli sono un problema di usabilità per tutti, e particolarmente problematici per gli utenti con limitazioni motorie
Impatto sugli Utenti
Su un dispositivo touch, i controlli piccoli sono un problema di usabilità per tutti. Inoltre, le persone con limitazioni motorie trovano più difficile interagire con, e mirare a, piccoli target.
Conferma Problema della Dimensione del Target Tattile
Esegui l'applicazione e naviga fino alla schermata contenente l'elemento da testare.
- In Android Studio, apri il Layout Inspector (Strumenti > Layout Inspector)
- Seleziona l'elemento da testare nell'albero dei componenti o nel telaio
- Nel pannello Attributi, osserva i valori
widtheheightin dp - Se necessario, identifica la densità di pixel del dispositivo per confermare i valori in dp
Se una delle dimensioni è inferiore a 44dp, l'elemento non supera questa regola.
Risolvi i Problemi
Per risolvere i problemi di Dimensione del Target Tattile, assicurati che la dimensione visiva di ciascun elemento interattivo sia di almeno 44dp × 44dp. Sia i limiti visivi che l'area di contatto toccabile devono corrispondere — espandere solo l'area di tocco tramite TouchDelegate non è sufficiente.
Un problema rilevato da questa regola si verifica quando i valori height e/o width di un elemento interattivo non sono 44dp o superiori.
XML
Imposta minimumHeight e minimumWidth sull'elemento, o imposta valori espliciti layout_width e layout_height di almeno 44dp.
Button button = findViewById(R.id.my_button);
button.setMinimumHeight(44);
button.setMinimumWidth(44);<Button
android:id="@+id/an_accessible_button_yay"
android:minimumHeight="44dp"
android:minimumWidth="44dp"
android:text="@string/batman_likes_accessible_buttons" />Compose
Usa un Modifier.size o Modifier.defaultMinSize per impostare una dimensione minima di almeno 44dp × 44dp.
Button(
onClick = { },
modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
Text(text = "Scan for Issues")
}React Native
Usa le proprietà dimensioni specifiche della piattaforma per garantire che i controlli rispettino la dimensione minima del target tattile.
Alcuni componenti di React Native non sono personalizzabili per consentire regolazioni delle dimensioni, come il componente Button.
Se possibile, assicurati che tutti gli elementi interattivi siano almeno 44dp per 44dp. Se non è possibile, esplora componenti alternativi che ti consentano di regolare la dimensione.
Suggerimento: Quando usi controlli personalizzati, assicurati che il ruolo di accessibilità sia impostato correttamente!
Flutter
I widget Material di Flutter (ElevatedButton, IconButton, ecc.) impongono automaticamente un'area di tocco minima di 48dp per 48dp, quindi soddisfano questo requisito per impostazione predefinita. Le violazioni provengono tipicamente da target di tocco personalizzati costruiti con GestureDetector, che non espande l'area toccabile 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 Target Tattile ha un impatto moderato per gli utenti. Nei casi in cui un vincolo di design impedisca di rispettare il minimo di 44dp — 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 Universitario Deque
Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.
Altre Risorse
- Linee guida per l'accessibilità ai contenuti web (WCAG) 2.1, Raccomandazione W3C
- Documenti di comprensione WCAG 2.1