Dimensione del target touch

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

WCAG 2.1 - 2.5.5 AAA Impatto - Moderato

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

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. 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 dp.

Conferma

  1. Identifica la densità di pixel del tuo dispositivo Android.
  2. Utilizzare l'ispettore della gerarchia di visualizzazione per confermare la dimensione del controllo in pixel.
  3. Si verificherà una delle seguenti situazioni:
    • Accessibile: assicurarsi che il controllo corrisponda al numero corretto di pixel indipendenti dalla densità (dip).
    • Inaccessibile: il controllo non è largo 44 dip né alto 44 dip.

Come risolvere

Un problema riscontrato da questa regola si verifica quando i valori di "altezza" e/o "larghezza" non sono pari o superiori a 44 dp.

XML

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

Button(
     onClick = { },
     modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
     Text(text = "My Button")
}

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 almeno 44 dp x 44 dp. 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.