Tamaño del área de toque
Todos los controles activos deben tener un área visual y táctil mínima de 44 dp por 44 dp.
Impacto
En un dispositivo táctil, los controles pequeños son un problema de usabilidad para todos. Además, las personas que experimentan limitaciones motoras tienen mayor dificultad para interactuar con objetivos pequeños y apuntar a ellos.
Expectativas
Los elementos interactivos tienen el potencial de ampliar el área de toque de un objetivo sin aumentar los límites visuales del objetivo. Después de una cuidadosa consideración, Deque insiste en que la mejor práctica es que los límites visuales e interactivos del objetivo estén alineados. Esto le brinda al usuario final un área clara en la cual interactuar para tener la mejor posibilidad de éxito. Por lo tanto, esta regla también prueba que los límites visuales de los elementos interactivos cumplan con el mínimo de 44 dp.
Confirmación
- Identifica la densidad de píxeles de tu dispositivo Android.
- Utilice el inspector de jerarquía de vistas para confirmar el tamaño del control en píxeles.
- Ocurrirá uno de los siguientes casos:
- Accesible: asegúrese de que el control tenga la cantidad correcta de píxeles independientes de la densidad de pantalla (dip).
- Inaccesible: El control no tiene 44 dp de ancho ni 44 dp de alto.
Cómo solucionarlo
Un problema detectado por esta regla ocurre cuando los valores de 'altura' y/o 'ancho' no son 44 dp o más.
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
Algunos componentes de React Native no se pueden personalizar para permitir ajustes de tamaño, como el componente Button
.
Siempre que sea posible, asegúrese de que todos los controles tengan al menos 44 dp x 44 dp. Cuando no sea posible, explore componentes alternativos que le permitan ajustar el tamaño. Consejo: al utilizar controles personalizados, asegúrese de que la función de accesibilidad esté configurada correctamente.